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]);