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
nandhin_a
New Participant
Oct 16, 2015 2:28 AM UTC
Solved

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

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.
leeaslingAccepted solution
Level 8
Oct 16, 2015 2:28 AM UTC

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>
View reply

13 replies

Show previous replies
kautuk_sahni
kautuk_sahni
Employee
Oct 16, 2015 2:28 AM UTC

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

Translate
Kautuk Sahni
leeaslingAccepted solution
Level 8
Oct 16, 2015 2:28 AM UTC

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>
Translate
nandhin_aAuthor
New Participant
Oct 16, 2015 2:28 AM UTC

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}

Translate
Terms & ConditionsAccessibility statement

Loading footer...