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

https://sourceforge.net/projects/meeralferay/files/LiferayAutoFieldsPortlet/

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

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

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

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

Liferay Auto fields