Showing the component outline in Touch UI

Sure guys, I don't disagree with either point.  My use case is this: the components do work in Touch UI, but some only if data has been populated.  In several of the components that were developed there is not really a good "default" state developed for when the component is dropped on the page, so you drop it on the page and nothing shows up (but you switch to classic mode) and you can see it (and therefore, edit it).  So what I was hoping to do was create an item I could place at the top of any such components that would only show in touch UI (as the edit bar is already there in classic).  I could live with it showing in both, but I find it annoying.

Thanks!

Brad

Hi,

I guess, that [1] is the right approach to detect if you're in classic or touchUI mode. But you normally shouldn't need to distinguish between classic and touch UI.

kind regards,
Jörg

[1] https://docs.adobe.com/docs/en/aem/6-0/develop/ref/javadoc/com/day/cq/wcm/api/AuthoringUIMode.html

The way to tell if you are using a component in Touch UI vs classic is the URL. Touch UI is:

http://localhost:4502/editor.html/content/customerDataSourcePool.html

The classic UI is:

http://localhost:4502/cf#/content/customerDataSourcePool.html

With respect to components - A component built for Classic will still run in Touch UI. The real difference is how you build your component's dialog. You use Granite APIs to build Touch UI dialog.

When building a component - best practice is to build a dialog for classic and a dialog for Touch UI. 

See this AEM community article to learn how to build a dialog for a Touch UI component and for Classic UI:

https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Hi Brad,

when you say the touch UI components don't show when dropped on the page, then this may be because the appropriate css class has not been applied to the component. I can't remember what it should be off hand, but If you check the css classes applied to an OOTB component that shows the behaviour with the outline around the component appearing, you will see the correct css class to apply.

Regards,

Opkar

Opkar Gill wrote...

Hi Brad,

when you say the touch UI components don't show when dropped on the page, then this may be because the appropriate css class has not been applied to the component. I can't remember what it should be off hand, but If you check the css classes applied to an OOTB component that shows the behaviour with the outline around the component appearing, you will see the correct css class to apply.

Regards,

Opkar

 

Opkar - thanks for your response.  From what I am seeing in the OOTB components, it appears that cq-placeholder (or cq-list-placeholder) seem like the most likely candidates, but doesn't seem to be quite what I had in mind (from adding it to a couple of different components).  Any chance you had any additional thoughts?  For whatever it's worth, it does appear in some cases that class is tied to the AuthorMode.  Thanks.