Adobe Experience Manager Sites & More

susheel · 8/10/17

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

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

smacdonald2008 · 8/10/17

You can use Java and WCMUseAPI. See this article -- Creating an AEM HTML Template Language 6.3 component that uses a Multifield

susheel · 8/10/17

smacdonald2008 I know we can write it in Java. I just wanted to share something using JS Use Api.

lasling · 8/10/17

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>

susheel · 8/10/17

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.

lasling · 8/11/17

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.

susheel · 8/11/17

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:

Feike_Visser1 · 8/11/17

Thanks for sharing!

anoopo70540109 · 8/14/17

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.

susheel · 8/14/17

HI anoop,

Are you using coral ui or granite UI component ? This is specific to coral UI 3.

anoopo70540109 · 8/14/17

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

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

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

susheel · 8/14/17

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.

smacdonald2008 · 8/14/17

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?

smacdonald2008 · 12/5/17

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

Adobe Experience Manager Sites & More

Coral UI multifield in AEM 6.3 + sightly + JS Use api

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe