how to show dynamic fields on dialog ?

[Naresh536]

Hi All,

I have a requirment,  dynamic data source dropdown if select one value i have to show the selected value related dialog fields on the dialog page with colliseble layout and checkboxes.

example :   

dropdown :  value selected is "adobe".

1 headline :  products

checkbox 1

checkbox 2

2 headline :  ........

checkbox 1

checkbox 2

------- 

------

n.

These headline and checkbox are dynamic. we can't hardcode these in crxde dialog fields. we have to create dialogs dynamically. 

Would appreciate any help.

like:  on selection of dorpdown value show one popup window with all dynamic dialogs etc... with custom javascript. any example please for this. 

[Saravanan_Dharmaraj]

Couple of blogs to start with

https://unlocklearning.in/dynamic-dropdown-in-aem/

http://www.sgaemsolutions.com/2019/01/dynamically-populate-drop-down-values.html 

[narensh]

Hi @Saravanan_Dharmaraj ,

I want to show the checkbox based on the selection of dynamic dropdown.  when I select any value in dropdown i want to show checkboxes dynamically on the page properties dialog.  checkbox values are also dynamic and coming from 3rd party services.

 Hope you understand. 

[Sady_Rifat]

Hello @Naresh536 ,

I created a similar type of dialog generation last year. My problem was like this:
I have a component, Component dropdown fields are dynamic. Based on the selection fields checkboxes were shown and hidden which was also dynamic. And all those data came from a service REST API.

My Solution:

I create a dialog like this, where the selected items and checkbox was not present.

At the time of dialog loading, I created the rest of the fields by using Java under /apps/myproj/component/mycomponet/cq:dialog/...
For this, I created a service user and give that user READ, WRITE, MODIFY, DELETE permission. (/apps/myproj/component/mycomponet)

And the Java code is something like this. Hope you understand.

Cons:
Since we write under /apps, in the parallel time of authoring value will be changed by other authors.
In my case, this component was not heavily used and need to configuration sometimes. That's why the overlapping change was very rare.

[narensh]

Hi @Sady_Rifat ,

Thanks for the response. writing under apps is not recomanded. 

[arunpatidar]

You can check out to get reference how to create granite/Coral field dynamically.

https://aemlab.blogspot.com/2022/01/aemaacs-touch-ui-dialog-dynamic-dropdown.html 

[narensh]

Hi @arunpatidar ,

Thanks for providing the link. dropdown datasource is not sutabile for our use case.

let me explain my query again.

I have a drop down. When I select a value in dropdown ajax call will be triggered and  data has to be displayed as shown below. headline and checkbox  values are coming form 3rd party service which are dynamic. onload of dialog headline and checkbox should be hidden.

             dropdown --- selected

headline 1

 checkbox 1

 checkbox 2

headline 2

 checkbox 1

 checkbox 2

-----------------------------

and could you please also assist me on, how to add a coral.accordion fileds with checkboxes using coral UI javascript when we select a value in dropdown. which has to be added under the dropdown. 

Would appreciate any help.

 

[arunpatidar]

Hi,

You need to create headline, checkbox dynamically using javascript on dropdown load/change.

You can use Coral APIs to do that 

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Check...

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Dialo...  

[narensh]

Hi @arunpatidar ,

I have used the same approach in backend and created coral ui Html in servlet and added the response to dummy div tag  below the dropdown. But the json data is huge, where headlines are 120 and there  are  minumun 30 and max is 6000 checkboxes in each headline. 

how can we handle this huge data with better authoring experience and less number of clicks.

kindly assist.

Thank you.

[arunpatidar]

HI @narensh 
I think your approach is wrong then, it will be really different for authors to authors content in a dialog with 6000 fields.

You have to think some different approach, like creating the content at temporary location and including via dialog as source node etc.

Could you please explain your case here?

[narensh]

Hi @arunpatidar ,

Sure. We are working on the headless project. content authors will assign this third party json data to a page. Once the page is published, we will send this page json with unique id to other system. based on this data (json) content from the published page will be dispalyed.

example json:

"offer": ["10% off or more","15% off or more","20% off or more","25% off or more","30% off or more"].  etc...

Note: Currently the site is on java frame work application. we are migrating to AEM. 

thanks in advance. 

[arunpatidar · Accepted solution]

if you want to expose the 

"offer": ["10% off or more","15% off or more","20% off or more","25% off or more","30% off or more"]. you can put maybe you can create in RTE or Text field or Textarea as text field, 

why you need to create options(dropdown, checkbox)

[narensh]

Hi @arunpatidar ,

Authors want a better approach when compared to current design. 

current design :   each Item has checkboxes and those are dynamic.

I dont find any other approach in aem. So trying to replicate same in aem. Authors want less clicks. I did some poc, in that dialog is loading very slow and sometimes page is unresponsive.

Looking for a better authoring experience in aem.

Thanks in advance.

[Sady_Rifat]

Hello @Naresh536 ,
Since you don't want to create a node under /apps there are another solutions.

Solution 1:

You can use Datasource.

Here is a sample code, where you will call an HTML file and on that HTML you will call a Java Model class. That model will call the API and create a json for you.

XML:

<myList
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Select An Item"
        name="./selectItem">
    <datasource
            jcr:primaryType="nt:unstructured"
            sling:resourceType="/apps/my-proj/datasource/speciality/speciality.html"/>
</myList>

HTML:

<sly data-sly-use.data="com.myProj.modal.MyModel"></sly>

Java:

List<Resource> resourceList = new ArrayList<>();
ValueMap vm = new ValueMapDecorator(new HashMap<>());
vm.put("value",value);
vm.put("text",text);
resourceList.add(new ValueMapResource(resolver, new ResourceMetadata(), JcrConstants.NT_UNSTRUCTURED, vm));

DataSource ds = new SimpleDataSource(resourceList.iterator());
this.getRequest().setAttribute(DataSource.class.getName(), ds);

Solution 2:

You call Java Servlet directly from the dialog XML

XML:

<myList
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Select An Item"
        name="./selectItem">
    <datasource
            jcr:primaryType="nt:unstructured"
            sling:resourceType="your/servlet/path"
            parameter="optional your value"/>
</myList>

Java:

Same as the previous one.

Reference Link: https://levelup.gitconnected.com/aem-populate-a-drop-down-with-a-data-source-edafada90cc4

[narensh]

Hi @Sady_Rifat ,

Thanks for your response. I think Data source will work for key value. I want to show these checkbox inside arrodion.  Could you please let me know any possibility using datasource.

Thanks in advance.