Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Fetching key,values of dropdown in sightly

khamat_bn
Level 4
Level 4

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.

khamat_bn_0-1594626232905.png

 

khamat_bn_1-1594626252409.png

So how do I get text now?

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution
vanegi
Correct answer by
Employee
Employee

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>

View solution in original post

3 Replies
vanegi
Correct answer by
Employee
Employee

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>

View solution in original post

Varun_Shakya
Community Advisor
Community Advisor

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

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