Extending Components in Admin Console AEM

What is Admin Console (Brief Introduction and why do we use it)
You might have seen the admin configuration panel many numbers of times to create editable templates, to provide translational configurations, etc. But did you know that you can also create your own custom panel by using the default configuration components? Recently I got an opportunity to extend the Out of the Box component for one of the projects to configure using this panel. I want to share all the steps here so it can help other developers to create a custom screen on their own.

Here we go with the steps to create an amazing component panel.
Steps
1: Create a Collection Item
· Each component is created in a collection format to extend the features as a component in the console. Here a Collection is a hierarchy of nodes to represent that admin structure. You can create a Collection on the respective tools section of the AEM start console.
· For this purpose, we need to create a sling: Folder with the name ‘cq’ under ‘/apps’ section. Once a ‘cq’ folder is created, we would require adding all the child folders under it. We can do this starting with a child folder named core[not: folder] to access the core component collection.
· Following this, we need to create a structure to access the navigation tools section panel by using the Content folder which basically a sling: OrderedFolder. Any child under this folder should follow the tools section through a sequence of nodes[nt:unstructured] to redirect to that particular panel section.
· Once the node is created with jcr:title(Demo) property that collection item will be available in the tools section.



Next, we must create a panel page to access this component.

2: Creating a panel page
· A panel page is nothing but an nt:unstructured node. Adding a node(demopage) to the collection item(demo) will create a panel page to that collection item in the admin console.


· This demo page node contains various properties to present the panel page in the admin console. For example, the icon property is used to display the icon on the panel page. It should contain a jcr: title and a href link to redirect the panel page to a content collection page.

Now we need also need to add a redirect to the collection item so that the author can enjoy easy access to the components created.

3: Content Collection Page Redirect
Once when you have created the content collection page and if you want to redirect back to the demo collection Item, then we can use “consoleId” property to redirect on click of home anchor (Adobe Experience Manager icon). This will help us in redirecting to the specific id in the admin console.

Now that we have created the collection item along with the panel page and console id, we can create as many components as we would want in the admin console. 

Hope you find it useful.
The author would like to thank Gaurav Tiwari ( Technical Lead ) for constructive criticism of the manuscript.