AEM Tech: Touch UI Admin Console with HTL & Sling Models

Be aware: previous knowledge of Adobe Experience Manager (AEM) is required.

Adobe provides a bunch of powerful tools in Touch UI to help you navigate through a list of resources. The most common and also most complex Touch UI Admin Consoles are Sites and Assets. These Touch UI tools typically allow you to navigate through resources, edit and view properties, select one or multiple resources, and apply actions on the selected items.

These resources could be located in a folder, and it’s just about listing the children, or the resources could be everywhere in the repository and are collected by using a query.

AEM is very open and flexible so, most likely, you implemented customization on top of AEM that makes use of some nodes in the repository to configure data that will be used by the sites or apps you develop in AEM. But how often do we implement proper screens to manage this data?

My initial approach to get a custom Touch UI Admin Console was always to find a similar out-of-the-box console, copying it, and then rewriting it line by line to get my data displayed. Then carefully — line by line — testing that damn JSP a thousand times, and knowing if I change too much at once, the screen would fail to render.

Why is this still all written in JSP, by the way? Why are there hundreds of lines in JSP, while we have great technologies available like HTL, Sling Models, and OSGI Services?

Anyway, my goal was to come up with a Touch UI tool that did not use JSPs anymore but instead makes use of Java code in an OSGI Service (which I can unit test, yay!), HTL, and Sling Models.

Removing the JSP part turned out to be not completely possible, but I reduced it to a minimal set of code, just enough to call the OSGI Service. The HTL and Sling Model also worked out, so victory!

Let me explain how I approached this.

Admin Console definition
First, we need to create a definition node that outlines which data to show and which actions to support.
This node is created under /apps/jetpack/dictionary-activation/content/dictionaries

The highlights of this file are:

• Root: Mainly title and vanity url to access this tool
• Head: Mainly which clientlibs to load (some custom styling is always required)
• Views: Columns to show and the datasource
• Actions: Always visible actions (secondary) and actions on selection

This Touch UI Admin Console is accessible on http://localhost:4502/jetpack/dictionaries.html

Touch UI Menu icon
Just providing this tool, without providing a link that users can navigate to, is not really helpful. By adding a small configuration node, the tool will be listed in one of the existing Touch UI screens.

Want to learn more about this step? We documented this in a previous blog post.

Data Source
The data source definition consists of 2 major properties:

• sling:resourceType: the component that provides the list of resources to render
• itemResourceType: the component that will take care of rendering 1 resource (see HTL Template)

This JSP is located under /apps/jetpack/dictionary-activation/components/resourcesdatasource/resourcesdatasource.jsp

The JSP is only getting a datasource from an OSGI Service:
Data Source OSGI service getting a list of Resources

HTL Template & Sling Model
The Sling Model will be the Java representation of a single resource, starting from the request and using the PostConstruct to compose a Java Object for the resource.


The HTL template is responsible for rendering 1 single resource (which is converted to a Sling Model):
The HTL file is located under /apps/jetpack/dictionary-activation/components/resourceconfig/resourceconfig.html

Example project
This methodology is applied in an open-source AEM Jetpack tool that I developed, which is Dictionary Activation. This tool uses a query to find a list of resources and visualizes these in the Touch UI tool.

A more advanced example is the Jetpack Patch System, which shows data that is not coming from a resource. In this case, a Synthetic Resource is used to create a virtual Resource of any object, which could even be data from an external system.

Conclusion
Do you also need a Touch UI screen to list resources that you want to apply actions to? You don’t want to mess around in JSP? Then this article shows how this can be achieved using a clean and simple approach using Sling Models and HTL.

The example projects also show examples of action buttons that can be applied to each row in the Touch UI tool to execute some actions in a custom servlet.

Source: https://medium.com/ida-mediafoundry/aem-touch-ui-admin-console-with-htl-sling-models-b725935a1faf