I think it would be easier to read multi field values using 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 : somecomponent.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: somecomponent.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>
You can use Java and WCMUseAPI. See this article -- Creating an AEM HTML Template Language 6.3 component that uses a Multifield
Views
Replies
Total Likes
smacdonald2008 I know we can write it in Java. I just wanted to share something using JS Use Api.
Views
Replies
Total Likes
You don't need to do anything as complicated as that. Something as simple as this works.
<div data-sly-list.children="${resource.listChildren}">
<ul data-sly-list.child="${children.listChildren}">
<li>${child.valueMap['linkText']}</li>
</ul>
</div>
lasling Good one but what If i need specific multifield at different places in the html. This will get me all multfields at one place.
Again writing conditions will create same complexity.
Views
Replies
Total Likes
As much as I think having this logic in the view is a bad idea, the only way would be to test for the name of the node on the <li> element in the code I posted.
Best thing to do in my opinion would be to add code to your OSGI bundle to handle this, since it'll be re-usable across multiple components I assume.
Views
Replies
Total Likes
Even JS Api could be placed in a utils folder or something and can be reused in any component any project. We already have examples using OSGI. I was just trying to show it using JS Api. Thats the only goal of this discussion.
We can place reusable Js Use api code in some utils folder and reuse wherever we need as below:
<sly data-sly-use.list="${'/apps/someproject/utils/listcollection.js' @ multifieldName='items1'}"/>
Thanks for sharing!
Hi Susheel,
Using this example i was trying to create nested multifield(multifield within a multifield) in AEM 6.3 Touch UI, but when i am trying to save the value using dialog its showing error.(Uncaught TypeError: fieldAPI.getName is not a function). if you have a Demo for nested multifield please share with me.
Views
Replies
Total Likes
HI anoop,
Are you using coral ui or granite UI component ? This is specific to coral UI 3.
Views
Replies
Total Likes
Hi Susheel,
Yes I am using coral UI and trying to create nested multifield, I tried with ACS common package also but no luck. here i am sharing small part of the dialog which i have modified for overview.
<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"/>
<multifieldcollection1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
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="./linkUrl1"/>
<enterlinktext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Enter Link Text"
fieldLabel="Enter link text"
name="./linkText1"/>
</items>
</field>
</multifieldcollection1>
</items>
</field>
</multifieldcollection>
Views
Replies
Total Likes
The above code is not for nested node structure its for single separate multifield. It can be updated based on node structure which is generated.
Views
Replies
Total Likes
We do not have have a Touch UI for Nested Muiltifields, I know that I have seen it for Classic UI, not for Touch UI.
We have some community members working on Nested Multifields for Touch UI.
Ratna Kumar - any progress on Nested MF in Touch UI?
See this - it uses a Granite/Coral Multifield and shows use of Sling Models (and WCMUsePojo) -- Creating a Granite 6.3 Multifield HTL component for Adobe Experience Manager
Views
Replies
Total Likes
Views
Likes
Replies