• Liferay Auto Fields Example

    Posted on August 24, 2015 by Hamidul Islam in Liferay.

    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

10 Responses so far.

  1. Hassan Bakri says:

    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. James says:

    Works fine.. Thank you.. Is it possible
    for data persistance with Mysql without using service.xml..?

  3. James says:

    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..

  4. Max says:

    Hi,

    How can i update data of form( created using liferay auto field ).?

  5. Vishnu says:

    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,

    • Vishnu says:

      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,

  6. Keyla says:

    Hi, why isn't delete button working for me? Help me please, it does nothing when i press it

  7. Syed Fahad says:

    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

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close