AEM 6.1 User Interface Customization

Christian Meyer
Christian MeyerSoftware Engineer chez Adobe at Adobe
User Interface
Customisation
in AEM 6.1
Christian Meyer
@martinischeery
Andreea Sandru
@pudelyna
About us
Andreea Miruna Corbeanu

Software Engineer, AEM Sites

Site Admin, Granite UI
Christian Meyer

Software 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 component



sling: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 component



sling: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 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”]
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 Page Authoring Side Panel Asset Search
• Customize the Side Admin Search Rail
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



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
!
Thank you!
Any questions?
1 of 29

Recommended

AEM Rich Text Editor (RTE) Deep Dive by
AEM Rich Text Editor (RTE) Deep DiveAEM Rich Text Editor (RTE) Deep Dive
AEM Rich Text Editor (RTE) Deep DiveHanish Bansal
2.3K views32 slides
Adobe Experience Manager Core Components by
Adobe Experience Manager Core ComponentsAdobe Experience Manager Core Components
Adobe Experience Manager Core ComponentsGabriel Walt
2.8K views15 slides
AEM Best Practices for Component Development by
AEM Best Practices for Component DevelopmentAEM Best Practices for Component Development
AEM Best Practices for Component DevelopmentGabriel Walt
17.7K views27 slides
Build Reliable Asynchronous Code with Queueable Apex by
Build Reliable Asynchronous Code with Queueable ApexBuild Reliable Asynchronous Code with Queueable Apex
Build Reliable Asynchronous Code with Queueable ApexSalesforce Developers
1.5K views15 slides
Page Object Model and Implementation in Selenium by
Page Object Model and Implementation in Selenium  Page Object Model and Implementation in Selenium
Page Object Model and Implementation in Selenium Zoe Gilbert
598 views5 slides
How to create a User Defined Policy with IBM APIc (v10) by
How to create a User Defined Policy with IBM APIc (v10)How to create a User Defined Policy with IBM APIc (v10)
How to create a User Defined Policy with IBM APIc (v10)Shiu-Fun Poon
684 views9 slides

More Related Content

What's hot

AEM Sightly Template Language by
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template LanguageGabriel Walt
47.6K views65 slides
Deep-Dive to Application Insights by
Deep-Dive to Application Insights Deep-Dive to Application Insights
Deep-Dive to Application Insights Gunnar Peipman
2.3K views31 slides
Dynamic components using SPA concepts in AEM by
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMBojana Popovska
2.8K views22 slides
Serenity-BDD training by
Serenity-BDD trainingSerenity-BDD training
Serenity-BDD trainingSavvycom Savvycom
3K views19 slides
Introduction to React Native by
Introduction to React NativeIntroduction to React Native
Introduction to React NativeAmazon Web Services
22.2K views34 slides
Rest API Testing by
Rest API TestingRest API Testing
Rest API Testingupadhyay_25
105 views18 slides

What's hot(20)

AEM Sightly Template Language by Gabriel Walt
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt47.6K views
Deep-Dive to Application Insights by Gunnar Peipman
Deep-Dive to Application Insights Deep-Dive to Application Insights
Deep-Dive to Application Insights
Gunnar Peipman2.3K views
Dynamic components using SPA concepts in AEM by Bojana Popovska
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
Bojana Popovska2.8K views
Rest API Testing by upadhyay_25
Rest API TestingRest API Testing
Rest API Testing
upadhyay_25105 views
Introduction to REST - API by Chetan Gadodia
Introduction to REST - APIIntroduction to REST - API
Introduction to REST - API
Chetan Gadodia1.1K views
Heap Dump Analysis - AEM: Real World Issues by Kanika Gera
Heap Dump Analysis - AEM: Real World IssuesHeap Dump Analysis - AEM: Real World Issues
Heap Dump Analysis - AEM: Real World Issues
Kanika Gera926 views
AEM Sightly Deep Dive by Gabriel Walt
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep Dive
Gabriel Walt4.1K views
Single Sign-On for APEX applications based on Kerberos (Important: latest ver... by Niels de Bruijn
Single Sign-On for APEX applications based on Kerberos (Important: latest ver...Single Sign-On for APEX applications based on Kerberos (Important: latest ver...
Single Sign-On for APEX applications based on Kerberos (Important: latest ver...
Niels de Bruijn14.7K views
Testing RESTful web services with REST Assured by Bas Dijkstra
Testing RESTful web services with REST AssuredTesting RESTful web services with REST Assured
Testing RESTful web services with REST Assured
Bas Dijkstra2.2K views
Power automate a workflow automation platform by Amit Kumawat
Power automate a  workflow automation platform Power automate a  workflow automation platform
Power automate a workflow automation platform
Amit Kumawat6.7K views
Introduction to Power Platform by Praveen Nair
Introduction to Power PlatformIntroduction to Power Platform
Introduction to Power Platform
Praveen Nair1.1K views
APEX printing with BI Publisher by Roel Hartman
APEX printing with BI PublisherAPEX printing with BI Publisher
APEX printing with BI Publisher
Roel Hartman4.6K views
AngularJS Architecture by Eyal Vardi
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal Vardi64.9K views
Getting Started with HTML5 in Tech Com (STC 2012) by Peter Lubbers
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers45.4K views

Viewers also liked

User Interface customization for AEM 6 by
User Interface customization for AEM 6User Interface customization for AEM 6
User Interface customization for AEM 6Damien Antipa
18.6K views54 slides
AEM 6.0 - Author UI Customization & Features by
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & FeaturesAbhinit Bhatnagar
8.4K views16 slides
User interface customization for aem6 circuit by
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuitDamien Antipa
7.1K views55 slides
UI Customization in AEM 6.0 by
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0Gilles Knobloch
4.1K views52 slides
AEM 6.0 Touch-optimized UI by
AEM 6.0 Touch-optimized UIAEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UIGilles Knobloch
2.1K views35 slides
Touching the AEM component dialog by Mateusz Chromiński by
Touching the AEM component dialog by Mateusz ChromińskiTouching the AEM component dialog by Mateusz Chromiński
Touching the AEM component dialog by Mateusz ChromińskiAEM HUB
2.1K views17 slides

Viewers also liked(20)

User Interface customization for AEM 6 by Damien Antipa
User Interface customization for AEM 6User Interface customization for AEM 6
User Interface customization for AEM 6
Damien Antipa18.6K views
AEM 6.0 - Author UI Customization & Features by Abhinit Bhatnagar
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
Abhinit Bhatnagar8.4K views
User interface customization for aem6 circuit by Damien Antipa
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuit
Damien Antipa7.1K views
Touching the AEM component dialog by Mateusz Chromiński by AEM HUB
Touching the AEM component dialog by Mateusz ChromińskiTouching the AEM component dialog by Mateusz Chromiński
Touching the AEM component dialog by Mateusz Chromiński
AEM HUB2.1K views
CIRCUIT 2015 - UI Customization in AEM 6.1 by ICF CIRCUIT
CIRCUIT 2015 - UI Customization in AEM 6.1CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1
ICF CIRCUIT1K views
Adobe AEM CQ5 - Developer Introduction by Yash Mody
Adobe AEM CQ5 - Developer IntroductionAdobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer Introduction
Yash Mody12.2K views
Introduction to Sightly and Sling Models by Stefano Celentano
Introduction to Sightly and Sling ModelsIntroduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano10.4K views
The six key steps to AEM architecture by Ashokkumar T A
The six key steps to AEM architectureThe six key steps to AEM architecture
The six key steps to AEM architecture
Ashokkumar T A3K views
Building Quality into the AEM Publication Workflow with Active Standards by D... by AEM HUB
Building Quality into the AEM Publication Workflow with Active Standards by D...Building Quality into the AEM Publication Workflow with Active Standards by D...
Building Quality into the AEM Publication Workflow with Active Standards by D...
AEM HUB1.1K views
Adobe AEM(6.0-6.1)_AEM Forms(6.1-6.2)_Developer_KrishnaChaitanya Palla by Krishna Chaitanya Palla
Adobe AEM(6.0-6.1)_AEM Forms(6.1-6.2)_Developer_KrishnaChaitanya PallaAdobe AEM(6.0-6.1)_AEM Forms(6.1-6.2)_Developer_KrishnaChaitanya Palla
Adobe AEM(6.0-6.1)_AEM Forms(6.1-6.2)_Developer_KrishnaChaitanya Palla
Accelerate Your Next AEM Project by Mark Kelley
Accelerate Your Next AEM ProjectAccelerate Your Next AEM Project
Accelerate Your Next AEM Project
Mark Kelley587 views
Adobe Experience Manager (Adobe CQ) Capabilities and Experience @ Neev by Neev Technologies
Adobe Experience Manager (Adobe CQ) Capabilities and Experience @ NeevAdobe Experience Manager (Adobe CQ) Capabilities and Experience @ Neev
Adobe Experience Manager (Adobe CQ) Capabilities and Experience @ Neev
Neev Technologies2.6K views
CIRCUIT 2015 - Content API's For AEM Sites by ICF CIRCUIT
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
ICF CIRCUIT1K views
When dispatcher caching is not enough... by Jakub Wadolowski
When dispatcher caching is not enough...When dispatcher caching is not enough...
When dispatcher caching is not enough...
Jakub Wadolowski3.6K views
Sling Component Filters in CQ5 by connectwebex
Sling Component Filters in CQ5 Sling Component Filters in CQ5
Sling Component Filters in CQ5
connectwebex11.6K views

Similar to AEM 6.1 User Interface Customization

Making you, and your Clients Happy, by Using Reusable Components to Build Dru... by
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...bmx269
813 views36 slides
Branding & Design Opportunities/Challenges with SharePoint 2013 by
Branding & Design Opportunities/Challenges with SharePoint 2013Branding & Design Opportunities/Challenges with SharePoint 2013
Branding & Design Opportunities/Challenges with SharePoint 2013Marius Constantinescu [MVP]
2.5K views32 slides
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ... by
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...SPTechCon
1.5K views31 slides
USGS-Projects by
USGS-ProjectsUSGS-Projects
USGS-ProjectsMarie Raymond
367 views16 slides
SharePoint 2013 Branding by
SharePoint 2013 BrandingSharePoint 2013 Branding
SharePoint 2013 BrandingKashif Imran
1.9K views24 slides
NZYP Project Casestudy using SilverStripe CMS by
NZYP Project Casestudy using SilverStripe CMSNZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMSCam Findlay
827 views28 slides

Similar to AEM 6.1 User Interface Customization(20)

Making you, and your Clients Happy, by Using Reusable Components to Build Dru... by bmx269
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
Making you, and your Clients Happy, by Using Reusable Components to Build Dru...
bmx269813 views
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ... by SPTechCon
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon1.5K views
SharePoint 2013 Branding by Kashif Imran
SharePoint 2013 BrandingSharePoint 2013 Branding
SharePoint 2013 Branding
Kashif Imran1.9K views
NZYP Project Casestudy using SilverStripe CMS by Cam Findlay
NZYP Project Casestudy using SilverStripe CMSNZYP Project Casestudy using SilverStripe CMS
NZYP Project Casestudy using SilverStripe CMS
Cam Findlay827 views
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec... by SPTechCon
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
SPTechCon6.1K views
Features and Context Overview by brentratliff
Features and Context OverviewFeatures and Context Overview
Features and Context Overview
brentratliff1.4K views
GlassFish v3 Lite Admin Console by anissalam
GlassFish v3 Lite Admin ConsoleGlassFish v3 Lite Admin Console
GlassFish v3 Lite Admin Console
anissalam575 views
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ... by Richard Calderon
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Richard Calderon2.7K views
Deep dive into share point framework webparts by Prabhu Nehru
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webparts
Prabhu Nehru30 views
Taking Your First Steps with Webydo by Zest.is
Taking Your First Steps with WebydoTaking Your First Steps with Webydo
Taking Your First Steps with Webydo
Zest.is582 views
Breaking the limits_of_page_objects by Robert Bossek
Breaking the limits_of_page_objectsBreaking the limits_of_page_objects
Breaking the limits_of_page_objects
Robert Bossek398 views
Share point 2013 Building Websites by Suhas R Satish
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
Suhas R Satish236 views
SUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools by Anindita Bhattacharya
SUG Bangalore - Extending Sitecore Experience Commerce 9 Business ToolsSUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools
SUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools
14 asp.net session20 by Vivek chan
14 asp.net session2014 asp.net session20
14 asp.net session20
Vivek chan104 views
Introduction to Vaadin by Jeroen Benats
Introduction to VaadinIntroduction to Vaadin
Introduction to Vaadin
Jeroen Benats5.5K views
Building and Deployment of Drupal sites with Features and Context by Svilen Sabev
Building and Deployment of Drupal sites with Features and ContextBuilding and Deployment of Drupal sites with Features and Context
Building and Deployment of Drupal sites with Features and Context
Svilen Sabev3.5K views
CKEditor Widgets with Drupal by Ranel Padon
CKEditor Widgets with DrupalCKEditor Widgets with Drupal
CKEditor Widgets with Drupal
Ranel Padon4.8K views

Recently uploaded

DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM... by
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...Deltares
7 views40 slides
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI... by
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Marc Müller
31 views83 slides
WebAssembly by
WebAssemblyWebAssembly
WebAssemblyJens Siebert
32 views18 slides
Cycleops - Automate deployments on top of bare metal.pptx by
Cycleops - Automate deployments on top of bare metal.pptxCycleops - Automate deployments on top of bare metal.pptx
Cycleops - Automate deployments on top of bare metal.pptxThanassis Parathyras
30 views12 slides
Tridens DevOps by
Tridens DevOpsTridens DevOps
Tridens DevOpsTridens
9 views28 slides
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023 by
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023Upgrading Incident Management with Icinga - Icinga Camp Milan 2023
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023Icinga
36 views17 slides

Recently uploaded(20)

DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM... by Deltares
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...
Deltares7 views
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI... by Marc Müller
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Marc Müller31 views
Cycleops - Automate deployments on top of bare metal.pptx by Thanassis Parathyras
Cycleops - Automate deployments on top of bare metal.pptxCycleops - Automate deployments on top of bare metal.pptx
Cycleops - Automate deployments on top of bare metal.pptx
Tridens DevOps by Tridens
Tridens DevOpsTridens DevOps
Tridens DevOps
Tridens9 views
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023 by Icinga
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023Upgrading Incident Management with Icinga - Icinga Camp Milan 2023
Upgrading Incident Management with Icinga - Icinga Camp Milan 2023
Icinga36 views
How to Install and Activate Email-Researcher by eGrabber
How to Install and Activate Email-ResearcherHow to Install and Activate Email-Researcher
How to Install and Activate Email-Researcher
eGrabber19 views
Neo4j : Graphes de Connaissance, IA et LLMs by Neo4j
Neo4j : Graphes de Connaissance, IA et LLMsNeo4j : Graphes de Connaissance, IA et LLMs
Neo4j : Graphes de Connaissance, IA et LLMs
Neo4j46 views
DSD-INT 2023 HydroMT model building and river-coast coupling in Python - Bove... by Deltares
DSD-INT 2023 HydroMT model building and river-coast coupling in Python - Bove...DSD-INT 2023 HydroMT model building and river-coast coupling in Python - Bove...
DSD-INT 2023 HydroMT model building and river-coast coupling in Python - Bove...
Deltares15 views
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge... by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
Deltares16 views
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t... by Deltares
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...
DSD-INT 2023 Thermobaricity in 3D DCSM-FM - taking pressure into account in t...
Deltares9 views
Software testing company in India.pptx by SakshiPatel82
Software testing company in India.pptxSoftware testing company in India.pptx
Software testing company in India.pptx
SakshiPatel827 views
Geospatial Synergy: Amplifying Efficiency with FME & Esri ft. Peak Guest Spea... by Safe Software
Geospatial Synergy: Amplifying Efficiency with FME & Esri ft. Peak Guest Spea...Geospatial Synergy: Amplifying Efficiency with FME & Esri ft. Peak Guest Spea...
Geospatial Synergy: Amplifying Efficiency with FME & Esri ft. Peak Guest Spea...
Safe Software391 views
What Can Employee Monitoring Software Do?​ by wAnywhere
What Can Employee Monitoring Software Do?​What Can Employee Monitoring Software Do?​
What Can Employee Monitoring Software Do?​
wAnywhere18 views
A first look at MariaDB 11.x features and ideas on how to use them by Federico Razzoli
A first look at MariaDB 11.x features and ideas on how to use themA first look at MariaDB 11.x features and ideas on how to use them
A first look at MariaDB 11.x features and ideas on how to use them
Federico Razzoli44 views
Mark Simpson - UKOUG23 - Refactoring Monolithic Oracle Database Applications ... by marksimpsongw
Mark Simpson - UKOUG23 - Refactoring Monolithic Oracle Database Applications ...Mark Simpson - UKOUG23 - Refactoring Monolithic Oracle Database Applications ...
Mark Simpson - UKOUG23 - Refactoring Monolithic Oracle Database Applications ...
marksimpsongw74 views
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko... by Deltares
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
DSD-INT 2023 Simulation of Coastal Hydrodynamics and Water Quality in Hong Ko...
Deltares10 views
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ... by Donato Onofri
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Donato Onofri643 views
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - GeertsemaDSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
Deltares12 views

AEM 6.1 User Interface Customization

Editor's Notes

  1. Andreea
  2. Andreea
  3. Andreea
  4. Andreea
  5. Before diving into the extensions points, let’s first do a quick recap of the main concepts that you should be familiar with in order to understand the rest of the presentation, and more generally speaking, in order to understand how AEM Touch UI work. First thing is that our UI is actually content-driven; each console, each page, each admin screen in the product is backed by a structure of content nodes in the JCR. This implies that we can simply customize the UI by changing some node properties in the repo. And this is usually achieved by “overlaying” the product-related code (in that case: the UI content nodes) from /libs under /apps. In AEM 6.0, the previous version, we’ve introduced a more convenient way of overlaying resources by leveraging the latest Sling Resource Merger capabilities. In a nutshell, the big new thing is that when doing an overlay of an element of the UI, you don’t have to reproduce the exact same content node structure corresponding to the resource that you want to overlay; instead, you can simply provide the overlay as a “diff” of the resource. From a technical point of view, the major change here is that we’ve introduced a new resource provider, that is able to merge resources based on search paths (= so, merge the resources from /apps and /libs) instead of having the resource from /apps taking precedence over the one from /libs. Last but not least, let’s talk a little bit about Granite UI. As I said previously, our UI is based on content nodes, and each of those content nodes has a Sling resource type property leading to a Sling component responsible for its rendering. In other words, our UI is actually composed of reusable, composable and modular Sling components, and those granular components are actually coming from our framework called Granite UI Foundation. So we are using Sling components to compose our UI, in similar way like you could be using CQ Foundation components to compose CQ pages. Having that said, I’ll now let Andreea start with the customisation of the search forms.
  6. Andreea
  7. When developing components, a common use-case is to inherit from another component (= the super component) in order to extend it. By doing that, we also expect to reuse most of the super component’s functionalities. However, a common problem with component inheritance was that it was quite hard to reuse dialogs. Prior to AEM 6.0, one had to copy/paste the super dialog and then work on it. Basically, the only way of extending a super’s component dialog was to do complete local override of that dialog. This was working in an “all or nothing” way: we always had to redefine the exact whole dialog structure even if we just wanted to add a single field. In AEM 6.0, we were able to leverage the Granite UI “include” component to reuse (by including) complete subtrees of a given content node structure, and this was then used to allow reusing complete dialogs parts. For instance, we were then able to include some tabs of the super dialog, and only redefine a given tab to add a new field. This was better but still not optimal. In AEM 6.1, we now can leverage the latest SRM capabilities to do “smarter” overrides, more working like “diffs”, in opposition to the “all or nothing” overrides. This is similar to the new way of overlaying UI parts of the product in the sense that we can now provide the overriding dialog as a “diff”. Concretely speaking, instead of having to copy the super dialog content structure, we can now only provide the different parts using the SRM vocabulary.
  8. To extend a given part of the super dialog, you should always start by creating the corresponding node skeleton that you want to override. And by node skeleton here, I mean that you don’t have to copy all of the properties of the nodes part of the subtree that you’re extending: in other words, you can simply create a subtree a nt:unstructured nodes without any properties (because you don’t want to duplicate all the information that are already defined in the super dialog). And then, once you have your node skeleton in place, you can only specify the different pieces. If you want to add something (either a field or a property), then you just normally add it —nothing special here. If you want to update only a subset of properties of a field, then, following the “diff” principle, you could only add the changed properties. Particular case: if you want, for some reason, to change the ordering of a field, then you could use the sling:orderBefore property. Lastly, if you want to remove something, you could either use sling:hideResource to remove a given field, or sling:hideProperties to remove a given property. Now, remember that in the end, the dialog you’ll get will result from the merge of the super dialog, with the “diff” dialog that you’ve just created.
  9. As you may have noticed, the way we override component dialogs is now pretty similar to the way we overlay UI parts of the product. Both techniques are indeed using the SRM capabilities and rely on the fact that resources are merged, either based on their super resource type hierarchy, or on sling search paths. But before going any further, I would like to clarify how this all fits together since we could easily get confused when mixing both use-cases = when you override a component dialog of a component that is also overlaid in /apps for instance. First thing to understand is that the SRM comes with two different resource providers that were actually designed for different purposes. One allows to merge resources based on their resource type hierarchy, and is available at /mnt/override; whereas the other allows to merge resources based on sling search paths, and is available at /mnt/overlay. In Touch UI, we’ve leveraging both merged resource providers to allow you to override component dialogs and overlay UI parts in a similar manner. To recap, we’re using /mnt/override for component dialogs and /mnt/overlay for UI elements.
  10. Just to make sure that the concept is clear, here’s an example of a component dialog resolution. The common mistake that people make here is that they usually think that if the foundation list component has been overlaid under /apps, the overlaid resource will be merged with the one from /libs, which is not case: dialogs are merged according to their resource type hierarchy, and if at some point, one of the dialog resource is also overlaid, then the overlay will take complete precedence.
  11. Basically, the take-away here is the following —regarding the /apps vs. /libs overlay technique-: don’t overlay components like you overlay elements of the UI. Even if you can now overlay UI elements using diffs, you should still overlay components (for instance, like apps/foundation/components/page) using the old-fashioned “all or nothing” way. Because we’re not leveraging the SRM during the super component resolution.
  12. Now that we’ve seen how to generally extend component dialogs, let’s look at a specific use-case and see how page properties can be customized in AEM 6.1.
  13. In AEM 6.1, the Page Properties have different views throughout the product: there is the create page view, the edit page view and the bulk edit page view. Even though the properties that you can see in those views are different; you should understand that all of those views are actually based on the Page Component Dialog, where the Page Properties are actually defined.
  14. That’s the “Create Page”, visible when creating a new Page out of a Template
  15. That’s the “normal” edit page view, available from the Site Admin or the Page Editing.
  16. And that’s the bulk edit view, available from the Site Admin.
  17. As the Page Component is being frequently extended in customers projects, we’ve introduced a convenient way of customizing its different views too. And you can do that by simply extending the Page Component Dialog. The idea here is to leverage the extension point we’ve seen previously, to extend the Page Component Dialog, and add some properties to control the rendering of a field in a given view. By default, every field of the Page Component Dialog is shown in the edit view, and hidden in the other views. To allow a given field in the create page view, just flag the field with “cq:showOnCreate”. On the other side, to hide it from the edit view, flag it with “cq:hideOnEdit”. Also, to make a given field bulk editable, simply flag it with “allowBulkEdit”. And this is that simple. However, in the case of Bulk Edit, be aware that the implementation of your field has to support bulk edit. But don’t worry, this is already the case for most of the Granite UI components; however, if you want to allow your custom field to bulk editing, then you’ll probably have to update its implementation so that it knows how to behave in bulk edit. If you’re interested in this topic, the official documentation explains how you can do that. I won’t cover it in the presentation as it would take too much time. (Basically, in order for your component to play nicely with the bulk editing, it has to fulfil the following contract: Regarding the markup: you have to assign it the “foundation-field-mixed” class when it contains a mixed value, so that it won’t get submitted when submitting the form. Otherwise, you can encounter some unexpected dataloss. Regarding the JS API: you have to provide a setMixed() and setDisabled() method if your field is a composite field so that the client code can interact with your field. To do so, you can leverage the Granite UI adapter pattern, so that your field could be adapted to a foundation-field-mixed that exposes the setMixed and setDisabled methods.)
  18. Create Page: http://localhost:4502/libs/wcm/core/content/sites/createpagewizard.html/content/geometrixx Edit Page: http://localhost:4502/libs/wcm/core/content/sites/properties.html/content/geometrixx/en Bulk Edit Page: http://localhost:4502/libs/wcm/core/content/sites/properties.html?item=%2Fcontent%2Fgeometrixx%2Fen&item=%2Fcontent%2Fgeometrixx%2Ffr Let’s now dive into the demo, and see how by extending the Page Component Dialog we can also customize the different views we’ve mentioned before. I’m working here on a custom page component, which is inheriting from the Foundation Page, and I’ve changed the Geometrixx pages so that they use my component. First thing to notice, is that I’m overriding the cq:dialog node and only providing the parts that I’m interested in changing. For instance, I’m adding an RTE field labeled “abstract” under the first tab, within the “More titles” section, which I want to place before the “description” field and to allow to be bulk editable. BTW if you’re interested in the whole “how can I create custom widgets” in Touch UI, this one could be worth looking at. And I’m also customizing the “Create” view by showing the Thumbnail tab instead to the Advanced tab simply by using flags on the corresponding resources that I want to hide/show. Last but not least, I can also update some existing fields: for example here, I can make the “subtitle” field required (that way, it’ll be automatically shown on “create”), and add a custom validation for that field. To add validation, I simply specify a validation property with the value of my custom validator, which is defined in my clientlib. That’s basically how we do now validation in TouchUI.
  19. Andreea
  20. Andreea
  21. Andreea