Cookies help us deliver our services.

By using our services, you agree to our use of cookies. Learn more

I understand

Liferay provides many and useful taglibs that can be used in your JSP pages.

One of these is liferay-ui:input-move-boxes which allows you to select values ​​from a list; let's see how it works.

Who has ever tried to configure Liferay, will have had the need to configure the portal languages. 

This configuration is performed using 2 combo boxes (in multiple selection) side by side: the left box contains the selected items, while the right box contains the available items. Between the 2 boxes there are buttons that allow you to move items from one box to another. 

This component is the liferay-ui:input-move-boxes taglib; 90% of the code to be written resides within a JSP.

First, we begin to define 2 lists of objects that represent the contents of the 2 combo boxes; remember that, by convention, the left box represents the selected values and the right box represents the available values. These 2 lists must contain KeyValuePair objects which are nothing more than a key / value pair.

<%
List<KeyValuePair> leftList = new ArrayList<KeyValuePair>();
leftList.add(new KeyValuePair("1", "One"));
leftList.add(new KeyValuePair("2", "Two"));
leftList.add(new KeyValuePair("3", "Three"));
leftList.add(new KeyValuePair("4", "Four"));
leftList.add(new KeyValuePair("5", "Five"));
leftList.add(new KeyValuePair("6", "Six"));

List<KeyValuePair> rightList = new ArrayList<KeyValuePair>();
rightList.add(new KeyValuePair("7", "Seven"));
rightList.add(new KeyValuePair("8", "Eight"));
rightList.add(new KeyValuePair("9", "Nine"));
%>

Then we will add the taglib itself, placing it inside an HTML form; we will also include an hidden field that will be useful later.

<liferay-portlet:actionURL name="save" var="saveURL" />
<aui:form action="<%=saveURL %>" method="post" name="fm">
    <aui:input name="values" type="hidden" />
    <liferay-ui:input-move-boxes
        leftBoxName="selectedValues"
        leftList="<%=leftList %>"
        leftReorder="true"
        leftTitle="selected"
        rightBoxName="availableValues"
        rightList="<%=rightList %>"
        rightTitle="available"
    />

    <aui:button-row>
        <aui:button type="submit" value="save" />
    </aui:button-row>
</aui:form>

The taglib parameters are identical and related to the 2 combo boxes.

leftBoxName
Name of the combo box
leftList
Values list of the combo box, created above
leftReorder
Shows the buttons to order the elements inside the combo box
leftTitle
Label of the combo box

Only one thing left in the JSP page: on the form submit event, the hidden field must be filled with the values ​​selected in the left (or right) combo box; this step is required because the taglib only move values ​​from one box to the other, but these values ​​are not selected and therefore are not passed in the request. But with a bit of Javascript we can read all the values ​​in a box, turn them into a string and fill the hidden field.

<aui:script use="liferay-util-list-fields">
A.one('#<portlet:namespace/>fm').on('submit', function(event) {
    var selectedValues = Liferay.Util.listSelect('#<portlet:namespace/>selectedValues');
    A.one('#<portlet:namespace/>values').val(selectedValues);
    submitForm('#<portlet:namespace/>fm');
});
</aui:script>

The JSP page is ready, only one thing left: to read the values ​​inside the processAction to manage them as needed.

String[] values = ParamUtil.getParameterValues(actionRequest, "values", new String[0]);