Input Move Boxes in Liferay

Today we will see how to use Input move boxes in liferay. This can be used as a multiple select box. So lets Start:-

First we need to use liferay-ui:input-move-boxes tag in our jsp:-

view.jsp

	<%@page import="com.liferay.portal.kernel.util.KeyValuePair"%>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
	<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
	<%@page import="java.util.ArrayList"%>
	<%@page import="java.util.List"%>
	<portlet:defineObjects />
	<%
	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"));
	List<KeyValuePair> rightList = new ArrayList<KeyValuePair>();
	rightList.add(new KeyValuePair("5", "Five"));
	rightList.add(new KeyValuePair("6", "Six"));
	%>
	<liferay-portlet:actionURL name="save" var="saveURL" />
	<aui:form action="<%=saveURL %>" method="post" name="fm">
	<aui:input name="selectItems" type="hidden" />
	<aui:input name="availableItems" type="hidden" />
	<liferay-ui:input-move-boxes
	leftBoxName="availableValues"
	leftList="<%=leftList %>"
	leftTitle="available"
	rightBoxName="selectedValues"
	rightList="<%=rightList %>"
	rightTitle="selected"
	rightReorder="true"
	/>
	<aui:button-row>
	<aui:button type="submit" value="save" />
	</aui:button-row>
	</aui:form>
	<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/>selectItems').val(selectedValues);
	var availableValues = Liferay.Util.listSelect('#<portlet:namespace/>availableValues');
	A.one('#<portlet:namespace/>availableItems').val(availableValues);
	submitForm('#<portlet:namespace/>fm');
	});
	</aui:script>

view raw view.jsp hosted with ❤ by GitHub

Explanation:-
In this we create two list leftList and rightList and then put in our move box tag. When we submit the form by using saveURL the data can be fetch by using:-

	@Override
	public void processAction(ActionRequest request, ActionResponse response) throws PortletException, IOException {
	String[] selectItems = ParamUtil.getParameterValues(request, "selectItems", new String[0]);
	for (String select : selectItems) {
	System.out.println("Selected=>"+select);
	}
	String[] availableItems = ParamUtil.getParameterValues(request, "availableItems", new String[0]);
	for (String available : availableItems) {
	System.out.println("Available=>"+available);
	}
	}

view raw Demo.java hosted with ❤ by GitHub

Output:-

Hope this will Help....

Related Post:-

Liferay Auto Fields

Categorization in web content

Structure and Template in Web Content

Fetch Web Content Programmatically

Get Journal Article Using SAX Parser

Form Handling in Spring Portlet

Embedding a Web Content in a Portlet

Fetch Latest Version Journal Article or Web Content in Liferay