Touch UI Mode edit configs

[krishnan2376223]

Hi All, As we know, how AEM has edit bar for components in classic UI mode, do AEM 6.3 have any edit bars for touch UI mode, instead having the floating dialog. Issue is web-pages which are having more than 10 components on page, it is hard to differentiate from one component to other until unless we do mouse hover on the components. If there is no edit bars available for touch UI, any other solution which can be implemented, which will help business authors to differentiate component in the page in edit mode(touch-ui). Thanks for the help! Regards, -Krishna.

[arunpatidar · Accepted solution]

Hi,

For RTE only, inline editing is available in Touch UI.

But you can see all the components in the page from content tree.

[andyshreve]

One option is to edit your custom component so the name of the component is displayed in Touch edit mode. Say you have an HTL (aka Sightly) component for a submit button. Below is an example that shows how to make an edit mode message that displays the name of the component in Touch edit mode:

<sly data-sly-use.uiMode="/libs/wcm/foundation/components/utils/AuthoringUtils.js">

    <sly data-sly-test="${wcmmode.edit}">

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

    </sly>

<input

    type="submit"

    name="Submit"

    value="Submit"/>

</sly>

[krishnan2376223]

Hi Andy...Thanks for the response, it is helpful. I have tried both ways removing - <sly data-sly-use.uiMode="/libs/wcm/foundation/components/utils/AuthoringUtils.js"> and with it, checked in both classic and touch ui mode, both seems to be functionally working same, do we have any particular reason to use(calling) AuthoringUtils.js.

[andyshreve]

You do not actually need to use or call <sly data-sly-use.uiMode="/libs/wcm/foundation/components/utils/AuthoringUtils.js"> if you are just concerned with Touch mode. I had used that to detect if the page is being viewed in Classic mode so I could show a similar message to Classic users:

<div data-sly-test="${uiMode.isClassic}">Submit Button Component</div>

I've found this method of edit mode messages to be a useful way to communicate the component name. You could use CSS to style them further if you want to set them apart from regular text. They are also a good way to tell authors additional info about the component without having them open the dialog or perform other clicks.