Saying more with less: how to build components for AEM’s two UIs without repeating yourself

At The Telegraph, one of our principles is to avoid duplicating code or config options. So when we were exploring how to load options dynamically in AEM’s dialog boxes, we needed to find a way of building components that supported both the Classic UI and Touch UI with no duplication. In this case, we needed to support the rich text editor and its new styling options tab and we wanted those options to be loaded dynamically in both UIs.

A tale of two dialogs: the Classic and TouchUI dialogs of a component in AEM

We came across multiple approaches to support this:

1. Load options from the json file stored at the same location where the component is stored in JCR. This option has limitations as it is only supported in Classic UI dialog and not Touch UI, so this was inappropriate for us.
2. Use the WCMUsePojo class and get options from the backend. We didn’t like this option because it has a dependency on java code and we need to write and maintain the code.
3. Use the acs commons generic list defined in AEM and then use them as a datasource in the Touch UI Dialog. The same can also be used as json in Classic UI. We liked this option as it fulfilled our requirement of supporting both UIs and there was no java dependency. It obviously depends on acs aem commons, but we are using features from that so we already have it installed!

So we decided to use option 3 for good reasons. We created a generic list page under the tools area and used maven filter.xml to make sure it is installed on a new environment when the code is installed. That way it’s completely automated.

The code snippet for both classic and touch UI are as follows:

Classic UI

<tab2
jcr:primaryType=”cq:Widget”
title=”Styles”
xtype=”panel”>
<items jcr:primaryType=”cq:WidgetCollection”>
<style-selection
jcr:primaryType=”cq:Widget”
fieldLabel=”Style”
name=”./cq:cssClass”
options=”/etc/acs-commons/lists/telegraph/rte-styles/_jcr_content.list.json”
type=”select”
xtype=”selection”>
</style-selection>
</items>
</tab2>

Touch UI

<items jcr:primaryType=”nt:unstructured”>
<options jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/form/select”
fieldLabel=”Style”
emptyOption=”true”
name=”./cq:cssClass”>
<datasource
jcr:primaryType=”nt:unstructured”
sling:resourceType=”acs-commons/components/utilities/genericlist/datasource”
path=”/etc/acs-commons/lists/telegraph/rte-styles”/>
</options>
</items>

Note : The generic list with styling options created at location

/etc/acs-commons/list/telegraph/rte-styles.

Special thanks to Javier Furio for helping it out.

Rachana Mehta is a Senior Software Engineer at The Telegraph. You can follow her on Twitter at Rachna81185836.