Expand my Community achievements bar.

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

Avatar

Level 5

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>

13 Replies

Avatar

Level 5

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

Avatar

Level 3

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>

Avatar

Level 5

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.

Avatar

Level 3

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.

Avatar

Level 5

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'}"/>

Avatar

Level 2

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.

Avatar

Level 5

HI anoop,

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

Avatar

Level 2

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>

Avatar

Level 5

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.

Avatar

Level 10

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?