Article summary

Summary

Discusses how to modify the AEM 6 administrator GUI using JCR nodes and properties. This article guides you through how to install AEM samples as a starting point and then further modify them.  

A special thank you to Gilles Knobloch, an AEM Engineering Manager for helping with this development article.    

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
JCR nodes, Github, Maven
Tested On Adobe Experience Manager 6

Introduction

You can customize the Adobe Experience Manager (AEM) administrator user interface to meet your business requirements. You can modify existing pages or add new ones. For example, you can add a new button or menu item to the user interface that lets an administrator access custom functionality within AEM.

adminUI2

This development article covers two use cases:

1. Modifying an existing AEM administrator page.

2. Creating an AEM administrator page.

Both of these use cases correspond to AEM samples located in the public AEM GitHub repository. Instead of re-creating your own code, this development article instructs you how to download the samples, deploy them to AEM, and walk you through what they do. These samples are used as a starting point. It is recommended that you understand the samples and use them as a basis to modify the AEM administrator user interface to meet your business requirements.

Note:

In addition to downloading the AEM samples located in GitHub, it is also recommended that you watch the following AEM GEMs session that covers this use case. The URL is http://dev.day.com/content/ddc/en/gems/user-interface-customization-for-aem-6.html.  

Modifying an existing AEM administrator screen

You can modify an existing AEM administrator screen by using the Sling Resource Manager, which is the main way you modify the AEM administrator user interface. To modify an AEM screen, you overlay content located under /libs and override the nodes and their properties under /apps. The JCR nodes under /apps take priority over the corresponding nodes under /libs. It is strongly recommended that you do not modify content located under /libs.

Before installing the AEM sample code, there are some concepts to understand. First, all user interface modifications can be performed by using modifications to JCR nodes under /apps. To add or override a property, you create the corresponding property under /apps. Consider the following content under apps/wcm.

AddStruct

Adding content

In the previous illustration, notice the node named mydoc1 and is located at:

/apps/wcm/core/content/sites/jcr:content/body/help/items/list/items/mydoc1


This node is of type granite/ui/components/foundation/hyperlink and represents a menu item that appears under the Help menu (see the illustration shown at the beginning of this article). To set the text that is visible, assign a value to the node's text property .  

Deleting content

You can delete (or hide) content by modifying JCR nodes. To delete (hide) content, you can use the  sling:hideProperties property and specify a list of properties to delete (this property is a String array), as shown in this illustration.   

hide

You can also delete a node and its children by setting the sling:hideResource property to true (this is a Boolean value). Likewise, you can delete a node's children (but keep the properties of the node) by setting the sling:hideChildren property and specifying a list of children to delete (this property is a String array), as shown in the following illustration.

hideChild

Reorder content

You can also reorder nodes by setting the sling:orderBefore to the name of the sibling where that node should be reordered before. This property is a string that specifies the node sibling. The following illustration shows this property being set.

reorder

Installing the sample package

Download the sample AEM package that modifies the AEM administrator page. You can download this sample package from the AEM public Github repository located at the following URL:

https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-customize-sites

Fork the Github project and then clone the new repository. For information about Github commands, see http://gitref.org/.

Next start the command line and go to the root folder located on your desktop. Run the following Maven command:

mvn clean install content-package:install

This command builds the sample package and automatically installs the package in your AEM 6 instance. When Maven successfully builds the sample package, you can view the package in AEM Package view, as shown in this illustration.  

Note:

For information about setting up Maven, see Maven in 5 minutes.

ExtendPackage

After you install this package, you can view the results of the package by viewing the AEM administrator screen located at the following URL:

http://localhost:4502/sites.html/content/geometrixx/en

By modifying the node properties, you can modify the administrator page. For example, consider the following JCR node:

/apps/wcm/core/content/sites/jcr:content/body/help/items/list/items/mydoc1

Notice that the sling:resourceType of this node is granite/ui/components/foundation/hyperlink. You can modify the text value of this node to modify the menu items that appear under the Help menu (located in the upper right hand side). For example, assign the following value to the text property: AEM 6 Blogs. Once you assign this value to the text property, you can view this menu item, as shown in the following illustration.

HelpMenu


Note:

It is recommended that you modify other properties and view the results. This is the best way to learn how to modify the AEM administrator screen by using JCR nodes and properties.  

Creating a new administator screen

In addition to modifying existing administrator screens, you can also create a new AEM administrator screen, as shown in this illustration.  

NewScreen

Download the sample AEM package that creates a new AEM administrator page. You can download this sample package from the AEM public Github repository located at the following URL:

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

Fork the Github project and then clone the new repository. For information about Github commands, see http://gitref.org/.

Next start the command line and go to the root folder located on your desktop. Run the following Maven command:

mvn clean install content-package:install

This command builds the sample package and automatically installs the package in your AEM 6 instance. When Maven successfully builds the sample package, you can view the package in AEM Package view, as shown in this illustration.  

NewScreenPackage


After you install the sample package, you can view the new nodes located at:

/apps/demo

The following illustraton and table descibes the nodes located under this location.  

NewScreenNodesA

Section Description
A The root node for the new AEM Administrator page
B Custom AEM components (JSP, CSS, and so on)
C Page defination for the new administrator page
D The sling:resourceType for the new page. Notice it is granite/ui/components/foundation/page.

In addition to apps/demo, the sample package also places content under apps/cq, as shown in this illustration.

 

SiteContent

This node structure is responsible for navigating functionality for the new administrator page. Consider the following JCR node:

/apps/cq/core/content/nav/launches

This node is of type nt:unstructured. It has a property named href and the value of this property is /launches.html. This specifies the URL that you can use to access the page. In this example, you can access the new AEM administrator page by specifying the following URL:

http://localhost:4502/launches.html

 

Note:

It is recommended that you look at all the nodes and content under apps/demo and apps/cq to understand how to create a new AEM administrator page.

See also

Congratulations, you have just installed AEM sample code and worked through how to modify the AEM administrator pages by using JCR nodes and properties. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy