Liferay Auto Fields Example

Liferay Auto Fields is an Alloy component which is used in many places in Liferay existing portlets. Using Liferay Auto Fields we can add multiple fields in a form. In this article we will try to understand whats Liferay Auto Fields and how it can be used in our custom portlet. We will create a sample portlet to demonstrate the use of auto fields. 

Whats Exactly Liferay Auto Fields:

If you are still confused whats Auto Fields, then log in Liferay with your admin credentials. Go to the control panel and edit any existing user. Go to the phone number section. where we can add many phone numbers as we want. This functionality is done by liferay auto fields.  

There are many other places like asset publisher portlet, RSS Portlet etc where auto fields are widely used. 

Liferay Auto Fields in Custom Portlet:

Lets create a custom portlet for the demonstration of Liferay Auto Fields. Below are the few steps

Step 1: Create Portlet

We can create a sample portlet by Liferay IDE. In our case we have created a portlet called auto-field-demo-portlet. However you can give any name of the project. Download the source code at the end of the article.

Step 2: Writing code for view page

view.jsp

<%@page import="javax.portlet.ActionRequest"%>
<%@page import="javax.portlet.PortletURL"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>

<portlet:defineObjects />

<portlet:actionURL name="addMember" var="addMemberURL"/>

<aui:form name="fm" method="POST" action="<%=addMemberURL.toString()%>" >

<div id="member-fields">

<div class="lfr-form-row lfr-form-row-inline">

<div class="row-fields" style="display: flex;">
				<aui:input fieldParam='firstName1' id='firstName1' name="firstName1" label="First Name" />
				<aui:input fieldParam='lastName1' id='lastName1' name="lastName1" label="Last Name" />
				<aui:select id="gender1" name="gender1" label="Gender">
					<aui:option value="male" label="Male"></aui:option>
					<aui:option value="female" label="Female"></aui:option>
				</aui:select>
			</div>

		</div>

	</div>

	<aui:button type="submit"/>

</aui:form>

<aui:script>

AUI().use('liferay-auto-fields',function(A) {
 new Liferay.AutoFields(
       {
           contentBox: '#member-fields',
           fieldIndexes: '<portlet:namespace />rowIndexes'
       }
   ).render();
   });
</aui:script>

Note 1: contentBox: ‘#member-fields’ is to represent where to show the Liferay Auto Fields

Note 2:   fieldIndexes: ‘<portlet:namespace />rowIndexes’ is to represent the index of each row. It can be retrieved in process action.

Note 3: Each time we click the + button in the UI, the content of

<div class=”lfr-form-row lfr-form-row-inline”></div class=”lfr-form-row lfr-form-row-inline”> will be repeated

Step 3: Processing the form

package com.proliferay.demo.portlet;

import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.ProcessAction;

import com.liferay.portal.kernel.exception.PortalException;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.log.Log;
import com.liferay.portal.kernel.log.LogFactoryUtil;
import com.liferay.util.bridges.mvc.MVCPortlet;

/**
 *
 * @author Hamidul Islam
 *
 */

public class AutoFieldsDemo extends MVCPortlet {

	@ProcessAction(name = "addMember")
	public void updateUserPassword(ActionRequest actionRequest,	ActionResponse actionResponse) throws PortalException,	SystemException {

		/**
		 * In the UI rowIndexes is mentioned as row index.
		 * If there are two rows in the UI then it will have value 1,2
		 * If there are three rows in the UI then it will have value 1,2,3 and so on.
		 */

		String rowIndexes = actionRequest.getParameter("rowIndexes");

		_log.info("::::::::::::::::rowIndexes:::::::::::::::::::::::" + rowIndexes); 

		/**
		 * Split the row index by comma
		 */

		String[] indexOfRows = rowIndexes.split(",");

		/**
		 * indexOfRows.length is the number of rows in the UI
		 */

		_log.info("::::::::::::::::indexOfRows.length:::::::::::::::::::::::"+ indexOfRows.length);

		for (int i = 0; i < indexOfRows.length; i++) {

			String firstName = (actionRequest.getParameter("firstName"+ indexOfRows[i])).trim();

			String lastName = (actionRequest.getParameter("lastName"+ indexOfRows[i])).trim();

			String gender = actionRequest.getParameter("gender"+ indexOfRows[i]);

			_log.info("::::::::::::First Name::::::::::::::" + firstName);
			_log.info("::::::::::::Last Name::::::::::::::" + lastName);
			_log.info("::::::::::::Gender::::::::::::::" + gender);

			/**
			 * From here we can give a service call to persist the data.
			 */
		}
	}

	private Log _log = LogFactoryUtil.getLog(AutoFieldsDemo.class.getName());
}

After deploying the portlet the UI will look like something like below

Download Source Code