How to dynamically populate different fields on a dialog

Avatar

Avatar
Validate 10
Level 2
anelem1760873
Level 2

Likes

9 likes

Total Posts

59 posts

Correct reply

3 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 10
Level 2
anelem1760873
Level 2

Likes

9 likes

Total Posts

59 posts

Correct reply

3 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
anelem1760873
Level 2

09-12-2020

Hi there,

 

Am trying to show different form fields on a dialog, based on an event.

 

Would appreciate any help.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

09-12-2020

For dynamically populating form fields in a dialog box, please check below eg: 

If you want to define a select box by configuring a Select component in dialog.any as follows:

...
/Type "AtomLine"
            /Sub
              {
              /mySelectAtom
                {
                /Type "Select"
                /Option
                  {
                  /option0
                    {
                    /value "red"
                    /text "Scarlet"
                    }
                  /option1
                    {
                    /value "green"
                    /text "Lime"
                    }
                  /option2
                    {
                    /value "blue"
                    /text "Azure"
                    }
                  }
                }
              }
... 

 

 

For this, you can hard code all for the select options in dialog.any. However, you can define and manage these options as an external resource and to populate the dialog dynamically.

Use an OwnerDraw type in dialog.any instead of Select to specify a script that draws a CFC component programmatically. In the script, you can retrieve the values from an external resource and populate the dialog. So, to change the Select example to use an OwnerDraw do the following.

  1. Change dialog.any to call a custom script to draw the form field via OwnerDraw type ... /Type "AtomLine" /Sub { /mySelectAtom { /Type "OwnerDraw" /file "/apps/[yourApp]/components/dynamicDialogComponent/dynamicSelect.esp" } } ... 
  2. Define a Java class to access an external resource and return java.util.Map with all the options. public class DialogValues { public static Map getSelectOptions(String atomName) { Map optionsMap = new LinkedHashMap(); // get select options and put them in a map // ... return optionsMap; } }
  3. Define /apps/[yourApp]/components/dynamicDialogComponent/dynamicSelect.esp that calls the Java class and renders the CFC select object with options returned in java.util.Map. Place the code bellow in dynamicSelect.esp.

The example uses CFC.Controls.Select. But you can use the same OwnerDraw approach with other CFC objects. In fact, you can use the OwnerDraw to draw any section of the dialog which cannot be defined using .any notation.

 

References:

https://helpx.adobe.com/experience-manager/using/creating-touchui-dynamic.html

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

 

 

Answers (2)

Answers (2)

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

09-12-2020

@anelem1760873 Try below article to handle different field based on dropdown. Also can you elaborate your statement ?
https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

Avatar

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile
Bhuwan_B
Level 6

09-12-2020