User Interface Customisation

in AEM 6.1Christian Meyer @martinischeery

Andreea Corbeanu @pudelyna

About usAndreea Miruna CorbeanuSoftware Engineer, AEM SitesSite Admin, Granite UI

Christian MeyerSoftware Engineer, AEM Sites Page Authoring , Granite UI

User Interface Customisation

AEM projects require customization of the UI

Extension points are available in the product

Let’s learn how to use them!

Agenda

Extending Component Dialogs

Customizing Page Properties

Customizing Search Forms

Extending Component Dialogs

Extending Component Dialogs

Add a field to the Image dialog?

1. Extend Image componentsling:resourceSuperType=“foundation/components/image”

2. Provide complete dialog structure(=> copy/paste + add new field)

Before AEM 6.1

Extending Component Dialogs

Add a field to the Image dialog?

1. Extend Image componentsling:resourceSuperType=“foundation/components/image”

2. Provide dialog diff only

New in AEM 6.1

Sling Resource Merger

Adds an extra section in the left navigation in AEM

Introduced in AEM 6.0

√ Customize* out of the box UI

x Extend* component dialogs

(*) By providing the diff only

Adds an extra field to the inherited dialog

Sling Resource Merger

New in AEM 6.1

√ Customize* out of the box UI

√ Extend* component dialogs

(*) By providing the diff only

Sling Resource Merger

=> Search path-based merge resourceResolver.getResource(“/mnt/overlay/“ + relativePath)

=> Resource type hierarchy-based merge resourceResolver.getResource(“/mnt/override/“ + absolutePath)

Used in Touch-optimized UI to √ Allow customization of the product UI √ Allow cq:dialogs extension

Extending Component Dialogs1. Always start by creating node skeleton of the part to redefine

(subtree of nt:unstructured nodes, without properties)

2. Then, only provide the “diff”

• Add a node? => simply add it with its properties

• Add a property? => simply add the property

• Update a node? => simply add changed properties

• Reorder a node? => use sling:orderBefore=“nodeName”

• Remove a node? => use sling:hideResource=true

• Remove a property? => use sling:hideProperties=[“propertyName”]

Customizing Page Properties

Different views

Create Page Wizard

Edit Page Properties

Bulk Edit Page Properties

Create Page Wizard

Edit Page Properties

Bulk Edit Page Properties

Common definition

Page properties

=

Fields of Page component dialog

Customizing Page Properties

Use flags to control rendering of nodes for a given view

• cq:showOnCreate {Boolean}

• cq:hideOnEdit {Boolean}

• allowBulkEdit {Boolean}

Demo

Customize Page Properties views

• Reorder “Title” field before “Name” field

• Only keep a subset of fields in “Create Page Wizard”

• Allow “Title” field to be bulk edited

Customizing Search Forms

Customizing Search Forms

Out of the box reusable Search Predicates

Leverage Sling Resource Merger overlays

Customizing Search Forms

What is a Search Predicate?

Wraps Granite UI component

Backed by AEM Search API

Contains a JavaScript client library

• resetSearchFilters event

• loadSavedQuery event

Make a custom predicate available for customization

Adding custom predicate by drag and drop

Demo

• Customize the Side Admin Search Rail

• Customize the Page Authoring Side Panel Asset Search

SummaryExtending Components Dialogs Override as a diff Use sling:hideResource, sling:hideProperties, sling:orderBefore

Customizing Page Properties Extend Page Component Dialog Use cq:showOnCreate, cq:hideOnEdit, allowBulkEdit flags

Customizing Search Forms Create a new custom search predicate Use the predicate in Site admin search rail Configure existing search predicates for Page Authoring side panel

ResourcesDocumentation

https://docs.adobe.com/docs/en/aem/6-1/develop/platform/sling-resource-merger.html https://docs.adobe.com/docs/en/aem/6-1/develop/extending/customizing-page-properties.html https://docs.adobe.com/docs/en/aem/6-1/administer/operations/search-forms.html

Code samples https://github.com/Adobe-Marketing-Cloud/aem-sites-extension-search-predicate https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-page-dialog https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-assetfinder-flickr/tree/6.1

Slides http://www.slideshare.net/martinischeery/aem-61-user-interface-customisation !

Thank you!

Any questions?