Touch UI - Dynamically generate dropdown list based on multifield values

sivaprasadreddy 03-08-2018

Hello All,

We've a requirement where we need to develop cookies component and list of options should be provided and one of the options should be selected by default. We are planning to design component as below. So please advise if this is possible in Touch UI or not or another other better solution for this.

1. Create a multifield ( with Title & Description) and dropdown to with dynamically data(Title of each item added in multifield to be populated in dropdown).

But to populate the dorpdown data dynamically, the data should be stored somewhere. So is there a way we can write listener in touch UI dialog and gets the dropdown data populated automatically every time author changes/add multifiled values?

Please provide your values inputs on this.

Thanks in Advance

Siva

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar
MVP
03-08-2018

Hi,

You don't need to do this with datasource.

you can add javascript listener on add tab titles and update dropdown options and on load you can populate dropdown list.

Below is example on click event but you can do similar for tab title on change event Tryit Editor v3.5

Thanks

Arun

Answers (4)

Answers (4)

sivaprasadreddy 03-08-2018

Thanks Scott and Ratna Kumar for your prompt response.

I've understood the part of populating data dynamically using datasource and able to do it.

But the problem is multifiled data will be stored in repository only we submit the dialog.

Below is the sample dialog which I'm trying.
Whenever author add/delete/update fields in the multifiled, the same should be updated in below dropdown field and populated. Example, Option1, Option2 are added in the multifiled and same should be populated in the dropdown. So I'm trying to figureout if there is a way to write events/listeners whenever multifiled is update and populate the same in dropdown, but couldn't find.

1541465_pastedImage_2.png

Please let me know if it works or if you have any other better options.

Regards

Siva

Ratna_Kumar
MVP
03-08-2018

Hi Siva,

Yes, Scott is right. You can populate select field using this resourceType granite/ui/components/coral/foundation/form/select field with a DataSource Object.

Please see this HELPX article: Adobe Experience Manager Help | Using an WCMUsePojo class to populate an Experience Manager Touch UI...

This is the good way to show the dropdown values in Touch UI.

Thanks,

Ratna Kumar.

smacdonald2008 03-08-2018

You can populate a granite/ui/components/coral/foundation/form/select field with a DataSouce object. To make it dynamic - you can bind it to a WCMUsePojo class that can read the JCR where the data is stored and populate the DataSouce used to populate the select field. This is the best way to dynamically populate a select field.