Liferay input move boxes

This is very good feature of liferay. This is useful when user can use input move box having left and right boxes where user can move fields from one box to other.

How to use?

In Jsp

We need to make keyvalue pair to be passed inside leftBox and rightBox

<% 
           List leftBox = new ArrayList(), rightBox = new ArrayList(); 
           leftBox.add(new KeyValuePair("key", "value"));
%>

Below liferay tag which is useful to make input move box

 <form action="<%= actionURL1 %>" method="post" name="<portlet:namespace />fm" >  
 <liferay-ui:input-move-boxes rightList="<%=rightBox%>" rightTitle="Visible Columns" leftBoxName="allFieldsList" leftList="<%=leftBox%>" rightBoxName="displayFieldsList" leftTitle="All Columns" leftReorder="false" rightReorder="true" cssClass="custom-move-boxes" />   
 <input name="<portlet:namespace />hiddenLeftFields" id="<portlet:namespace />hiddenLeftFields" type="hidden" />   
 <input name="<portlet:namespace />hiddenRightFields" id="<portlet:namespace />hiddenRightFields" type="hidden" />   
 <a href="#" onclick="<portlet:namespace />submitForm();" class="save">Save</a>   
 </form>  

AlloyUI Script which is used for storing selected values in hidden input fields

 <aui:script>  
 Liferay.provide(  
 window,  
 '<portlet:namespace />submitForm',  
 function() {  
 document.<portlet:namespace/>fm.<portlet:namespace />hiddenLeftFields.value = Liferay.Util.listSelect(document.<portlet:namespace/>fm.<portlet:namespace />allFieldsList);  
 document.<portlet:namespace/>fm.<portlet:namespace />hiddenRightFields.value = Liferay.Util.listSelect(document.<portlet:namespace/>fm.<portlet:namespace />displayFieldsList);  
 document.<portlet:namespace/>fm.submit();  
 }, ['liferay-util-list-fields']  
 );  
 </aui:script>  

In Java Class

We can fetch all selected fields separated by comma

 String hideFields = ParamUtil.getString(actionRequest,"hiddenLeftFields");  
 String displayFields = ParamUtil.getString(actionRequest, "hiddenRightFields");