Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Creating Dynamic Dialogs

Avatar

Level 6

Hi,

 

I am looking for an understanding of how to make a dialog dynamic in the sense that if say when the author is on a component's dialog, if they selected a  checkbox then a drop down list of items would be dynamically generated in the dialog.

 

Regards

Clive Stewart

1 Accepted Solution

Avatar

Correct answer by
Level 10
11 Replies

Avatar

Level 10

We are releasing a very similar article this FRI: 

http://scottsdigitalcommunity.blogspot.ca/2016/03/dynamically-updating-aem-touchui-select.html

For Touch UI - its all about dynamically populating the DataSource object - as will be shown in this article. 

Avatar

Level 10

It works on listener, as high level you need to apply listener on which you want something to work.

Now in this case you will a add listener on check box so that a particular action can be performed.

For Classic UI you need to use widget listeners, check widget documentation https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.Checkbox

For touch UI you need to register listener via JS code.http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

Avatar

Level 6

smacdonald2008 wrote...

We are releasing a very similar article this FRI: 

http://scottsdigitalcommunity.blogspot.ca/2016/03/dynamically-updating-aem-touchui-select.html

For Touch UI - its all about dynamically populating the DataSource object - as will be shown in this article. 

 


HI Scott,

 

I look forward to the article

Avatar

Level 6

edubey wrote...

It works on listener, as high level you need to apply listener on which you want something to work.

Now in this case you will a add listener on check box so that a particular action can be performed.

For Classic UI you need to use widget listeners, check widget documentation https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.Checkbox

For touch UI you need to register listener via JS code.http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

 

 


Thank you for the article links

Avatar

Administrator

Hi

Adding to what is mentioned by Praveen,

If you want to react on a change in a select field, you have to listen to the event "selected". After catching, you can get the other fields in the dialog by using the fromElement method: https://docs.adobe.com/docs/en/aem/6-1/ref/coral-ui/docs/2.17.0-granite-004/widget.html#jsdocMethods.

One of the demo example that could be use as reference :-

Link:- http://experience-aem.blogspot.in/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html

// TouchUI Adding Dynamic Select Options

I hope this would be helpful for you.

Thanks and Regards

KautuK Sahni



Kautuk Sahni

Avatar

Level 6

kautuksahni wrote...

Hi

Adding to what is mentioned by Praveen,

If you want to react on a change in a select field, you have to listen to the event "selected". After catching, you can get the other fields in the dialog by using the fromElement method: https://docs.adobe.com/docs/en/aem/6-1/ref/coral-ui/docs/2.17.0-granite-004/widget.html#jsdocMethods.

One of the demo example that could be use as reference :-

Link:- http://experience-aem.blogspot.in/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html

// TouchUI Adding Dynamic Select Options

I hope this would be helpful for you.

Thanks and Regards

KautuK Sahni

 

Hi KautuK Sahni,

Thank you for your post.

My apologies on not responding sooner.

I have just finished going through the article you posted in response to my question.

The article has proven to be very helpful.

Regards

Clive Stewart

Avatar

Correct answer by
Level 10

Avatar

Level 6

Hi Scott,

I have found I have to create my dialogs classic-ui. Can the touch-ui tutorials you mentioned be applied to classic-ui

 

Regards

Clive

Avatar

Level 10

Hi Clive,

Yes you can use Touch UI tuorials and it will be applied to Classic UI as well - Logic will be same. Only dialog will be different for both the UI's.

Thanks,
Ratna Kumar.

Avatar

Level 6

Hi Ratna,

 

In the examples, it looks to me like Touch-UI and Classic-UI seem to be very different. Touch-UI does not use ExtJS and replaces xtypes with Sling:resourceType. This seems like a better choice. But I am uncertain how I would apply touch-ui code to classic-ui as the classic-ui uses xytpes.

 

Maybe it would be better for me to try get the team to switch over to touch ui. The problem though is we have only got experience working with Classic-ui and XTypes. However it looks to me like developing dialogs in classic-ui is far more complex than in touch-ui. In classic-ui I would have to work in ExtJS, which is a whole new rabbit hole to fall down. And your dialog is completely done by creating a custom Xtype component.

 

In touch-ui I can use a combination of jsp and JQuery.

 

If I am on the wrong path here I would greatly appreciate it if anyone could advise me.

 

Regards

Clive Stewart