Fetching key,values of dropdown in sightly

[khamat_bn]

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?

[vanegi · Accepted solution]

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]

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]

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