How to dynamically populate the Select options of a multifield in JS ?

[jydps87387977]

Hi,

Here is my use-case:

1. Create a Multifield with a select and the textfield. 

2. From the Multifield select(from above), the select options need to get dynamically populated. (I can not use the datasource, and only using JS script).

3. When the user clicks the 'Add field', then only the Select dropdown gets added.

Questions: How to dynamically populate the Select options from step 2 above ?

[smacdonald2008]

From your use case  - the best way would be create  code for the drop-down using granite APIs. We have a Touch UI Multifield article that shows you to code using the Grainte APIs. See the  nested-multifield.js file - it will point you in the right direction on how to code with Touch UI APIs. 

https://helpx.adobe.com/experience-manager/using/sightly_multifield.html 

In your JS file - you can code a drop-down. YOu want to use this data type: 

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/component...

[smacdonald2008]

Going back to your other question - about Touch and Classic - in this example - note that  nested-multifield.js only runs in TOuch UI - it would not run in Classic. 

[jydps87387977]

Thank you for the suggestions.

I tried installing and running the package, but while re-populating the dialog, it error out.

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

Can you please review.

[smacdonald2008]

What version of AEM are you using? 

[jydps87387977]

I am using AEM 6.1

My requirement is to have the combination of two fields, 1. The selection from 'select 2. TextField.

'select1:text1'

'select2:text2'

'select3:text3'

Can I achieve it using 'Select' outside of multifield, and introducing the 'Add' button ?

As of now, I am using the multifield, but is there any other way to achieve this functionality. 

[edubey · Accepted solution]

Take a look at http://experience-aem.blogspot.in/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html

[jydps87387977]

My requirement is to have the 'Select' + 'TextField' inside the multifield.

And the Select needs to be dynamically populated using JS.