Level 6

Create Multi Field Component in AEM 6.3

Forum|Forum|8 years ago
August 9, 2017
6 replies
32723 views

[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

Community Manager

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

~kautuk

Kautuk Sahni

susheel

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

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

N

neilbertm664043

Level 3

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

M

michaelk4773008

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

AnkurAhlawat-1Author

Level 6

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

Level 10

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