Configurable Portlet with Portlet Preferences

Portlet preferences can store data related to the configuration of a portlet. These stored preferences can change the view of the portlet dynamically. In this article, we will learn how to create a configurable JSP page for a Liferay portlet with portlet preferences.

Version details: Liferay version 6.2 + Apache Tomcat 7 server.

Adding Configurable portlet preferences

Create a Liferay MVC portlet and then add the <configuration-action-class> tag under the liferay-portlet.xml file as shown below. This tag is to identify the configuration action class for liferay.

<portlet>
 <portlet-name>configurable</portlet-name>
 <icon>/icon.png</icon>
 <configuration-action-class>com.asb.config.ConfigClass</configuration-action-class>
 <header-portlet-css>/css/main.css</header-portlet-css>
 <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
 <css-class-wrapper>configurable-portlet</css-class-wrapper>
</portlet>

Modify the portlet.xml file to enable config mode for portlet as shown below. The highlighted <portlet-mode> tag enables the config mode for the portlet. The highlighted <init-param>  is used for adding a customized configuration jsp page.

<init-param>
 <name>config-template</name>
 <value>/html/configurable/config.jsp</value>
</init-param>

Add the following content to config.jsp file to provide the option to the users to configure the currency type.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib prefix="liferay-portlet" uri="http://liferay.com/tld/portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:defineObjects />
<liferay-portlet:actionURL var="ConfigurationURL" portletConfiguration="true"/>
<%String currency = portletPreferences.getValue("currency", "");%>

<aui:form action="<%=ConfigurationURL %>" method="post" >
 <aui:select name='currencyVal' lable="Add Currency">
 <aui:option value="Franc" selected='<%=currency.equals("Franc")%>'>Franc</aui:option>
 <aui:option value="Dollar" selected='<%=currency.equals("Dollar")%>'>Dollar</aui:option>
 <aui:option value="Euro" selected='<%=currency.equals("Euro") %>'>Euro</aui:option>
 </aui:select>
 <input type="submit" value="Save"/>
</aui:form>

Now create an action class to handle the configuration changes. This class retrieves the currency value entered by the user to portlet preference.

package com.asb.config;
import com.liferay.portal.kernel.portlet.DefaultConfigurationAction;
import com.liferay.portal.kernel.util.ParamUtil;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletConfig;
import javax.portlet.PortletPreferences;
public class ConfigClass extends DefaultConfigurationAction {
  public void processAction(PortletConfig portletConfig, ActionRequest actionRequest,  ActionResponse actionResponse) throws Exception { 
    super.processAction(portletConfig, actionRequest, actionResponse);
    PortletPreferences prefs = actionRequest.getPreferences();
    prefs.setValue("currency", ParamUtil.getString(actionRequest, "currencyVal"));
    prefs.store();
  }
}

Now add the following code to view.jsp file. This file will show the entered currency value.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@page import="com.liferay.portal.kernel.util.GetterUtil" %>
<%@page import="java.lang.String" %>

<portlet:defineObjects />
<%
String currency = portletPreferences.getValue("currency", "");
String currencyVal ="";
if(currency.equalsIgnoreCase("Dollar")) {
 currencyVal = "$";
}
else if(currency.equalsIgnoreCase("Euro")) {
 currencyVal = "€";
}
else {
 currencyVal = "₣";
}
System.out.println("currencyVal"+currencyVal);
%>

<b style="font-size:30px;">Hey.!! Here is your </b>
<b style="font-size: 40px;">50 <%=currencyVal %></b>

Testing the output

Finally, the following are the view and configuration pages respectively.

Conclusion

In this article, we learned how to add configurable Liferay portlet preferences.