Blogs

Item selector allows users to select OOB as well as custom entities by providing an user-friendly UI component. This UI component is backed by an Item Selector API which can be extended to create a custom item selector per your requirements. Many Liferay OOB application uses the item selector to let user select the public and private pages in the site. We can add that feature to the custom portlets as well.

To add the layout item selector in your portlet's jsp, follow the below steps:

Add the below dependencies to the build.gradle:

compileOnly group: 'com.liferay', name: 'com.liferay.item.selector.api', version: '3.0.6'

compileOnly group: 'com.liferay', name: 'com.liferay.layout.item.selector.api', version: '4.0.2'

compileOnly group: 'com.liferay', name: 'com.liferay.item.selector.criteria.api', version: '3.0.2'

Add the itemSelector OSGI dependency to your portlet class:

private ItemSelector itemSelector;

@Reference(unbind = "-")

public void setItemSelector(ItemSelector itemSelector) {

this.itemSelector = itemSelector;

}

Next we define the ItemSelectorCriteria and the ItemSelectorReturnType and create the itemSelectorURL for the criteria and return type.

LayoutItemSelectorCriterion layoutItemSelectorCriterion = new LayoutItemSelectorCriterion();

List<ItemSelectorReturnType> desiredItemSelectorReturnTypes = new ArrayList<ItemSelectorReturnType>();

desiredItemSelectorReturnTypes.add(new URLItemSelectorReturnType());

layoutItemSelectorCriterion.setDesiredItemSelectorReturnTypes(desiredItemSelectorReturnTypes);

PortletURL itemSelectorURL = itemSelector.getItemSelectorURL(RequestBackedPortletURLFactoryUtil.create(renderRequest), "selectLayoutEvent", layoutItemSelectorCriterion);

renderRequest.setAttribute("itemSelectorURL", itemSelectorURL.toString());

We need to add a trigger for the layout item selector and define what happens when layout is selected. In thejsp, add an input field and a button to open the item selector dialog. 

<aui:input type="text" readonly="true" name="selectedLayout" value=""></aui:input>

<aui:button name="selectLayout" value="Select" />

Add the script to render the item selector on click of the button and update the selected layout's url in the input box. 

<%
String itemSelectorURL = (String)renderRequest.getAttribute("itemSelectorURL");
%>

<aui:script use="aui-base,liferay-item-selector-dialog">

var selectedLayout = A.one('#<portlet:namespace />selectedLayout');

A.one('#<portlet:namespace />selectLayout').on('click',function(event) {

var itemSelectorDialog = new A.LiferayItemSelectorDialog(
                 {
                     eventName: 'selectLayoutEvent',

                     on: {

                            selectedItemChange: function(event) {

                            var selectedItem = event.newVal;

                            if (selectedItem) {

                                selectedLayout.val(selectedItem.value);

                            }

                         }

                     },

                   title: 'Select Layout',

                   url: '<%= itemSelectorURL %>'

               });

                  itemSelectorDialog.open();

               });

</aui:script>