Coral UI multifield in AEM 6.3 + sightly + JS Use api | Community
Skip to main content
susheel
susheel
Level 5
August 10, 2017

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

  • August 10, 2017
  • 3 replies
  • 17177 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">
        <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>
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    smacdonald2008
    smacdonald2008
    Level 10
    August 10, 2017

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

    susheel
    susheelAuthor
    Level 5
    August 11, 2017

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

    L
    leeasling1
    Level 3
    August 10, 2017

    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
      susheelAuthor
      Level 5
      August 11, 2017

      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
      Level 3
      August 11, 2017

      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.

      anoopo70540109
      anoopo70540109
      Level 2
      August 14, 2017

      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
      susheelAuthor
      Level 5
      August 14, 2017

      HI anoop,

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

      anoopo70540109
      anoopo70540109
      Level 2
      August 14, 2017

      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>

      Terms & ConditionsAccessibility statement

      Loading footer...