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