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

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

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}

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

yes

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.

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.

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.

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.

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.