creating tool page in granite ui for AEM 6.X | Community
Skip to main content
R
roy.teeuwen
Level 2
August 16, 2016

creating tool page in granite ui for AEM 6.X

  • August 16, 2016
  • 2 replies
  • 4668 views

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/content/jcr_root/apps/demo/admin/ext/launches/content/.content.xml

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
August 19, 2016

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.img.png/ToolMenu.png[/img]

 

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

Kautuk Sahni
R
roy.teeuwenAuthor
Level 2
September 1, 2016

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
smacdonald2008
Level 10
September 1, 2016

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. 

smacdonald2008
smacdonald2008
Level 10
September 1, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...