This document discusses various features and customization options for the AEM 6.0 user interface. It covers the Sling resource merger which allows overlaying and customizing nodes, adding and hiding links from the left rail, adding buttons to the console, modifying search filters, using metadata properties as tags, and customizing asset editor metadata templates. It provides examples of how to customize and overlay nodes in the /libs path with custom configurations in the /apps path. The document also includes some additional useful information and links for AEM UI customization.

1. AEM 6.0 – UI
Customization &
Features
Abhinit Bhatnagar
Senior Developer, 3|SHARE
Corporation

2. Agenda
 Sling Resource Merger
 Add / Hide links from left rail
 Add a new button in the console
 Modify Search filters
 Metadata properties as tags
 Asset editor – Metadata Templates
AEM 6.0 UI Customization

3. Sling Resource Merger
 Provides services to access and merge resources
 Allows to manage overrides of nodes and their properties
 AEM configured to search the /apps first and then the /libs to
find a resource.
 What is an overlay ?
 Taking the predefined functionality and imposing your own
definitions over that.
AEM 6.0 UI Customization

4. How to create an overlay
 Recreate the required nodes and node structure as they exist in /libs
 Create the overlay node structure in /apps
 Make your changes in /apps
 IMPORTANT :
 You must not make changes in the /libs branch
 Not recommended to copy entire structure from /libs to /apps
 Non-Granite UI changes needs complete structure duplication.
AEM 6.0 UI Customization

5. Properties
 sling:hideProperties
 To hide certain properties under the node
 sling:hideResource
 To hide the resource and its children
 sling:hideChildren
 To hide the children as specified but node remains visible
 sling:orderBefore
 Ordering the node with respect to the siblings
AEM 6.0 UI Customization

6. Uses of Sling Resource Merger
 Add a property
 Override a property (not auto-created properties)
 Override an auto-created property
 Override a node and its children
 Hide a property
 Hide a node and its children
 Hide children of a node (while keeping the properties of the
node)
 Reorder nodes
AEM 6.0 UI Customization

7. Add links to the left rail
To do this, you can create an overlay of :
/libs/cq/core/content/nav
In the apps overlay :
/apps/cq/core/content/nav
 Add a similar node with desired properties
 All properties can be changed including the title
AEM 6.0 UI Customization

8. Hide links from the left rail
To do this, you can create an overlay of :
/libs/cq/core/content/nav
In the apps overlay :
/apps/cq/core/content/nav
 As simple as adding a property – sling:hideResource : true to
the node
AEM 6.0 UI Customization

9. Add a new button in the console
To do this, you can create an overlay of :
/libs/dam/gui/components/admin
/libs/dam/gui/content/assets
In the apps overlay :
/apps/dam/gui/components/admin/{name}
/apps/dam/gui/content/assets
 Requires overriding of multiple properties and nodes.
 The requirement specific changes can be done to the CSS
and the JS under the clientlibs.
AEM 6.0 UI Customization

10. Modify Search filters
To do this, you can create an overlay of :
/libs/dam/gui/content/facets
/libs/dam/content/search
/libs/dam/options
In the apps overlay :
/apps/dam/gui/content/facets
/apps/dam/content/search
/apps/dam/options
 Requires overriding of multiple properties and nodes.
 The predicates, facets and search options can all be modified
and overridden.
 Can also be useful for the creation of smart collections as it
provides better optimized search results
AEM 6.0 UI Customization

11. Metadata properties as tags
To do this, you can create an overlay of :
/libs/cq/gui/components/common/datasources
/libs/dam/content/schemaeditors
In the apps overlay :
/apps/cq/gui/components/common/datasources
/apps/dam/content/schemaeditors
 Tags can be handy for multiple valued metadata & better
taxonomy
 Modify the datasources for the tags.
 Changes in the metadata structure and can be used in
multiple places.
AEM 6.0 UI Customization

12. Asset Editor – Metadata Templates
To do this, you can create an overlay of :
/libs/dam/content/asseteditors
In the apps overlay :
/apps/dam/content/asseteditors
 Metadata Editor changes can be done in accordance to the
Non – Granite UI.
 Can be seen in the classic UI.
 Custom fields can be added similar to the metadata schema
editor but not in the new UI but only in the node structure.
AEM 6.0 UI Customization

13. Other useful information
 Certain node structures in /libs which can be overridden in
/apps for desired functionalities :
 Form similar to the Image Set creation :
 /libs/dam/gui/content/s7dam/sets/imageset/jcr:content/bod
y/content/items
 Asset Reports :
 /libs/dam/content/reports
 /libs/dam/gui/components/admin/reports
 Page Header information comes from :
 /libs/dam/gui/content/assets/jcr:content/head
AEM 6.0 UI Customization

14. Other useful information (contd.)
 Actions related to various DAM operations :
 /libs/wcm/core/content/damadmin/actions
 DAM Actions (Classic UI) :
 /libs/cq/ui/widgets/source/widgets/wcm/DamAdmin.Actions
.js
 Metadata Template related wizards :
 /libs/dam/widgets/source/widgets
AEM 6.0 UI Customization

15. Useful Links
 https://github.com/gknob/sling-resourcemerger
 http://docs.adobe.com/content/docs/en/aem/6-
0/develop/platform/overlays.pdf
 http://dev.day.com/content/docs/en/aem/6-
0/develop/extending/customizing-consoles-touch.html
 http://dev.day.com/content/ddc/en/gems/user-interface-
customization-for-aem-
6/_jcr_content/par/download/file.res/User_interface_customiz
ation_for_aem6.pdf
AEM 6.0 UI Customization

16. Questions please ?
AEM 6.0 UI Customization