Working In AEM Touch UI And Classic UI
A few weeks ago, we attended the Montreal Adobe Experience Manager (AEM) User Group meeting where the discussion topic revolved around the differences and challenges in working in Touch UI vs. Classic UI.
When Adobe introduced AEM 5.6 it also introduced a new mobile-friendly Touch UI (also known as Graphite UI). This UI was meant to address the growing need for authors to be able to create and edit content on their tablets and phones while on the go. Touch UI is designed with the author in mind, allowing for easy updates using a touch-device, while still supporting navigation with a mouse for users working on a laptop or desktop.
The look and feel of Touch UI differs significantly from Classic UI in a number of ways, including:
- Navigation changes from a tree structure to a tile view
- The Sidekick disappears and its functions are integrated in other areas
- The look and feel is in line with other Adobe Marketing Cloud products
In addition, component and editing tools also go through some name changes, thus requiring au author used to working in Classic UI to do a bit of digging around when working in Touch UI for the first time.
Since many users did not readily adopt Touch UI as their chosen user interface with 5.6, we are only now seeing some of the challenges in working in a dual environment as clients roll out AEM 6.0. Several large projects on AEM 6.0 leverage Touch UI as the default Author environment. However, since some functions are not available for Touch UI, it typically means that authors will need to toggle between Touch and Classic UI.
Once you get you bearings, the Touch UI interface is easy to navigate. If you still prefer to work in Classic UI, there are three ways you can access it from Touch UI mode:
- Under the gear icon, there is a Classic UI option at the bottom of the dropdown
- Beside the “Sites” text in the left side bar, there is a small screen icon that takes you to Classic UI
- Under the profile settings, you can set-up your default view to author in Classic UI.
For developers, there are a number of changes as well. For example, in developer mode, you now have three tabs in the Touch UI:
- Components: This tab shows the hierarchy of your components, which can be very handy. For each, you can also see the time it took for the component to render and you can see the overall page rendering time. This used to be accessible in the timing component before in /lib/foundation/timing/timing.jsp but now it is available in the developer mode.
- Tests: This tab is where you can run tests written to validate your components.
- Errors: This tab displays any errors in the page or in the components. It is handy to see but we still tend to rely on the error.log for exceptions and errors.
We also noticed a number of differences in working amongst the two UIs as a developer. Classic UI dialogs still work in Touch UI but Touch UI dialogs do not work in Classic mode. However, Adobe has released a tool that allows you to convert Classic UI dialogs to Touch UI dialogs. It can be found here: http://docs.adobe.com/docs/en/aem/6-0/develop/dev-tools/dialog-conversion.html
We noticed some bugs when switching between modes. In some cases, the change in mode does not trigger a change in “wcmmode”, so a page refresh is necessary for the components to display properly. For example, we built a tabbed component where each tab is displayed as a vertical list in edit mode so the authors can complete each tab, when switching to preview mode, the tabs are still displayed as a list, so we needed to trigger a page refresh to fix the rendering. Constant refreshing of the page may be irritating for an author.
It will be interesting to see in the next version of AEM how the Touch UI continues to evolve and which new features will be added to it. In the meantime, authors and developers alike will continue to exist in both UIs.
The next AEM Montreal User Group Meeting will be taking place in late March. Please follow our LinkedIn Group for more info about the date and location.