Fetching key,values of dropdown in sightly | Community
Skip to main content
khamat_bn
khamat_bn
Level 4
July 13, 2020
Solved

Fetching key,values of dropdown in sightly

  • July 13, 2020
  • 3 replies
  • 3419 views

Hi Guys,

 

I have a static dropdown where I am fetching dropdown values in sightly. But I want to show text and values both.

I am getting values in sightly like ${properties.promoMechanics}

Below are my dropdown properties.

 

So how do I get text now?

 

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

Since a dropdown basically contains a key/value pair, you can utilize the ACS Commons Generic Lists (http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html).  This provides an easy interface for authors/admins to edit the text/values in the dropdown on the fly, while also providing a JSON feed that works directly with the widgets supplied in AEM.

So for example, you can do

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Widget" fieldLabel="Target" name="./target" options="/etc/acs-commons/lists/age-ranges/_jcr_content.list.json" type="select" xtype="selection"/>

Or if you're really set on using Sightly, you can utilize the API to return getItems() and then use something like the following:

<select data-sly-use.options="options.js"> <option data-sly-repeat="${options.items}" value="${options.value}">${options.text}</option> </select>

3 replies

vanegi
Adobe Employee
vanegiAdobe EmployeeAccepted solution
Adobe Employee
July 13, 2020

Since a dropdown basically contains a key/value pair, you can utilize the ACS Commons Generic Lists (http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html).  This provides an easy interface for authors/admins to edit the text/values in the dropdown on the fly, while also providing a JSON feed that works directly with the widgets supplied in AEM.

So for example, you can do

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Widget" fieldLabel="Target" name="./target" options="/etc/acs-commons/lists/age-ranges/_jcr_content.list.json" type="select" xtype="selection"/>

Or if you're really set on using Sightly, you can utilize the API to return getItems() and then use something like the following:

<select data-sly-use.options="options.js"> <option data-sly-repeat="${options.items}" value="${options.value}">${options.text}</option> </select>
    Varun_Shakya
    Community Advisor
    Varun_ShakyaCommunity Advisor
    Community Advisor
    July 13, 2020

    you can use resource.getValueMap() which will give you the properties of resource in key pair form. Once you get those details return them in sling model.

      Nupur_Jain
      Adobe Employee
      Nupur_JainAdobe Employee
      Adobe Employee
      July 14, 2020

      Hi @khamat_bn 

       

      Looks like the list is part of dialog which you also want to access in component HTL/Sightly. You will have to write backend code to get the resource of the path of the list first either in sling model or wcm use POJO. Since the path where the lists exists would be in /apps, you will have to use some service user to get resource resolver first and then get resource for the parent of the list like:

       

      Resource promoListResource = resourceResolver.getResource("/apps/my-project/components/content/my-component/cq:dialog/content/items/tabs/items/fields/items/tab/items/promolist/items");

       

      You should then return this resource in getter method of your sling model.

       

      In Sightly, once you get this resource, you can iterate over items of the list and match the value and get the required text like:

       

      <sly data-sly-list="${mymodel.promoListResource.listChildren}"> <div data-sly-test="${item.value == properties.promoMechanics}"> This is text : ${item.text} </div> </sly>

       

      Hope it helps!

      Thanks!

      Nupur

        Terms & ConditionsAccessibility statement

        Loading footer...