Adobe Experience Manager Sites & More

AnkurAhlawat · 8/9/17

[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/

kautuk_sahni · 8/9/17

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

~kautuk

Kautuk Sahni

susheel · 8/9/17

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

<tabs

jcr:primaryType="nt:unstructured"

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

maximized="{Boolean}true">

<Basic

jcr:primaryType="nt:unstructured"

jcr:title="Basic"

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

margin="{Boolean}false">

<column

jcr:primaryType="nt:unstructured"

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

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

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

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

neilbertm664043 · 9/27/17

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

AnkurAhlawat · 12/19/17

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.

edubey · 12/19/17

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

niteshg35735790 · 2/1/18

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

michaelk4773008 · 12/19/17

Another easy way to create a multifield is the generic multifield by namics, see GitHub - namics/aem-generic-multifield: Generic Mulifield for AEM.

AnkurAhlawat · 12/19/17

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

edubey · 12/19/17

the one create by michaelk47730080 is a Touch UI

and reason you are seeing jsp is because instead of a component, he has created it more of granite component which can be leverage by developer to build actual component for sites. You can relate it to the one which comes with product at /libs/granite/ui/components/coral/foundation

prestonModOp · 3/2/18

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.

Peter_Puzanovs · 3/7/18

+100 likes to susheel reply.

Report · 7/29/18

Multifield and Dialog data in Jquery | AEM 6.3 + – AEM Queries & Solutions

To fetch the Dialog data in AEM 6.3+.

Report · 7/29/18

Following is the link to create a simple multifield dialog in AEM 6.3 and above and values are also retained:https://aemsimplifiedbynikhil.wordpress.com/2018/07/30/create-touchui-multifield-component-in-aem-6-...

Create TouchUI Multifield Component in AEM 6.3+ – AEM Queries & Solutions

SijithLegAid · 6/21/23

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

Adobe Experience Manager Sites & More

Create Multi Field Component in AEM 6.3

Kautuk Sahni

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe