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