Showing the component outline in Touch UI

[b7wilso]

AEM 6.0, SP1

We are fairly new to AEM (have not launched our first AEM site yet).  When working with our partner all our components were developed with Classic in mind.  I am now attempting to make the components (more) usable within Touch UI.

Thanks in advance,

Brad W

P.S. - I submitted this one late last Friday. If you wanted to review that one too that would be helpful. Thanks.

[b7wilso]

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

[Jörg_Hoh]

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

[b7wilso · Accepted solution]

Sorry, was not trying to create a new question.  Was trying to rename http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage... so that it was more accurate to search over.

The following can be placed at the top of your component to get the outlining Touch UI behavior.  This is working for me in Sightly.  We don't have any .jsps so I cannot verify whether it works or not in there (but I would assume that it would).  Thanks!

<div data-emptytext="Component Name" class="cq-placeholder"></div>

[smacdonald2008]

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

[Opkar_Gill]

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

[b7wilso]

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.