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

Liferay.PortletURL.createActionURL will be used in liferay to create action URL in Javascript. liferay-portlet-url module of AUI (a JavaScript framework) provides Liferay.PortletURL object which is used to create action URL in Javascript.
Liferay provides nice way (by Liferay.PortletURL.createActionURL) to create action URL in Javascript. Liferay (till liferay 6.2 version) 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, I will be showing you how to create action URL in Javascript.

First you need to create LiferayMVC portlet with plugin project name as actionURL-by-JavaScript and -portlet will be appended by Liferay IDE while creating Liferay plugin project. Give portlet class as com.opensource.techblog.portlet.ActionURLByJavaScriptPortletThe project structure should look like below screenshot.
Liferay.PortletURL.createActionURL - Project structure

Adding Action method in Portlet

Add following code in ActionURLByJavaScriptPortlet.java class.

Explanation:-

  • I have added one action method. This method will be called when user clicks on action URL in JSP.
  • While creating action URL (By Javascript in JSP), I will pass one parameter which I am reading in this action method. ParamUtil is convenient class provided by liferay which is used to read request parameters.
  • Note that since we want to just understand how action URL is generated, I haven’t override render() method but if you want, you can override render() method to place render logic.

action URL by Liferay.PortletURL.createActionURL  in view.jsp

To create portlet URL with AUI (javascript), we will use liferay-portlet-url module of AUI. With the help of this module, actionURL can be created by Liferay.PortletURL.createActionURL (calling createActionURL method of Liferay.PortletURL javascript object). 
Add following code in view.jsp

Explanation:-

  • First few lines are imports and taglib definition.
    • liferay-theme and portlet taglibs are defined to place <liferay-theme:defineObjects/> and <portlet:defineObjects/> tags respectively.These tags are used to make portlet implicit and liferay implicit objects available in JSP.
    • aui taglib is used to define <aui:script> tag, were we placed AUI code.
  • Next I have added a link. Note that I have intentionally kept href blank at this moment. We will construct action URL in AUI and then assign it to href with JavaScript code 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 etc) ready to use.
  • In <aui:script>, the code is written like AUI().use(‘liferay-portlet-url’, function(A) {
    • AUI is modular framework. You must have to register the module first. AUI module can be registered by declaring it in AUI().use method. More than one modules can be declared by comma separate in AUI().use method.
    • In our case, ‘liferay-portlet-url‘ module will be used to create action URL so we have registered it in AUI.use method.
    • in callback function(A), we have created action URL with following JavaScript code.
      • var actionURL = Liferay.PortletURL.createActionURL();
    • Javascript variable Liferay.PortletURL provides various methods to create different kind of portletURL. Here we need to create action URL so we called createActionURL() method (ex. Liferay.PortletURL.createActionURL()). If you wish to create render URL in javascript, you need to call createRenderURL() method on Liferay.PortletURL object.
    • You can set window state and portlet mode by calling setWindowState and setPortletMode method respectively.
    • Additional parameters can be passed by calling setParameter method. I set one parameter called ‘javax.portlet.action’. This is required to call specific action method. To understand how action method is called, you can refer my blog on creating action URL by portlet tag (portlet:actionURL).at the end, we set this action URL to href by following code
      • A.one(“#actionURLWithJS”).set(‘href’,actionURL.toString());
        • A in AUI is a placeholder to apply selector. it’s similar like $ in JQuery.
        • We passed #actionURLWithJs (id of link) to A.one and then set its href value to generated action URL by actionURL.toString();
    • Just debug purpose, I kept alert at the last. (You may remove it)
    • If you wish this action URL points to different portlet, then you need to set target portlet’s portletId in generated action URL (in setPortletId method).
    • In this action 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. When you clicks on the link, the action method will be called and you will see the parameter that we set in actionURL will be printed in server console.

Summing Up

  • action URL can be created in Javascript by AUI module ‘liferay-portlet-url’.
  • Liferay.PortletURL object is used to create action URL. You need to call createActionURL method on Liferay.PortletURL.(ex Liferay.PortletURL.createActionURL())
  • You can set portlet mode and window state while creating actionURL in Javascript.
  • You can pass additional parameter by calling setParameter method on generated action URL.
  • actionURL is created by JavaScript on client side. In some cases, due to security reason, actionURL may not having host name. Please refer this link for more information.

Apart from Liferay.PortletURL.createActionURL, following are other possible ways to create action URL in Liferay

Download Source 
Download Source

Share This Post

8 Comments - Write a Comment

  1. Thanks a lot for your tutos, o lot of useful information . But i tried to apply that on input text, to fire and actionURL when the value of this input change (onchange). But Really nothing happen.

    Is it possible to do that ?

    Reply
    1. Hello Jami,

      Thanks for appreciation and welcome to Techblog. For your problem you can try following solution.

      1) first define your action url with tag.
      2) write jquery on click event handler like
      $(“”).onClick(function(){
      //Call action url here….
      window.url(${actionUrl});
      });
      where ${actiionUrl} is variable represent actionURL which you defined in
      tab.

      Hope this helps you.

      Regards
      Nilang Reply

  2. Hello Nilang,

    Thank you for very helpful post. that I need to refer.

    I am finding a way for back button in liferay in order to it can show inputted values when I back to previous page.

    Can you please give any suggestion?

    Best regards,
    Hung Tra n

    Reply
    1. Hello Hund Tran,

      Sorry for late respond, and thanks for the appreciation ..!!
      In you case, you can crate json of the input that you put in previous screen and when you back, just get that json and fill with values. However, if there are more pages to forward and back, the JSON would be bigger. Hope this help to sort out your issue.

      Feel free to ask questions / give suggestion

      Regards
      Nilang

      Reply
      1. Hello Nilang,

        Thank you very much for this suggestion, I will try with it.

        I really appreciate your suggestion and your post.

        Best regards,
        Hung Tran

        Reply
  3. Thanks for this useful write-up. As an addition I’d like to share that you need the following Liferay property:
    portlet.url.generate.by.path.enabled=true
    in order to be allowed to invoke createURL.

    Reply

Post Comment

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