Form Navigator and Image as Layout Metadata using Image Selector

Form Navigator helps you to add new sections and section categories to existing form navigation. Form Navigators can be used in two ways: customizing a Form Navigator that already exists in the portal, and creating your own Form Navigator for your application. It will helps us to add a new section in Layout configuration.

The requirement is to show image metadata in Layout configuration using image selector button which will add the image url as Layout Metadata. The image url will be saved in Layout typesetting. This image metadata can be used a page metadata.

To achieve above requirement, you can add a Layout form Navigator which will add a new section in Layout configuration and here you can show the Field and image selector button.

Create Layout form Navigator using below URL.

https://help.liferay.com/hc/en-us/articles/360017882932-Form-Navigator-Extensions-

You can specify the JSP path where you can add the Metadata field and image selector button in Form Navigator Component class.

@Override

            protected String getJspPath() {

                        return "/layout/layout_meta_data.jsp";

           }

Now add field and image selector button in layout_meta_data.jsp.

<aui:input label="OG Image"  class="field form-control lfr-input-text"

      name="TypeSettingsProperties--og-image--"

      id="TypeSettingsProperties--og-image--"

      type="text" value="<%=ogImage %>" />

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

Add below code and JavaScript in layout_meta_data.jsp to open a popup for selecting an image.

<%

String smallImageSelectedItemEventName = liferayPortletResponse.getNamespace() + "smallImageSelectedItemForSocialSharing";

    RequestBackedPortletURLFactory requestBackedPortletURLFactory = RequestBackedPortletURLFactoryUtil

            .create(request);

    DLItemSelectorHelper helper = (DLItemSelectorHelper) ServiceLocator.getInstance()

            .findService("com.accenture.og.formlayout.DLItemSelectorHelper");

    String absoluteUrl = PortalUtil.getPortalURL(request);

%>

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

      $('#<portlet:namespace />chooseImage') .on( 'click',function(event) {

      var itemSelectorDialog = new A.LiferayItemSelectorDialog( {

      eventName : '_com_liferay_layout_admin_web_portlet_GroupPagesPortlet_smallImageSelectedItemForSocialSharing', on : {

selectedItemChange : function(event) {

selectedItem = event.newVal;

if (selectedItem) {

var itemValue = JSON.parse(selectedItem.value);

document.getElementById("_com_liferay_layout_admin_web_portlet_GroupPagesPortlet_TypeSettingsProperties--og-image--").value = '<%=absoluteUrl%>'+ itemValue.url;

    } } },

title : '<liferay-ui:message key="select-image" />',

url : '<%= helper.getItemSelectorURL(requestBackedPortletURLFactory, themeDisplay, smallImageSelectedItemEventName) %>'

});

itemSelectorDialog.open();

});

</aui:script>

Are we done with coding part? No. We have to create DLItemSelectorHelper component class which will help to create image selector URL. Using this URL, we can add an image path to text field from document and media. This data will be saved in Layout typesetting. DLItemSelectorHelper  class uses Liferay default items selector classes.

    public String getItemSelectorURL(RequestBackedPortletURLFactory requestBackedPortletURLFactory,

            ThemeDisplay themeDisplay, String itemSelectedEventName) {

        if (itemSelector == null) {

            return null;

 }

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

        desiredItemSelectorReturnTypes.add(new FileEntryItemSelectorReturnType());

        ImageItemSelectorCriterion imageItemSelectorCriterion = new ImageItemSelectorCriterion();

imageItemSelectorCriterion.setDesiredItemSelectorReturnTypes(desiredItemSelectorReturnTypes);

        PortletURL itemSelectorURL = itemSelector.getItemSelectorURL(requestBackedPortletURLFactory,

                itemSelectedEventName, imageItemSelectorCriterion);

        return itemSelectorURL.toString();

    }

That's all for adding a image selector using Form Navigator in Layout Configuration.

1