Adobe Experience Manager — Add links to your internal and external tools in Touch UI

Nothing is more annoying than having custom pages or tools in AEM, and not being able to find them using the UI. Plus, you can't expect your users to memorize the urls either.

AEM allows you to add new links to tools in the Touch UI navigation menu very easily. They could be positioned in the existing structure or you could create a new category.

These links could point to custom tools in AEM, but also to external tools like the tools you use for SEO Management, Translation, …

A good AEM set-up for authors helps them navigating the CMS easily. Don’t let them find a needle in a haystack, but guide them through the interface.

The best example, in my opinion, is the translator tool for dictionaries in AEM with is located on http://localhost:4502/libs/cq/i18n/translator.html. Even though the tool is only available in Classic UI, there are no links to open this tool at all, neither in the Classic UI Tools nor the Touch UI navigation.

To solve this, a few nodes need to be created to define a new Touch UI Navigation item. Create the structure below with the mentioned jcr:primaryType properties and read the additional instructions below.

The [group] node can be one of the existing groups: general, workflow, sites, assets, resources, security, commerce, cloudservices, communities, deployment or operations.

All nodes mentioned above until and including the [group] node, will be an empty node with just the jcr:primaryType set to what is mentioned in the picture above.

The [tool] node will be represented by the following configuration:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Dictionaries"
    jcr:description="Managing Dictionaries"
    href="/libs/cq/i18n/translator.html"
    consoleId="cq-dictionaries"
    icon="book"
    target="_blank"
    order="{Long}300"/>

The Coral Icon documentation lists all available icons you can mention in the icon attribute.

If you want to create your own group, the [group] node needs to contain the following properties:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="My Own Group"/>

As you can see, it’s very easy to overlay the Touch UI navigation menu and to add your own navigation items. Plus, it might be a huge help for your authors.

If you have tried to implement this using the steps above, let us know. We would love to hear how it went!