creating tool page in granite ui for AEM 6.X

[royteeuwen]

Hello all,

I want to create a tool page in granite ui that will come somewhere under Tools > MyToolPage in the nav bar. I understand the whole process of creating cq:Page nodes which have the entire content made up out of granite ui components that will form the page. My question though is if it is possible to make a tool page that already has the entire layout of the AEM Touch UI and you just define the "body" nodes. 

To further clarify, following example demo is made by adobe: https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-new-console/blob/master/src/main/conten...

What you see on for example lines 66 to 149 is that you have to redefine the entire help menu for every tool page you create. I am creating a tool page for AEM 6.1, but what if we upgrade to AEM 6.2 and that help menu changes? The same for the notification, the rail, the account node,...

So the thing I want to achieve is something I can include, a sort of base page, and the only content I want to put in nodes are the lines 158 to 370, the actual content. This way when we upgrade from AEM 6.1 to 6.2, there will be no issue about the nav rail from the left being moved to the nav rail on the top or the help questions that might have changed or whatever else changed in Touch UI layout for AEM.

Thanks,

Roy

[kautuk_sahni]

Hi 

One reference Helpx article for you help:-

Link:- https://helpx.adobe.com/experience-manager/using/vanitypath.html

// Here in this article we are  Developing a VanityPath Manager Tool for Adobe Experience Manager under Tool menu.

[img]https://helpx.adobe.com/experience-manager/using/vanitypath/_jcr_content/main-pars/image_209391388.i...

You need to overlay your custom tool, all tools are found at "/libs/cq/core/content/nav/tools".

Create a Overlay node in "/apps" and create a vanity-url node is an nt:unstructured with the following properties:

href - specifies the web page that is rendered when the menu option is clicked. In this example, /etc/vanity-url.html is specified. 
jcr:description - provides a description of the menu item
jcr:title - the title that appears. In this example, it is Vanity URL Manager.

"/etc/vanity-url.html " would be your actual page/tool.

I hope this will help you.

Thanks and Regards

Kautuk Sahni

[royteeuwen]

Hey Kautuk,

This is not related to what I asked... The vanity tool is not built using granite ui, it is just a jsp file instead of real granite ui components. Sure, it gets inserted in the "/libs/cq/core/content/nav/tools". 

But it does not use the granite ui resource types to build it's page.

Greetings,

Roy

[smacdonald2008]

Kautuk pointed you to that article as it was the closest article that shows you how to add a page under the Tools menu. Then you can customize the page to meet your business requirements. However as you pointed out, it uses a JSP that uses Angular in it. I will check to see if there are examples of using a page based on the granite type. 

[royteeuwen]

Hey Scott,

The problem is not having an example, I have an example, as even stated in my question:

https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-new-console

Can you maybe re read my question? The question is on how to make the page in granite ui, without remaking the entire nav tools on the left and the top navigation on the top. I want to just include them from another place.

Thanks!

Roy

[smacdonald2008]

Ok. That is Justin's code. I will ask him too look at this.