CIRCUIT 2015 - UI Customization in AEM 6.1
-
Upload
circuit -
Category
Technology
-
view
61 -
download
4
Transcript of CIRCUIT 2015 - UI Customization in AEM 6.1
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?