New Participant

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

Forum|Forum|8 years ago
August 10, 2017
13 replies
17184 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

anoopo70540109

New Participant

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.

susheelAuthor

New Participant

HI anoop,

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

anoopo70540109

New Participant

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>

L

leeasling1

New Participant

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>

susheelAuthor

New Participant

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.

L

leeasling1

New Participant

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.