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
New Participant
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
  • 9837 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
kautuk_sahni
kautuk_sahni
Employee
October 16, 2015

Hi nandhin

 

Option 1

 

Please refer to the link mentioned below. In this article we have a component, where there is a dropdown “Cool Weapon”. This Drop down is getting populated as mentioned in Java Script.

Here we are creating custom component that is defined by Custom xtype by JavaScript.

//Code Reference

this.devWeapon = new CQ.Ext.form.ComboBox({

                triggerAction : 'all',

                lazyRender : true,

                mode : 'local',

                width : 225,

                fieldLabel : 'Cool Weapon',

                fieldDescription : 'Select the weapon in which you can beat the best',

                editable : false,

                store : new CQ.Ext.data.ArrayStore({

                    id : 0,

                    fields : [ 'myId', 'displayText' ],

                    data : [ [ 'Java', 'Java' ],

                            [ 'C++', 'C++' ],[ 'PHP', 'PHP' ],[ 'JS', 'JS' ],[ 'Python', 'Python' ],[ 'C#', 'C#' ]]

                }),

                valueField : 'myId',

                displayField : 'displayText',

                value : 'Java'

            });

            this.add(this.devWeapon);

 

Reference Link: - https://helpx.adobe.com/experience-manager/using/jstl.html

 

You need to modify this according to your need.

 

 

Option 2

Dynamically populating drop-down lists using Sling Servlets

Link: - https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html

 

 

I hope this will also solve your problem.

 

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
L
leeaslingAccepted solution
New Participant
October 16, 2015

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>
N
nandhin_aAuthor
New Participant
October 16, 2015

Thanks for your reply. I too have used ACS commons generic list. consider my js would return itemList (for ex: var itemList = list.getItems();).    
   
         how can I get the locale based title (i.e calling getTitle(locale)) available in generic list, in place of ${list.title} mentioned in the below HTML code:
          
         <select data-sly-use.frm="sample_form.js"   data-sly-list.list="${frm}">
                                <option value="${list.value}">${list.title}

Terms & ConditionsAccessibility statement

Loading footer...