Expand my Community achievements bar.

SOLVED

Page not editable in editor.html (touch ui)

Avatar

Level 2

Hi Everyone,

I am working on a project and most of the components have been developed in classic ui mode, but when i try to edit them in touch ui mode, the page is not even showing components icon on the left side and the (edit) mode drop down is not working. The OTB pages i.e geometrix- gov and all inbuilt pages are also showing the same problem.

PFA 

 

Any help will be Appreciated!  

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

Please have a look at this community article :-

Link:-https://mkbansal.wordpress.com/2016/01/19/aem-touch-ui-what-and-why/

Both Classic UI and touch UI have different dialog. Developer needs to make sure that their components are using Touch UI dialog along with Classic Dialog.

If you are trying to enable existing components to support Touch UI, then follow following practice:

  1. Use Dialog Conversion tool to convert existing EXTJS dialogs to Touch Dialogs.
  2. For any customization you did in Classic dialog (custom xtypes) you need similar widget for Touch UI.
  3. It’s not necessary that Claasic UI & Touch UI dialog is always same (classic ui dialog can have multiple tabs, but for touch ui, you can have all fields in same tabs), but in ideal case they should be.
  4. Unlike Classic UI, Touch UI build complete dialog in single request (all cq:include) and return complete dialog html.
  5. Use/Create Datasource to dynamically populate any element value in Touch UI dialog.
  6. Show/Hide rules in touch ui is simplified, can be done by adding some class name in dialog’s attribute property, and is managed by Jquery. Please see http://stackoverflow.com/a/25249218/1033836
  7. Custom Show/Hide rules can be easily created and used by creating clientlibs.
  8. If a component dont have Touch dialog, then classic dialog will be used in Touch UI.
  9. Limitation: Design Dialog’s still use EXT dialog in Touch mode.
  10. Issue: EditConfig’s actions is a known issue in touch ui (confirmed with AEM Team also). They have not defined action in any touch supported component. editannotate action do not work in touch.
  11. It will take some time to adopt Touch UI, but once u get used to of it, you will love Touch UI.

Also check if you are getting some error as well ?

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

3 Replies

Avatar

Correct answer by
Administrator

Hi 

Please have a look at this community article :-

Link:-https://mkbansal.wordpress.com/2016/01/19/aem-touch-ui-what-and-why/

Both Classic UI and touch UI have different dialog. Developer needs to make sure that their components are using Touch UI dialog along with Classic Dialog.

If you are trying to enable existing components to support Touch UI, then follow following practice:

  1. Use Dialog Conversion tool to convert existing EXTJS dialogs to Touch Dialogs.
  2. For any customization you did in Classic dialog (custom xtypes) you need similar widget for Touch UI.
  3. It’s not necessary that Claasic UI & Touch UI dialog is always same (classic ui dialog can have multiple tabs, but for touch ui, you can have all fields in same tabs), but in ideal case they should be.
  4. Unlike Classic UI, Touch UI build complete dialog in single request (all cq:include) and return complete dialog html.
  5. Use/Create Datasource to dynamically populate any element value in Touch UI dialog.
  6. Show/Hide rules in touch ui is simplified, can be done by adding some class name in dialog’s attribute property, and is managed by Jquery. Please see http://stackoverflow.com/a/25249218/1033836
  7. Custom Show/Hide rules can be easily created and used by creating clientlibs.
  8. If a component dont have Touch dialog, then classic dialog will be used in Touch UI.
  9. Limitation: Design Dialog’s still use EXT dialog in Touch mode.
  10. Issue: EditConfig’s actions is a known issue in touch ui (confirmed with AEM Team also). They have not defined action in any touch supported component. editannotate action do not work in touch.
  11. It will take some time to adopt Touch UI, but once u get used to of it, you will love Touch UI.

Also check if you are getting some error as well ?

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 1

kautuksahni​ Hi, i did installed the conversion tool 1.0.0 in AEM 6.1 and converted one geometrixx-outdoor component's dialog into touch dialog. But when i see the component in author page in edit mode in touch UI, i see 3 additional fields which were not present in original classic dialog. The cq:dialog in crx that is created do not have these additional fields. So i dont know how to delete these and what went wrong here ?

Can you please help?

Thanks,

Minakshi

Avatar

Administrator

minakshib78349132 I would request you to create a new question in the AEM community.

~kautuk



Kautuk Sahni