Creating Dynamic Dialogs

[Clive_Stewart]

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

[smacdonald2008]

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. 

[edubey]

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

[Clive_Stewart]

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

[Clive_Stewart]

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

[kautuk_sahni]

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

[Clive_Stewart]

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

[smacdonald2008 · Accepted solution]

Here is the Helpx article on this subject: https://helpx.adobe.com/experience-manager/using/creating-touchui-dynamic.html

[Clive_Stewart]

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

[Ratna_Kumar]

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.

[Clive_Stewart]

Thank you Ratna,

reagrds

Clive

[Clive_Stewart]

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