Andreea Corbeanu & Christian Meyer - Adobe
How to extend a dialog by purely providing the missing pieces via the Sling Resource Merger
* Customizable search facets
How to create custom search facets
* Custom page properties bulk editing
How to add a custom field to the bulk editing
2. About us
Andreea Miruna Corbeanu
Software Engineer, AEM Sites
Site Admin, Granite UI
Christian Meyer
Software Engineer, AEM Sites
Page Authoring, Granite UI
3. User Interface Customisation
AEM projects require customization of the UI
Extension points are available in the product
Let’s learn how to use them!
6. Extending Component Dialogs
Add a field to the Image dialog?
1. Extend Image component
sling:resourceSuperType=
“foundation/components/image”
2. Provide complete dialog structure
(=> copy/paste + add new field)
Before AEM 6.1
7. Extending Component Dialogs
Add a field to the Image dialog?
1. Extend Image component
sling:resourceSuperType=
“foundation/components/image”
2. Provide dialog diff only
New in AEM 6.1
8. 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
9. 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
10. 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
11. Extending Component Dialogs
1. 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”]
18. Customizing Page Properties
Use flags to control rendering of nodes for a given view
• cq:showOnCreate {Boolean}
• cq:hideOnEdit {Boolean}
• allowBulkEdit {Boolean}
19. 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
23. What is a Search Predicate?
Wraps Granite UI component
Backed by AEM Search API
Contains a JavaScript client library
• resetSearchFilters event
• loadSavedQuery event
26. Demo
• Customize the Side Admin Search Rail
• Customize the Page Authoring Side Panel Asset Search
27. Summary
Extending 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