Download - AEM 6.0 - Author UI Customization & Features
AEM 6.0 – UI Customization & FeaturesAbhinit BhatnagarSenior Developer, 3|SHARE Corporation
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
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
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
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
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
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
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
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
Modify Search filtersTo 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
Metadata properties as tagsTo 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
Asset Editor – Metadata TemplatesTo 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
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/body/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
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
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_customization_for_aem6.pdf
AEM 6.0 UI Customization
Questions please ?
AEM 6.0 UI Customization