Customizing the Consoles
This document describes how to customize consoles in the modern, touch-enabled UI and does not apply to the classic UI.
AEM provides various mechanisms to enable you to customize the consoles (and the page authoring functionality ) of your authoring instance.
- ClientlibsClientlibs allow you to extend the default implementation to realize new functionality, while reusing the standard functions, objects, and methods. When customizing, you can create your own clientlib under /apps. For example it can hold the code required for your custom component.
- OverlaysOverlays are based on node definitions and allow you to overlay the standard functionality (in /libs ) with your own customized functionality (in /apps ). When creating an overlay a 1:1 copy of the original is not required, as the sling resource merger allows for inheritance.
These can be used in many ways to extend your AEM consoles. A small selection are covered below (at a high level).
For further information see:
You must not change anything in the /libs path.
This is because the content of /libs is overwritten the next time you upgrade your instance (and may well be overwritten when you apply either a hotfix or feature pack).
The recommended method for configuration and other changes is:
- Recreate the required item (i.e. as it exists in /libs ) under /apps
- Make any changes within /apps
For example, the following locations within the /libs structure can be overlaid:
- consoles (any consoles based on Granite UI pages); for example:
See the Knowledge Base article, Troubleshooting AEM TouchUI issues , for further tips and tools.
Customizing the Default View for a Console
You can customize the default view (column, card, list) for a console:
- You can reorder the views by overlaying the required entry from under:/libs/wcm/core/content/sites/jcr:content/viewsThe first entry will be the default.The nodes available correlate to the view options available:
- For example, in a overlay for list:/apps/wcm/core/content/sites/jcr:content/views/listDefine the following property:
- Name : sling:orderBefore
- Type : String
- Value : column
Add New Action to the Toolbar
- You can build your own components and include the corresponding client libraries for custom actions. For example, a Promote to Twitter action at:/apps/wcm/core/clientlibs/sites/js/twitter.jsThis can then be connected to a toolbar item on your console:/apps/<yourProject>/admin/ext/launchesFor example, in selection mode:content/jcr:content/body/content/header/items/selection/items/twitter
Restrict a Toolbar Action to a specific Group
- You can use a custom rendering condition to overlay the standard action and impose specific conditions that must be fulfilled before it is rendered.For example, create a component to control the renderconditions according to group:/apps/myapp/components/renderconditions/group
- To apply these to the Create Site action on the Sites console:/libs/wcm/core/content/sitesCreate the overlay:/apps/wcm/core/content/sites
- Then add the rendercondition for the action:jcr:content/body/content/header/items/default/items/create/items/createsite/renderconditionUsing properties on this node you can define the groups allowed to perform the specific action; for example, administrators
Customizing Columns in the List View
This feature is optimized for columns of text fields; for other data types it is possible to overlay cq/gui/components/siteadmin/admin/listview/columns/analyticscolumnrenderer in /apps .
To customize the columns in the list view:
- Overlay the list of available columns.
See Using Overlays (and the Sling Resource Merger) for more information.
- On the node:/apps/wcm/core/content/common/availablecolumns
- Add your new columns - or remove existing ones.
For example, see the class/bundle attached (from GitHub) below.
- If you want to plug additional data, you need to write a [PageInforProvider](https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/javadoc/com/day/cq/wcm/api/PageInfoProvider.html) with apageInfoProviderType property.
- You can now select the column in the column configurator of list view.
When using a console, a common use case is when the user must select from resources (e.g. pages, components, assets, etc.). This can take the form of a list for example from which the author must choose an item.
In order to keep the list to a reasonable size and also relevant to the use case, a filter can be implemented in the form of a custom predicate. See this article for details.