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 the 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>