create render URL By Java Script (AUI module – Liferay.PortletURL)

Liferay provides a nice way to create render URL in Javascript. Liferay ships with a Javascript framework called AUI (Alloy UI – AUI is a modular framework and provides various modules to create components in Javascript. In this article, we will see how to create a render URL in Javascript.

First, you need to create LiferayMVC portlet with the plugin project name as renderURL-by-JavaScritp, and -portlet will be appended by Liferay IDE while creating the Liferay plugin project. Give portlet class as com.opensource.techblog.portlet.RenderURLByJavaScriptPortletThe project structure should look like the below screenshot.
create render URL By Java Script (AUI module - Liferay.PortletURL)

Add Render method in Portlet

Add following code in class.

//define log for this class
private static final Log _log = LogFactoryUtil.getLog(RenderURLByJavaScriptPortlet.class.getName());

public void render(RenderRequest request, RenderResponse response)
throws PortletException, IOException {" This is render method of RenderURLByJavaScriptPortlet");

String data = request.getParameter("param");
String data1= ParamUtil.getString(request, "param","");
System.out.println("parameter with request.getParameter is =>"+data);
System.out.println("parameter with ParamUtil.getString is =>"+data1);

super.render(request, response);


  • render() method is added in the portlet. In this render method, we are simply reading request parameter and showing in logger in render method().

Construct render URL in view.jsp

To create portlet URL with AUI (javascript), we will use liferay-portlet-url module of AUI. Add following code in view.jsp
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@page import="com.liferay.portal.kernel.portlet.LiferayPortletMode"%>
<%@ taglib uri="" prefix="portlet" %>
<%@ taglib uri="" prefix="aui" %>
<%@ taglib uri="" prefix="liferay-theme" %>

<portlet:defineObjects />

<a id="renderURLWithJS" href=""> This render URL link is created with Javascript</a>
AUI().use('liferay-portlet-url', function(A) {
var renderUrl1 = Liferay.PortletURL.createRenderURL();
renderUrl1.setWindowState("<%=LiferayWindowState.NORMAL.toString() %>");
renderUrl1.setParameter("param","This value comes from Javascript");
renderUrl1.setPortletMode("<%=LiferayPortletMode.VIEW %>");
renderUrl1.setPortletId("<%=themeDisplay.getPortletDisplay().getId() %>");"#renderURLWithJS").set('href',renderUrl1.toString());
alert("renderUrl1 is ->"+renderUrl1.toString());


  • First few lines are imports and taglib definition.
    • portlet and liferay-theme taglibs are defined to place <liferay-theme:defineObjects/> and <portlet:defineObjects/> tags.These tags are used to make portlet implicit and liferay implicit objects available in JSP respectively.
    • aui taglib is used to define <aui:script> tag, were we placed AUI code.
  • Next we added a link. Note that we intentionally keep href blank at this moment. We will construct renderURL and then assign it to href with JavaScript during page load.
  • <aui:script> tag is used to place all AUI code. This tag internally creates <script> tag and make AUI core modules ( like node) ready to use.
  • In <aui:script>, the code is written like AUI().use(‘liferay-portlet-url’, function(A) {
    • AUI is modular framework. To use specific module, it needs to register by declaring it in AUI().use method. More than one modules can be declared by comma separate in AUI().use.
    • In our case, liferay-portlet-url module is used to create renderURL so we have registered it. 
    • in the callback function(A), we have created renderURL with the following JS code.
      • var renderUrl1 = Liferay.PortletURL.createRenderURL();
    • Javascript variable Liferay.PortletURL provides various methods to create different kind of portletURL. Here we need to create a render URL so we called createRenderURL() method.
    • then we set window state and portlet mode to this render URL. Any additional parameter can be passed by calling setParameter method.
    • in the end, we set this render URL to href by the following code
        • A in AUI is a placeholder to apply selector. its similar like $ in JQuery.
        • We passed #renderURLWithJs (id of link) to and then set its href value to generated render URL by renderUrl1.toString();
    • Just debug purpose, I kept alert at the last.
    • We also can create render URL to point different portlet by setting its portletId in generated render URL(in setPortletId method). 
    • In this render URL, we have passed current portlet’s Id by calling themeDisplay.getPortletDisplay.getId() which returns current portlet’s Id. themeDisplay is liferay implicit object which is available by adding <liferay-theme:defineObjects/> tag.

Save view.jsp and re-deploy the portlet. Once the portlet is deployed, refresh page, click on the link and you will see the parameter that we set in renderURL with AUI in the server console.

Summing Up

  • render URL can be created in Javascript by AUI module ‘liferay-portlet-url’.
  • We can set portlet mode and window state while creating renderURL in Javascript.
  • We can pass additional parameter by calling setParameter method on generated render URL.
  • renderURL is created by JavaScript on client side.In some cases, due to security reason, renderURL may not having host name. Please refer this link for more information.
Following are other possible ways to create renderURL in Liferay
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.
Download Source 
Download Source

Recommended For You

About the Author: Nilang

Nilang Patel is a technology evangelist who loves to spread knowledge and helping people in all possible ways. He is an author of two technical books - Java 9 Dependency and Spring 5.0 Projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.