Liferay Auto Fields Example

Liferay-Auto-Fields


aim

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.  

liferay-auto-fields-phone-number-section

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

auto-field-references

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

 

liferay-auto-field-demo-portlet

Download Source Code

About The Author

10 thoughts on “Liferay Auto Fields Example”

  1. Hi Hamidul
    i’m already used autofield but i can’t get the parameter rowIndexes (it getting empty String)
    the only diff is i start indexing by 0 (firstName0 instead of firstName1) could that be the reason ???!!

  2. Hi, I tried with hibernate for data persistancy with mysql database, but failed in the approach. Could you consider by publishing a tutorial about hibernating with Liferay Auto field exampe.

    Thank you in advance..

  3. Hi,

    I am using multiple auto fields(like for phone, address, alternate email) in same jsp.
    In this case, i found some issue like on click on plus(+) button more then 1 row is open and its index value also not proper.

    Please help on the this issue.

    Thanks,

    1. Hi,

      I resolved the issue.
      Actually, there was not any issue with auto fields. it was an issue because div() was not proper.

      now i resolved it and its working fine.

      Thanks,

  4. Hi, i have a date picker in place of first name, when i click on the (+) a new row appears, but the date picker in the new row is not working.. could u please help me..

    Thanks

Leave a Reply

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

Scroll to Top
%d