Liferay Portlet URL in JavaScript

Today we will see how create Portlet URL in JavaScript. Some time we have a situation in which we don't want to submit a form but need to send the values of fields from view to controller. In this post we create a text box in which we fill the value and get this value in our controller without submitting any form.

So lets start this Step by Step:-

Step 1:-Create a Basic Portlet

Here i create a project with name fordemo-portlet and then create a portlet HelloWorld in it.





Step 2:-Change your view.jsp

Open your view.jsp and paste this:-

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
	<liferay-theme:defineObjects/>
	<portlet:defineObjects />
	Enter User Name: <input name="<portlet:namespace/>userName" type="text" id="<portlet:namespace/>userName" />
	<a id="renderURL" href="javascript:void(0);"> Click here</a>
	<!-- Code for Link -->
	<aui:script>
	AUI().use('liferay-portlet-url', function(A) {
	var linkValue = A.one("#renderURL");
	var userName = A.one('#<portlet:namespace/>userName');
	linkValue.on('click', function(A) {
	var renderUrl1 = Liferay.PortletURL.createRenderURL();
	renderUrl1.setPortletId("<%=themeDisplay.getPortletDisplay().getId() %>");
	renderUrl1.setParameter("userName", userName.val());
	window.location.href = renderUrl1;
	});
	});
	</aui:script>
	<input type="button" value="Submit" onclick="renderCall()">
	<!-- Code for Button -->
	<script type="text/javascript">
	function renderCall(){
	AUI().use('aui-io-request', function(A){
	var userName = A.one('#<portlet:namespace/>userName');
	var renderUrl1 = Liferay.PortletURL.createRenderURL();
	renderUrl1.setPortletId("<%=themeDisplay.getPortletDisplay().getId() %>");
	renderUrl1.setParameter("userName", userName.val());
	window.location.href = renderUrl1;
	});
	}
	</script>

view raw view.jsp hosted with ❤ by GitHub

Explanation:-
Here i create two scripts one for link and second for button.You can use any one based on your requirement.


Step 3:-Change your Controller

Open your java file and paste this:-

	package com.test;
	import java.io.IOException;
	import javax.portlet.GenericPortlet;
	import javax.portlet.PortletException;
	import javax.portlet.PortletRequestDispatcher;
	import javax.portlet.RenderRequest;
	import javax.portlet.RenderResponse;
	import com.liferay.portal.kernel.log.Log;
	import com.liferay.portal.kernel.log.LogFactoryUtil;
	public class HelloWorld extends GenericPortlet {
	public void init() {
	viewTemplate = getInitParameter("view-template");
	}
	public void doView(RenderRequest request, RenderResponse renderResponse)throws IOException, PortletException {
	String userName = request.getParameter("userName");
	System.out.println("User Name is =>"+userName);
	include(viewTemplate, request, renderResponse);
	}
	protected void include(String path, RenderRequest renderRequest,RenderResponse renderResponse)throws IOException, PortletException {
	PortletRequestDispatcher portletRequestDispatcher = getPortletContext().getRequestDispatcher(path);
	if (portletRequestDispatcher == null) {
	_log.error(path + " is not a valid include");
	}
	else {
	portletRequestDispatcher.include(renderRequest, renderResponse);
	}
	}
	protected String viewTemplate;
	private static Log _log = LogFactoryUtil.getLog(HelloWorld.class);
	}

view raw HelloWorld.java hosted with ❤ by GitHub

Step 4:-Check the output

Deploy your portlet and add the portlet on page:-

Fill the value in text field and click on Link or Button .The value is printed in console.

Note:- URL created in both the cases is:-

http://localhost:8080/c/portal/layout?p_l_id=10678 &p_p_id = helloworld_WAR_fordemoportlet&p_p_lifecycle=0&_helloworld_WAR_fordemoportlet_userName=Aditya

You can download the source code from here.

Hope this will Help....

Related Post:-

Basic web content in Liferay

Categorization in web content

Structure and Template in Web Content

Fetch Web Content Programmatically

Get Journal Article Using SAX Parser

Form Handling in Spring Portlet

Embedding a Web Content in a Portlet

Fetch Latest Version Journal Article or Web Content in Liferay