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

[nandhin_a]

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

[kautuk_sahni]

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

[leeasling · Accepted solution]

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>

[nandhin_a]

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}

[darren_hoffman]

Is the Generic Lists tool the best way to manage a large list of options, such as 230 countries listed in 6 different languages?

[smacdonald2008]

yes

[darren_hoffman]

Thank you for your quick reply. Could you please describe the reasoning behind your opinion?

I think it will be time consuming to create 6 * 230 = 1380 entries in Generic Lists, and the benefit of Author modifications seem irrelevant when these will change very infrequently.

When I compare the Generic Lists option with the option to store a JSON object in a Component Property and then parse it via Sightly, my estimate is that time is better spent coding rather than managing 1000+ options via a GUI.

[leeasling]

darren.hoffman wrote...

Thank you for your quick reply. Could you please describe the reasoning behind your opinion?

I think it will be time consuming to create 6 * 230 = 1380 entries in Generic Lists, and the benefit of Author modifications seem irrelevant when these will change very infrequently.

When I compare the Generic Lists option with the option to store a JSON object in a Component Property and then parse it via Sightly, my estimate is that time is better spent coding rather than managing 1000+ options via a GUI.

Can you explain how you'd implement your component, with internationalization, without entering the same 1380 items and not write more code and spend more time entering the content?  I see a serious flaw in your logic.

The generic list is already setup to handle multiple languages and doesn't require custom code to store a JSON blob and parse it out (which is a pretty bad approach anyway), you can simply interact with the already put together API to get what you need.  Don't reinvent the wheel if you don't need to.

[darren_hoffman]

The code solution is to merge the translated lists with the base mapping list using a simple text manipulation command, such as sed. This can be easily be done six times by hand or in a short loop. The resultant JSON can be attached to a Component instance via a Property then parsed via Sightly.

[leeasling]

So you're talking about doing it outside of AEM, and then manually adding the property to a component instance?  If that's the approach that's best for you and your business requirements, good luck to you, hopefully you don't take a vacation and someone needs these updated.

[angelinek209805]

I am also having similar issue trying to return the ACS common list in the page with HTL.

In my JS USE API following the example code at Use js to read the generic list – All about AEM..

use(function() {

"use strict";

  var resolver = request.getResourceResolver();

  var pageManager = resolver.adaptTo(Packages.com.day.cq.wcm.api.PageManager);

  return {

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

  };

  function getList(url) {

   var listPage = pageManager.getPage(url);

   if (listPage == null) {

   return;

  }

   var list = listPage.adaptTo(Packages.com.adobe.acs.commons.genericlists.GenericList);

   var genericList = list.getItems();

   return genericList;

  }

});

In the HTL, I tried the following for example but it doesn’t return any list.

<select data-sly-use.productOptions="acscommons-products.js">

  <option data-sly-repeat="${productOptions.genericList}" value="${productOptions.value}">${productOptions.title}</option>

</select>

Am I missing something? Thanks in advance. Much appreciated.

[Gaurav-Behl]

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

[angelinek209805]

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>

[angelinek209805]

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

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