how do we use AEM SIGHTLY to populate drop down values (values will come via js file) for "SELECT" html tag | Community
Skip to main content
N
nandhin_a
October 16, 2015
Solved

how do we use AEM SIGHTLY to populate drop down values (values will come via js file) for "SELECT" html tag

  • October 16, 2015
  • 13 replies
  • 9838 views

how do we use AEM SIGHTLY to populate drop down values (values will come via js file) for "SELECT" html tag

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 leeasling

Since a dropdown basically contains a key/value pair, i'm a big fan of utilizing 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 (therefore meaning you don't have to be bothered with modifying a JS file down the road for new options or changes), 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>

13 replies

Show previous replies
Gaurav-Behl
Gaurav-Behl
Level 10
February 7, 2019

In your code, you are trying to fetch the list from a script/page  -genericList: getList("/etc/acs-commons/lists/myfile-name.html")

I'm not sure how would that work. Either you provide a json or a list of nodes/child pages or a collection here. Check ACS link, if you plan to pick the children pages: Generic Lists

A
angelinek209805
Level 2
February 7, 2019

The ACS common list contains JSON key and value (lists of title/value pairs)

Title: List One , Value: list-one

Title: List Two , Value: list-two

Title: List Three , Value: list-three

...etc

From GenericList interface acs-aem-commons/GenericList.java at master · Adobe-Consulting-Services/acs-aem-commons · GitHub , it has method for getTitle and getValue

I am trying to print the title/value pair as <select> option

<select name="products">

  <option value="list-one">List One</option>

  <option value="list-two">List Two</option>

  <option value="list-three">List Three</option>

</select>

A
angelinek209805
Level 2
February 8, 2019

I manage to get it to work by removing the .html

genericList: getList("/etc/acs-commons/lists/myfile-name")

Terms & ConditionsAccessibility statement

Loading footer...