Liferay Development

Liferay Consulting

Liferay Training

Your Trusted Liferay Solutions Partner

Friday, October 18, 2013

Liferay Auto fields

Liferay Auto fields


The following example gives you the information about how to use liferay auto fields in liferay development.
Life ray auto fields concept provides you can add multiple input fields dynamically to the form.
Means if you want add multiple input fields to the form based on user choice.

Download Auto field portlet from following location


Note:  Portlet developed in Liferay 6.1GA2 EE version

If you want deploy in CE version you just do changes in liferay-plugin-package.properties

Liferay 6.1 EE version

name=LiferayAutoFields
module-group-id=liferay-ee
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=EE
liferay-versions=6.1.20


Liferay 6.1 CE version

name= LiferayAutoFields
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.1.1

Example:

Adding multiple phone numbers
Adding multiple addresses
Add multiple images or document
When we get above requirement we can use auto fields.

Here we have to identify which fields you want make it multiple times such fields you have to wrap into particular div or field set. We have to provide that element id to the auto filed script so that when we click add button that wrapper content will be cloned.

At time of clones all names and ids of fields will become unique.

The following g is example code for auto fields

Add following script in jsp page

<%@page import="javax.portlet.ActionRequest"%>
<%@ include file="init.jsp" %>
<portlet:actionURL var="editArticleActionURL" windowState="<%= WindowState.NORMAL.toString()%>">
  <portlet:param name="<%=ActionRequest.ACTION_NAME%>" value="getAutoFieldsData" />
</portlet:actionURL>
<h1>Liferay auto fields example</h1>
<aui:form action="<%=editArticleActionURL%>" method="post" name="LiferayAautoFieldForm">
  <div id="phone-fields">
    <div class="lfr-form-row lfr-form-row-inline">
      <div class="row-fields">
        <aui:input fieldParam='phoneNumber0' id='phoneNumber0' name="phoneNumber0" label="Phone Number" />
        <aui:select id="phoneTypeId0" name="phoneTypeId0" label="Type">
          <aui:option value="11006" label="Business"></aui:option>
          <aui:option value="11007" label="Business Fax"></aui:option>
          <aui:option value="11008" label="Mobile Phone"></aui:option>
          <aui:option value="11009" label="Other"></aui:option>
          <aui:option value="11011" label="Personal"></aui:option>
        </aui:select>
      </div>
    </div>
  </div>
  <aui:layout>
    <aui:column>
      <aui:button type="submit" value="Save Phone Numbers" name="SavePhoneNumbers"
        onClick="saveData();"></aui:button>
    </aui:column>
  </aui:layout>
  <aui:script use="liferay-auto-fields">
    new Liferay.AutoFields(
    {
    contentBox: '#phone-fields',
    fieldIndexes: '
    <portlet:namespace />
    phonesIndexes'
    }
    ).render();
  </aui:script>
</aui:form>

Add following AUI java script in jsp page.

<aui:script use="liferay-auto-fields">
 new Liferay.AutoFields(
       {
           contentBox: '#phone-fields',
           fieldIndexes: '<portlet:namespace />phonesIndexes'
       }
   ).render();
</aui:script>

Add following code in Action class

public void getAutoFieldsData(ActionRequest actionRequest,ActionResponse response)
                                    throws Exception {
                        System.out.println("=============getAutoFieldsData==");
                        String phonesIndexesString = actionRequest.getParameter(
                                                "phonesIndexes");
            System.out.println("=============phonesIndexesString=="+phonesIndexesString);
                                    int[] phonesIndexes = StringUtil.split(phonesIndexesString, 0);

                                    for (int phonesIndex : phonesIndexes) {
                                                String number = ParamUtil.getString(actionRequest, "phoneNumber" + phonesIndex);
                                                System.out.println("=============phoneNumber=="+number);
                                                int typeId = ParamUtil.getInteger(actionRequest, "phoneTypeId" + phonesIndex);
                                                System.out.println("=============typeId=="+typeId);

            }

}

Screen 1



Screen 2 out put in console:



5 comments :

  1. Hi,

    I have created form with div class="lfr-form-row lfr-form-row-inline" that allows to add multiple rows. For every field, i have written custom validator function along with built-in validators. Validations works fine for first row however for subsequent rows custom validator functions are not invoked.

    Appreciate your help!

    ReplyDelete
  2. One can undoubtedly discover several organizations that offer different bundles for logo structuring. logo design service

    ReplyDelete
  3. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. auto repair Freehold NJ

    ReplyDelete
  4. I like your post. It is good to see you verbalize from the heart and clarity on this important subject can be easily observed... automatic text responder

    ReplyDelete
  5. Beautiful Article. You know Albania has a lot of castles too as a part of its cultural heritage. One of the most distinguished is the one in Porto Palermo. Porto Palermo is a small but beautiful bay, where the water is so clear it looks like the boats are floating. The bay also has a historical value do to the fact that Ali Pashe Tepelena built a fortress that stands between the sea and the mountains in the perfect spot to distinguish the enemies during the war. Albania Adventure

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts