Creating Dynamic Dialogs

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

Thank you Ratna,

reagrds

Clive

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.

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

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

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

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

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

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