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

1. User Interface
Customisation
in AEM 6.1
Christian Meyer
@martinischeery
Andreea Corbeanu
@pudelyna

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!

4. Agenda
Extending Component Dialogs
Customizing Page Properties
Customizing Search Forms

5. Extending Component Dialogs

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”]

12. Customizing Page Properties

13. Different views
Create Page Wizard
Edit Page Properties
Bulk Edit Page Properties

14. Create Page Wizard

15. Edit Page Properties

16. Bulk Edit Page Properties

17. Common definition
Page properties
=
Fields of Page component
dialog

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

20. Customizing Search Forms

21. Customizing Search Forms
Out of the box reusable Search Predicates
Leverage Sling Resource Merger overlays

22. Customizing Search Forms

23. What is a Search Predicate?
Wraps Granite UI component
Backed by AEM Search API
Contains a JavaScript client library
• resetSearchFilters event
• loadSavedQuery event

24. Make a custom predicate
available for customization

25. Adding custom predicate
by drag and drop

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

28. Resources
Documentation
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
!

29. Thank you!
Any questions?