Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

how to show dynamic fields on dialog ?

Avatar

Level 2

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. 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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)

 



Arun Patidar

View solution in original post

14 Replies

Avatar

Level 2

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.

 

Screenshot 2023-01-10 at 1.31.58 PM.png

 Hope you understand. 

Avatar

Community Advisor

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.

 

Sady_Rifat_1-1673418724377.png

 

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)

Sady_Rifat_2-1673419154630.png

 

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.

Avatar

Level 2

Hi @Sady_Rifat ,

 

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

 

Avatar

Community Advisor

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 



Arun Patidar

Avatar

Level 2

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.

 

Avatar

Level 2

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.

Avatar

Community Advisor

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?



Arun Patidar

Avatar

Level 2

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. 

 

Avatar

Correct answer by
Community Advisor

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)

 



Arun Patidar

Avatar

Level 2

Hi @arunpatidar ,

 

Authors want a better approach when compared to current design. 

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

narensh_0-1673627947281.png

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.

Avatar

Community Advisor

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

Avatar

Level 2

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.

Screenshot 2023-01-12 at 4.34.52 PM.png

Thanks in advance.