Adding dynamic elements to aui form in liferay

Question

How can we add dynamic aui form elements in liferay by using script or aui:script ?? If that is not possible, is there any alternate solution.

I have an aui form which has two sections. On clicking of a button, I want to add new sections to the form dynamically through javascript. I tried using document.createElement(), but by using that, we will be able to create only HTML dom elements. I want to create aui elements like aui:input, aui:select, etc

This is how my form is structured:

enter image description here

Assume that I have a button in second section. When I click that, I want to add one more aui:fieldset element to the aui:form as a child.

You can have 2 divs hidden (having your fields respectively) in your form and show them based on the button clicks through javascript, will that not work ? — Ankit P, Mar 14 '14 at 05:03

Prakash K · Accepted Answer · 2014-06-17T09:49:38.777

we will be able to create only HTML dom elements. I want to create aui elements like aui:input, aui:select, etc

Kindly understand aui:input, aui:select etc are JSP tags meaning they are server-side and are ultimately rendered into HTML elements by the container and that is what you see in the browser. Its just that those elements are rendered with some <div>s & <span>s (which are HTML elements!) and have their own css-class.

So on a click of a button if you want to a create another form element than you have to use either document.createElement or document.innerHTML. Javascript has nothing to do with server side so it can't generate or render aui tags, but you can create HTML elements and add to the form similar in style to the aui tags.

Here are some basic tutorials to get you started with Alloy UI javascript:

Working with Elements and Events, you can scroll down to Manipulating elements heading.
Alloy UI - working with Nodes
Alloy UI Form builder, only works with Liferay 6.2.

Liferay way of doing things

Adding Addresses and Phonenumbers in Users and Organizations module (Control Panel → Organization → Edit → Identification section → Addresses), you can check the following JSPs:

EDIT _{(As per the OP's comment)}

Tutorial on Liferay Auto-fields.
Source code of the tutorial.

A Short tutorial on auto-fields inspired by LiferaySavvy Link above :-) _{As per the policy of stackoverflow and for the convenience of users}

The explanation is given as code comments.

Javascript code to create dynamic fields:

<aui:script use="liferay-auto-fields">
new Liferay.AutoFields(
    {
        contentBox: '#phone-fields', // this is the container within which the fields would be added dynamically
        fieldIndexes: '<portlet:namespace />phonesIndexes' // this is the field which will store the values of the 
    }
).render();
</aui:script>

JSP or HTML code to work with the javascript:

<aui:form action="<%=editArticleActionURL%>" method="post" name="LiferayAutoFieldForm">
    <div id="phone-fields">
        <div class="lfr-form-row lfr-form-row-inline">
            <div class="row-fields">
                <!--
                    Notice the zero at the end of the name & id of the input element "phoneNumber0".
                    When you add dynamic fields this would be incremented.
                -->
                <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>
    .... <!-- other input fields and submit buttons etc -->
</aui:form>

Code for fetching the dynamic element's values in our controller:

String phonesIndexesString = actionRequest.getParameter("phonesIndexes"); // do you remember: fieldIndexes: '<portlet:namespace />phonesIndexes'? :-)
int[] phonesIndexes = StringUtil.split(phonesIndexesString, 0);

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

Hope this helps.

Thanks Prakash for pointing out. I will try it out using autofields — Kiran Kulkarni, Mar 14 '14 at 11:21
For others trying to achieve the same task, I followed this tutorial for creating dynamic form : liferaysavvy.com/2013/10/liferay-auto-fields.html — Kiran Kulkarni, Mar 18 '14 at 11:17

score 2 · Answer 2 · answered Mar 14 '14 at 08:12

2

Look at aui:auto-fields tag lib. Let see an example of it within phone managment in user account.

answered Mar 14 '14 at 08:12

Daniele Baggio

2,157
1
14
21

Thanks Daniele. I will try it out using auto-fields and update – Kiran Kulkarni Mar 14 '14 at 11:22
Is there really a taglib as auto-field, can you point out the liferay code that is using such a taglib? – Prakash K Mar 14 '14 at 13:37
For others trying to achieve the same task, I followed this tutorial for creating dynamic form : http://www.liferaysavvy.com/2013/10/liferay-auto-fields.html – Kiran Kulkarni Mar 18 '14 at 11:17

Adding dynamic elements to aui form in liferay

2 Answers2