Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 4

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 ?

1 Accepted Solution

Avatar

Correct answer by
Level 10
7 Replies

Avatar

Level 10

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...

Avatar

Level 10

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. 

Avatar

Level 4

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.

Avatar

Level 10

What version of AEM are you using? 

Avatar

Level 4

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. 

Avatar

Correct answer by
Level 10

Avatar

Level 4

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

And the Select needs to be dynamically populated using JS.