Customize custom portlet configuration page

Using this feature we can store/change portlet related configuration at run time. Configuration page in liferay uses preferences to store the configuration.

There are two ways using which we can customize configuration page of custom portlet:

1. By using default DefaultConfigurationAction Class.
2. By using own java Class that extend  DefaultConfigurationAction  Class.

1. By using default DefaultConfigurationAction Class.

STEPS: 

Step 1. Create one project of portlet plugin type, name in this example : CustomizedPortletConfigurationPage-portlet

Step 2. Create one portlet inside created project, portlet class name in this example: CustomizedPortletConfiguration.java

Before customizing portlet configuration we will see what is portlet configuration and from where we can find  portlet configuration link.

Follow below screens:

In above last screen we can see that in configuration currently there are two tab links one for permission and one for sharing.

After customizing configuration page we will get one more link(Setup)  in configuration section

Step 3.  Add
<configuration-action-class>com.liferay.portal.kernel.portlet.DefaultConfigurationAction </configuration-action-class> in  liferay-portlet.xml just after <icon>tag,
after adding
liferay-portlet.xml looks like below:

<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">

<liferay-portlet-app>

<portlet>
<portlet-name>customized-portlet-configuration</portlet-name>
<icon>/icon.png</icon>
<configuration-action-class>com.liferay.portal.kernel.portlet.DefaultConfigurationAction </configuration-action-class>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>
/js/main.js
</footer-portlet-javascript>
<css-class-wrapper>
customized-portlet-configuration-portlet
</css-class-wrapper>
</portlet>
<role-mapper>
<role-name>administrator</role-name>
<role-link>Administrator</role-link>
</role-mapper>
<role-mapper>
<role-name>guest</role-name>
<role-link>Guest</role-link>
</role-mapper>
<role-mapper>
<role-name>power-user</role-name>
<role-link>Power User</role-link>
</role-mapper>
<role-mapper>
<role-name>user</role-name>
<role-link>User</role-link>
</role-mapper>
</liferay-portlet-app>

Step 4. Create one jsp name: configuration.jsp inside /html/customizedportletconfiguration
and paste below code in configuration.jsp

configuration.jsp

<%@page import="com.liferay.portal.kernel.util.StringPool"%>
<%@page import="javax.portlet.PortletPreferences"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />

 
 <h2>Select Fields and type message You Want to Show</h2>
 <liferay-portlet:actionURL portletConfiguration="true" var="configurationURL">
 </liferay-portlet:actionURL>

 <aui:form action="<%= configurationURL %>" method="post" name="fm">
<aui:input name="cmd" type="hidden" value="update" />
<aui:input name="preferences--showMessage--" type="checkbox"/>
<aui:input name="preferences--message--" type="text" />
<aui:button type="submit" value="Display Message"></aui:button>

 </aui:form>

Step 5. Give entry for configuration.jsp as config-template   for configuration mode in portlet.xml like by deafult there is view-template for view mode.
<init-param>
       <name>config-template</name>
       <value>/html/customizedportletconfiguration/configuration.jsp</value>
</init-param>

portlet.xml

<?xml version="1.0"?>

<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" version="2.0">

<portlet>
<portlet-name>customized-portlet-configuration</portlet-name>
<display-name>Customized Portlet Configuration</display-name>
<portlet-class>
com.test.CustomizedPortletConfiguration
</portlet-class>
<init-param>
<name>view-template</name>
<value>/html/customizedportletconfiguration/view.jsp</value>
</init-param>
<init-param>
       <name>config-template</name>
       <value>/html/customizedportletconfiguration/configuration.jsp</value>
        </init-param>
<expiration-cache>0</expiration-cache>
<supports>
<mime-type>text/html</mime-type>
<portlet-mode>view</portlet-mode>
</supports>
<portlet-info>
<title>Customized Portlet Configuration</title>
<short-title>Customized Portlet Configuration</short-title>
<keywords></keywords>
</portlet-info>
<security-role-ref>
<role-name>administrator</role-name>
</security-role-ref>
<security-role-ref>
<role-name>guest</role-name>
</security-role-ref>
<security-role-ref>
<role-name>power-user</role-name>
</security-role-ref>
<security-role-ref>
<role-name>user</role-name>
</security-role-ref>
</portlet>

</portlet-app>

Step 6. Paste below code in view.jsp

 <%@page import="com.liferay.portal.kernel.util.StringPool"%>
<%@page import="com.liferay.portal.kernel.util.Validator"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="javax.portlet.PortletPreferences"%>
<portlet:defineObjects />

<%
   PortletPreferences prefs = renderRequest.getPreferences();

   String showMessage = (String)prefs.getValue("showMessage", "false");
   String message = (String)prefs.getValue("message",StringPool.BLANK);
%>
   <h4>For Show/Hide Message:- <br>Click on Gear->Configuration->Set Up</h4><br>
 
   <p>Configure Today's Message Based On preference</p>
   <table border="1" cellpadding="8">
      <tr>
 <c:if test='<%=showMessage.equalsIgnoreCase("true") %>'>
<th><p style="color:green;">Today's Message: <%=Validator.isNotNull(message) ? message : StringPool.BLANK%></p></th>
 </c:if>
</tr>
   </table>
 

Now deploy and place portlet on portal page.

Output: