Article summary

Summary

Discusses how to use script to set the maximum number of multifield items an AEM author can set in a Touch UI component dialog. 

Thank you to community member Techaspect Solutions Pvt Ltd for submitting code used in this article. 

A special thank you to Ratna Kumar Kotla, a top AEM community member, for testing this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.3

Note:

You can download an AEM package that contains the code used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to write a HTL component that makes use of a Multifield. This community code is for teaching purposes only and not meant to go into production as is.

You can view the sample community application by using the following URL: http://localhost:4502/editor.html/content/mfHTL63/en.html (assuming you deploy on author).

Download

Note:

To ensure that the Multifield works in the component dialog, also install the ACS-Commons for AEM 6.3 located here: https://adobe-consulting-services.github.io/acs-aem-commons/.

Install the AEM Package

Before following along with this article, install this AEM package that contains a Touch UI dialog that contains a multifield. For information about this package, see Creating an AEM HTML Template Language 6.3 component that uses a Multifield

Note:

To use acs commons multifield, it is mandatory to add acs-commons-nested=”” property to a fieldset within a multifield node like at myUserSubmenu node in our example.

The value acs-commons-nested=”JSON_STORE” means we want to store multifiled data as JSON Array. To store multi filed data as seperate child node use acs-commons-nested=”NODE_STORE”.

Read more at AEMCQ5Tutorials: Create TouchUI Multifield Component using HTL http://www.aemcq5tutorials.com/tutorials/touchui-multifield-component-using-htl/

Introduction

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Language (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.

Dialog2
A HTL Component Dialog that uses a Multi-field

In the previous illustration, notice that the Page Name and Path controls are used within a multifield control. When an author clicks the Add Field button, a new area that contains a Page Name, Path and Flag control appears. This lets an author dynamically enter as many values as required into the dialog.

Sometimes you may have a requirement to set a limit of the number of multifield items that an author can set. When the author attempts to go over the limit, a message appears, as shown in this illustration. 

mflimit
A message informs AEM authors there is a limit to the number of multifields

Create a Clientlibs folder

Create a Clientlibs folder whose purpose is to contain script that limits the number of multifields. Create a Clientlibs folder located at the following JCR location: 

/apps/mfHTL63/components

Add these two properties to this node:

  • dependencies (String[]) - cq.jquery
  • categories (String[]) - cq.authoring.dialog

Add the following JQuery script to this ClientLibs node. This script is responsible for reading a property named maxlinksallowed (added later in this article) from the mulitfield node and enforcning a limit of multifield items. 

$(document).on("dialog-ready", function () {
$(".js-coral-Multifield-add").click(function() {
    var field = $(this).parent();
    var size = field.attr("data-maxlinksallowed");
    if (size) {
        var ui = $(window).adaptTo("foundation-ui");
        var totalLinkCount = $(this).prev('ol').children('li').length;
        if (totalLinkCount >= size) {
            ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");
            return false;
        }
    }
});
});

To create a ClientLibs folder, perform these steps: 


1.  Right-click /apps/mfHTL63/components then select New, Node.

2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.

3. Right click on Clientlibs and select Properties. Add the two properties specified in this section. 

4. Add the file named script.js. Add the script shown in this section to this file. 

5. Add a TXT file to the clientlibs folder named js.txt. The content of the js.txt file is script.js.

Add a property to the multifield node

Add a property named maxlinksallowed to the multifield node located at this JCR location: 

/apps/mfHTL63/components/content/touchmulti/cq:dialog/content/items/india/items/column/items/fieldset/items/column/items/pages

The data type of this property is a String and the value represents the number of multifield items that are allowed. Set this value to 3. 

maxallowed
Add a new property to the multifield node

Include the ClientLibs in the HTML file

The last step is to include this line of code into the touchmulti.html file. 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='cq.authoring.dialog'}" data-sly-unwrap/>

TR

This HTML file is located at /apps/mfHTL63/components/content/touchmulti/touchmulti.html. Ensure this code resembles the following code.  

Click here to configure Multi Field User Menu
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='cq.authoring.dialog'}" data-sly-unwrap/>
<div data-sly-use.multiItems="com.aem.community.mf.core.TouchMultiComponent">
<div data-sly-list.head="${multiItems.multiFieldItems}">
<p><b>Page Name1:</b> ${head.title}</p>
<p><b>Page Path:</b> ${head.link}</p>
<p><b>Flag:</b> ${head.flag}</p>
</div>
</div>

View the output of the HTL component

To access the component, enter the following URL:

http://localhost:4502/editor.html/content/wsHTL63/en.html

By default, the component with the multifield is located near the bottom of the page. Click on the component and you will see the dialog with the Multifield. You are not able to add more than the value of the maxlinksallowed property. 

dialog3
Values entered into a Multifield control

When you click the checkmark icon in the dialog, you will see the values in the web page. Also, the Multifield values are stored in the JCR, as a JSON data structure located here. 

/content/mfHTL63/en/jcr:content/par/touchmulti

JCRNodes
The location in the JCR where Multifield values are stored

Note:

If you do not see a message when you attempt to add more multifield values then are allowed, clear your browser cache. 

Minimum value

You can also set a minimum multifield items by creating a property named minlinksallowed. Use the following code in the ClientLibs folder. 

(function (document, $, ns) {
     "use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
     e.stopPropagation();
     e.preventDefault();
    var $form = $(this).closest("form.foundation-form"), title = $form.find("[name='./jcr:title']").val(), message, clazz = "coral-Button ";
    var fieldd = $(".coral-Multifield");
    var sizee = fieldd.attr("data-minlinksallowed");
    if(($(this).prev('ol').children('li').length) < sizee){
              message = "Minimum" + sizee + " links are required. Are you sure to submit?";
              clazz = clazz + "coral-Button--warning";
    }
    ns.ui.helpers.prompt({
             title: Granite.I18n.get("Confirm"),
             message: message,
             actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                },{
                    id: "SUBMIT",
                    text: "SUBMIT",
                    className: clazz
                }
            ],
             callback: function (actionId) {
                if (actionId === "SUBMIT") {
                    $form.submit();
                }
            }
        });
    });
})(document, Granite.$, Granite.author);

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy