Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AEM 6.1 User Interface Customization

(Recording at:

How to customize the User Interface in AEM 6.1?
- Extending Component Dialogs
- Customizing Page Properties view
- Customizing Search Forms

  • Login to see the comments

AEM 6.1 User Interface Customization

  1. 1. User Interface Customisation in AEM 6.1 Christian Meyer @martinischeery Andreea Sandru @pudelyna
  2. 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. 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. 4. Agenda Extending Component Dialogs Customizing Page Properties Customizing Search Forms
  5. 5. Extending Component Dialogs
  6. 6. Extending Component Dialogs Add a field to the Image dialog? 1. Extend Image component
 “foundation/components/image” 2. Provide complete dialog structure
 (=> copy/paste + add new field) Before AEM 6.1
  7. 7. Extending Component Dialogs Add a field to the Image dialog? 1. Extend Image component
 “foundation/components/image” 2. Provide dialog diff only
 New in AEM 6.1
  8. 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. 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. 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. 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. 12. Customizing Page Properties
  13. 13. Different views Create Page Wizard Edit Page Properties Bulk Edit Page Properties
  14. 14. Create Page Wizard
  15. 15. Edit Page Properties
  16. 16. Bulk Edit Page Properties
  17. 17. Common definition Page properties = Fields of Page component dialog
  18. 18. Customizing Page Properties Use flags to control rendering of nodes for a given view • cq:showOnCreate {Boolean} • cq:hideOnEdit {Boolean} • allowBulkEdit {Boolean}
  19. 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. 20. Customizing Search Forms
  21. 21. Customizing Search Forms Out of the box reusable Search Predicates Leverage Sling Resource Merger overlays
  22. 22. Customizing Search Forms
  23. 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. 24. Make a custom predicate available for customization
  25. 25. Adding custom predicate by drag and drop
  26. 26. Demo • Customize the Page Authoring Side Panel Asset Search • Customize the Side Admin Search Rail
  27. 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. 28. Resources Documentation Code samples Slides !
  29. 29. Thank you! Any questions?