Composite Collapsible Multifield in AEM 6.3 Touch UI

This post discusses how to create a composite collapsible multifield touch ui dialog which uses Granite UI Coral3 multifield in AEM 6.3 .

We'll be using OOTB coral multifield provided by AEM 6.3 for storing multifield values as child nodes (NODE STORE): granite/ui/components/coral/foundation/form/multifield, and we'll retrieve the authored multifield values in our sightly code by using JS Use-API (To retrieve values via WCMUsePojo API, refer this post here).

The advantage of using JS Use-API here is you can get the node of multifield values stored in pages and pass it to the sightly code in few lines of code as compared to more lines of code when using JAVA for this.

Also you won't need to use acs-commons package or any other custom multifield here for storing composite multifield values.

To make the multi-fields collapsible we'll be using the foundation layout type inside container as: granite/ui/components/foundation/layouts/collapsible, thus we would not need to write customization code in clientlibs for this.

The touch ui dialog structure is shown below:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Blog Component"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem6_3_docs_component_en#Image - HTL">
    <content
      jcr:primaryType="nt:unstructured"        
      sling:resourceType="granite/ui/components/foundation/container">
      <layout
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/foundation/layouts/tabs"
         type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <multi
                jcr:primaryType="nt:unstructured"
                jcr:title="Multi"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                    margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"                       
       sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <fieldenter
                                jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                composite="{Boolean}true"
                                fieldLabel="Composite Multifield">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    jcr:title="Click to Expand"                              
       sling:resourceType="granite/ui/components/foundation/container"
                                    fieldLabel="Products Container"
                                    name="./products">
                                    <layout
                                     jcr:primaryType="nt:unstructured"                                 
       sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                    <items 
                                     jcr:primaryType="nt:unstructured">
                                        <multitext
                                            jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldLabel="Multi Text"
                                            name="multitext"/>
                                        <multinum
                                            jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/foundation/form/numberfield"
                                            fieldLabel="Multi Num"
                                            name="multinum"/>
                                        <multicheck
                                            jcr:primaryType="nt:unstructured"               
       sling:resourceType="granite/ui/components/foundation/form/checkbox"
                                            name="multicheck"
                                            text="Multi Check"
                                            value="{Boolean}true"/>
                                    </items>
                                </field>
                            </fieldenter>
                        </items>
                    </column>
                </items>
            </multi>
        </items>
    </content>
</jcr:root>

Touch UI Dialog authoring interface is as shown below:

The multifield values stored in the page is stored as child nodes as shown below:

You can use below JS Use code (blog.js) to fetch the node and pass to sightly:

"use strict";
use(function() {
    var resourceResolver = resource.getResourceResolver();
    return {
      node : resourceResolver.getResource(currentNode.getPath() + "/products"),
    };
});

And use below sightly code (blog.html) to render values in the html:

<div data-sly-use.blog="blog.js">
    <h4>Composite Multifield Values: </h4>
    <ol data-sly-list.product="${blog.node.listChildren}">
      <li>
          ${product.multitext} has ${product.multinum} with boolean 
          ${product.multicheck}
      </li>
    </ol>
</div>