How to dynamically populate different fields on a dialog | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
vanegi
vanegiAccepted solution
Employee
Dec 9, 2020 2:42 PM UTC

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-3-ie-aem-6-3-bfd48c261012

 

 

6 replies

Nikhil-Kumar
New Participant
Dec 9, 2020 6:56 PM UTC

@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-3-ie-aem-6-3-bfd48c261012

Translate
anelem1760873
Level 4
Dec 10, 2020 9:21 AM UTC

The List looks like this, so i need to build the dialog with these values.

[ComplexResourceWrapper, type=granite/ui/components/foundation/form/textfield, path=/apps/project/item_0, resource=[JcrNodeResource, type=nt:unstructured, superType=null, path=apps/project/item_0], ComplexResourceWrapper, type=granite/ui/components/foundation/form/textfield, path=apps/project/item_1, resource=[JcrNodeResource, type=nt:unstructured, superType=null, path=apps/project/item_1]]

Translate
vanegi
vanegiAccepted solution
Employee
Dec 9, 2020 2:42 PM UTC

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-3-ie-aem-6-3-bfd48c261012

 

 

Translate
anelem1760873
Level 4
Dec 17, 2020 7:22 AM UTC
To be honest I don't know any of this, And i don't know how is this marked as the correct answer.
Translate
Bhuwan_B
New Participant
Dec 9, 2020 2:23 PM UTC

Check this article for your requirement.

https://www.linkedin.com/pulse/event-handling-touch-ui-dialog-varun-shakya

 

Translate