Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Create Multi Field Component in AEM 6.3

Avatar

Level 7

[Thread Edited By Adobe]

/*Don’t forget to meet and greet your fellow peers virtually by telling them about yourself here

Go ahead and to it now: https://adobe.ly/3eDnB4v */

 

Actual Post:

The aim of this tutorial is to learn how to create Touch UI Multifield component using HTL formerly known as sightly. As out of the box multifield component has many limitations thanks to ACS common (Adobe consulting services) an open source community for enhancing the existing granite multifield component (granite/ui/components/foundation/form/multifield) that allows developers to create a multifield of a fieldset (group of different fields) .

That’s why we are going to use a ACS common multifield component in this tutorial and show you how to read JSON value saved to the JCR . After completing this tutorial, you will have a clear understanding about:-

  • How to Create Multi Field TouchUI Component in AEM 6.3.
  • How to retrieve values from Multi field dialog.
  • How to retrieve checkbox values from Multi field dialog.
  • Trouble Shooting Multi Field Component in AEM 6.3.

 

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

desktop_exl_promo_600x100_weempoweryou.png

14 Replies

Avatar

Administrator

One more community use-case got covered by this. Really Nice!!

~kautuk



Kautuk Sahni

Avatar

Level 5

I think it would be easier to do with JS api in few lines of code.

Coral UI multifield dialog

<?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="List Collection"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/container">

        <items jcr:primaryType="nt:unstructured">

            <tabs

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/coral/foundation/tabs"

                maximized="{Boolean}true">

                <items jcr:primaryType="nt:unstructured">

                    <Basic

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Basic"

                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

                        margin="{Boolean}false">

                        <items jcr:primaryType="nt:unstructured">

                            <column

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/container">

                                <items jcr:primaryType="nt:unstructured">

                                    <multifieldcollection

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

                                        composite="{Boolean}true"

                                        fieldDescription="Click + to add a new page"

                                        fieldLabel="Multifield collection"

                                        name="./multiCol">

                                        <field

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/container"

                                            name="./items1">

                                            <items jcr:primaryType="nt:unstructured">

                                                <linkurl

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

                                                    fieldDescription="Select Link Path"

                                                    fieldLabel="Link Url"

                                                    name="./linkUrl"/>

                                                <enterlinktext

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                    fieldDescription="Enter Link Text"

                                                    fieldLabel="Enter link text"

                                                    name="./linkText"/>

                                            </items>

                                        </field>

                                    </multifieldcollection>

                                    <multifieldcollection1

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

                                        composite="{Boolean}true"

                                        fieldDescription="Click + to add a new page"

                                        fieldLabel="Multifield collection"

                                        name="./multiCol1">

                                        <field

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/container"

                                            name="./items2">

                                            <items jcr:primaryType="nt:unstructured">

                                                <linkurl

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

                                                    fieldDescription="Select Link Path"

                                                    fieldLabel="Link Url"

                                                    name="./linkUrl"/>

                                                <enterlinktext

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                    fieldDescription="Enter Link Text"

                                                    fieldLabel="Enter link text"

                                                    name="./linkText"/>

                                            </items>

                                        </field>

                                    </multifieldcollection1>

                                </items>

                            </column>

                        </items>

                    </Basic>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

JS Api : listcollection.js

"use strict";

use(["/libs/sightly/js/3rd-party/q.js"], function (Q) {

    var childProperties = Q.defer();

    granite.resource.resolve(granite.resource.path + "/" + this.multifieldName).then(function (currentResource) {

        currentResource.getChildren().then(function(child) {

        childProperties.resolve(child);

    });

});

    return childProperties.promise;

});

Sightly: listcollection.html

<sly data-sly-use.listUse="${'listcollection.js' @ multifieldName='items1'}">

  <ul data-sly-list="${listUse}">

    <li><a href="${item.properties.linkUrl}">${item.properties.linkText}</a></li>

  </ul>

</sly>

<sly data-sly-use.listUse="${'listcollection.js' @ multifieldName='items2'}">

  <ul data-sly-list="${listUse}">

    <li><a href="${item.properties.linkUrl}">${item.properties.linkText}</a></li>

  </ul>

</sly>

Avatar

Level 4

Hi thank you for this, im actually using this right now

Can i ask where does it store its values when you used that on your template?

I created my template at /conf/wknd/settings/wcm/templates/wknd/structure/jcr:content/root/header

Avatar

Level 7

Yes it looks more simpler, but only thing that i am afraid of is that i can't debug js api (use scripts) and end up waisting lot of time. If you are sound with use scripts then yes definitely it reduce lot of efforts. But as a tradition java developer i feel myself more comfortable with java . What more we can do in my example i can use Use class instead of pojo. That will serve the same purpose as use scripts.

Avatar

Level 10

In a way JS api is good, kinda similar to javascript but it takes more time for execution as compared to sling model as this JS gets converted to java then complied...

IMO, As long you are using something only in author, should be fine but for anything which renders on publish also, I would prefer to avoid using it for performance reason.
Sling model is the way to go from here...

Avatar

Level 2

Hi Susheel,

When I am trying to create similar kind of Multi Field using Coral UI 3 in AEM 6.2 , it is not populating the values in multifield and it is storing the values in String Array.

Do we have a solution to create Multi Field using Coral UI 3 in AEM 6.2 by which we can store the values in Node Store or JSON store form.

Thanks

Nitesh Gupta

Avatar

Level 7

From AEM 6.2 classic ui is deprecated and we don't encourage using jsp and scriplets. Try to update your code using HTL.

Avatar

Level 10

the one create by

Avatar

Level 3

We have a number of custom multifield components all written for AEM 6.1 and using JSP. Is there any reason those need to be converted to HTL? They're not working currently under AEM 6.3.               

Avatar

Level 1

Can we add a custom component as an item in multifield such that when we click on add button, the component gets added?