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

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

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

Add Render method in Portlet

Add following code in RenderURLByJavaScriptPortlet.java class.

Explanation:-

  • render() method is added in 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

Explanation:-

  • 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 render URL and then assign it to href with JavaScript during page load.
  • <aui:script> tag is used to place all AUI code. This tag internally create <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 render URL so we have registered it. 
    • in callback function(A), we have created render URL with 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 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.
    • at the end, we set this render URL to href by following code
      • A.one(“#renderURLWithJS”).set(‘href’,renderUrl1.toString());
        • A in AUI is a placeholder to apply selector. its similar like $ in JQuery.
        • We passed #renderURLWithJs (id of link) to A.one 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 portlet is deployed, refresh page, click on the link and you will see the parameter that we set in renderURL with AUI in 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 render URL in Liferay
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.
Download Source 
Download Source

Share This Post

Post Comment

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