Extending the Adobe Experience Manager Administrator User Interface

Article 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.

A custom menu item appearing in the AEM 6 administrator screen

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.

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.

Adding content

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.

A JCR node that sets the sling:hideProperties property

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.

A JCR node that sets the sling:hideChildren property

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.

A JCR node with the sling:orderBefore property set

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:

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.

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.

AEM administrator screen displaying a custom menu item

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.

A new AEM administrator screen

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:

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.

Sample package that creates a new AEM administrator screen

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.

The JCR nodes located under apps/demo

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.

Content located under apps/cq

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.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.