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:

---

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.

Answer 1

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:

1. Working with Elements and Events, you can scroll down to Manipulating elements heading.
2. Alloy UI - working with Nodes
3. 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:

1. /portal-web/docroot/html/portlet/users_admin/common/addresses.jsp
2. /portal-web/docroot/html/portlet/users_admin/common/phone_numbers.jsp

---

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

1. Tutorial on Liferay Auto-fields.
2. 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.

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

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

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