[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:-
Read more at AEMCQ5Tutorials: Create TouchUI Multifield Component using HTL http://www.aemcq5tutorials.com/tutorials/touchui-multifield-component-using-htl/
One more community use-case got covered by this. Really Nice!!
~kautuk
Views
Replies
Total Likes
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>
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
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.
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...
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
Another easy way to create a multifield is the generic multifield by namics, see GitHub - namics/aem-generic-multifield: Generic Mulifield for AEM.
From AEM 6.2 classic ui is deprecated and we don't encourage using jsp and scriplets. Try to update your code using HTL.
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
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.
Multifield and Dialog data in Jquery | AEM 6.3 + – AEM Queries & Solutions
To fetch the Dialog data in AEM 6.3+.
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
Can we add a custom component as an item in multifield such that when we click on add button, the component gets added?