We have all used the AEM Menu Tool console to access and monitor various functionalities. AEM is known for it versalite, and the tools module is not any less in this regard. Here, I have presented an agglomeration of the data and documentation required for creating a custom AEM Menu Tool.

Advantages

1. Uses Granite/Coral UI that has a plethora of OOTB components.
2. Minimal Coding Effort
3. Easy to Author/Monitor/View the tools
4. Visible only to author (unless set otherwise)

Steps

Important Notes:

• Please refrain from making changes to “/libs”
• Always use overlay or override to achieve the desired functionality.

Part 1

1. The tools can be found at “/libs/cq/core/content/nav/tools”. Overlay this node to apps like below.
2. Add a node of type “nt:unstructured” or any folder under this overlaid path (“/apps/cq/core/content/nav/tools”).
3. Add the following properties to the node created above.

Property Name	Value
ID	Unique Identifier (String)
jcr:title	Menu Item Title

4. Create a node of type “nt:unstructured” under the above created node.
5. Add the following properties

Property Name	Value
ID	(String) Unique Identifier
jcr:title	(String) Menu Item Title
jcr:description	(String) Description of the Menu Item
href	(String) A path pointing to the page that will display the custom tool/dashboard. It can be under /apps/ or /content/

For a Coral UI Icon, this can be referred. Coral Icons Documentation

Part 2

Here we need to create a page that renders the display, more specifically, under the path mentioned under the href property in the above table This can be done in two ways. Either with an HTML page, or using Coral UI Shell Page. Below are the steps to create the latter.

1. Create the below properties.

Property Name	Value
consoleId	(String) Unique Identifier
jcr:title	(String) Menu Item Title
sling:resourceType	(String) granite/ui/components/shell/page

2. Create a node title. You can use it to display the title of the page section.
3. Create a node head. You can use it to include clientlibs using the “granite/ui/components/coral/foundation/includeclientlibs”
4. Create a content node that is a sibling to the head node. The content node is primarily used to render the content of the page.
5. You can add any other coral ui components like, container, columns, well, etc. like in a dialog to render the desired output.

The output of your screen can cater to any of the requirements, whether it be a interactive tool, or a dashboard. Any clientlibs can be included in it, like a normal component.

The Coral UI has got extensive documentation and examples to create any sort of UI.
You can find them in the References Section below.

Final Output

1. This shows how how the Custom Menu Item is Shown. This is the output of Part 1.

2. Node structure of Part 2.

3. This shows how how the page is rendered from the Coral Shell UI. This is the output of Part 2.

References

Granite UI Documentation
Coral UI Documentation
Coral Icons Documentation
About Tools Console