CIRCUIT 2015 - UI Customization in AEM 6.1
1 like1,014 views
The document discusses user interface customization in AEM 6.1, focusing on extending component dialogs, customizing page properties, and modifying search forms. Key techniques include using the sling resource merger for customization and applying flags to manage the visibility of page properties. The document also provides links to relevant documentation and code samples for further reference.
![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”]](https://image.slidesharecdn.com/userinterfacecustomisationinaem61-150811183517-lva1-app6892/85/CIRCUIT-2015-UI-Customization-in-AEM-6-1-11-320.jpg)
CIRCUIT 2015 - UI Customization in AEM 6.1
- 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
- 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”]
- 13. Different views Create Page Wizard Edit Page Properties Bulk 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
- 21. Customizing Search Forms Out of the box reusable Search Predicates Leverage Sling Resource Merger overlays
- 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