SlideShare a Scribd company logo
User Interface
Customisation
in AEM 6.1
Christian Meyer
@martinischeery
Andreea Corbeanu
@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 Side Admin Search Rail
• Customize the Page Authoring Side Panel Asset Search
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?
Ad

Recommended

UI Customization in AEM 6.0
UI Customization in AEM 6.0
Gilles Knobloch
 
User interface customization for aem6 circuit
User interface customization for aem6 circuit
Damien Antipa
 
AEM 6.1 User Interface Customization
AEM 6.1 User Interface Customization
Christian Meyer
 
User Interface customization for AEM 6
User Interface customization for AEM 6
Damien Antipa
 
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
Abhinit Bhatnagar
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
ICF CIRCUIT
 
AEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UI
Gilles Knobloch
 
AEM Evernote Sync
AEM Evernote Sync
Kevin Nennig
 
Sling Dynamic Include
Sling Dynamic Include
Tomasz Rękawek
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
Python Ireland
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core Components
Gabriel Walt
 
Building assets on the fly with Node.js
Building assets on the fly with Node.js
Acquisio
 
AEM Best Practices for Component Development
AEM Best Practices for Component Development
Gabriel Walt
 
SharePoint 2010 Training Session 5
SharePoint 2010 Training Session 5
Usman Zafar Malik
 
SharePoint 2013 Hosted App Presentation by Roy Kim
SharePoint 2013 Hosted App Presentation by Roy Kim
Roy Kim
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Netcetera
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
Bojana Popovska
 
Sling Models Overview
Sling Models Overview
Justin Edelson
 
SharePoint Hosted Add-in with AngularJS and Bootstrap
SharePoint Hosted Add-in with AngularJS and Bootstrap
Roy Kim
 
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
 
Adobe AEM core components
Adobe AEM core components
Lokesh BS
 
AEM GEMS Session Template Editor Sept 14 2016
AEM GEMS Session Template Editor Sept 14 2016
AdobeMarketingCloud
 
Gabriel Gayhart - XML Pointer File Example
Gabriel Gayhart - XML Pointer File Example
linkedinsys
 
AEM Sightly Deep Dive
AEM Sightly Deep Dive
Gabriel Walt
 
Android Materials Design
Android Materials Design
Mohammad Aljobairi
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
AEM HUB
 
Lab: Developing with the extension library
Lab: Developing with the extension library
WorkFlowStudios
 
UKLUG 2009 - Extending Domino Designer on Eclipse
UKLUG 2009 - Extending Domino Designer on Eclipse
René Winkelmeyer
 

More Related Content

What's hot (20)

Sling Dynamic Include
Sling Dynamic Include
Tomasz Rękawek
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
Python Ireland
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core Components
Gabriel Walt
 
Building assets on the fly with Node.js
Building assets on the fly with Node.js
Acquisio
 
AEM Best Practices for Component Development
AEM Best Practices for Component Development
Gabriel Walt
 
SharePoint 2010 Training Session 5
SharePoint 2010 Training Session 5
Usman Zafar Malik
 
SharePoint 2013 Hosted App Presentation by Roy Kim
SharePoint 2013 Hosted App Presentation by Roy Kim
Roy Kim
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Netcetera
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
Bojana Popovska
 
Sling Models Overview
Sling Models Overview
Justin Edelson
 
SharePoint Hosted Add-in with AngularJS and Bootstrap
SharePoint Hosted Add-in with AngularJS and Bootstrap
Roy Kim
 
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
 
Adobe AEM core components
Adobe AEM core components
Lokesh BS
 
AEM GEMS Session Template Editor Sept 14 2016
AEM GEMS Session Template Editor Sept 14 2016
AdobeMarketingCloud
 
Gabriel Gayhart - XML Pointer File Example
Gabriel Gayhart - XML Pointer File Example
linkedinsys
 
AEM Sightly Deep Dive
AEM Sightly Deep Dive
Gabriel Walt
 
Android Materials Design
Android Materials Design
Mohammad Aljobairi
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
AEM HUB
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
Python Ireland
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core Components
Gabriel Walt
 
Building assets on the fly with Node.js
Building assets on the fly with Node.js
Acquisio
 
AEM Best Practices for Component Development
AEM Best Practices for Component Development
Gabriel Walt
 
SharePoint 2010 Training Session 5
SharePoint 2010 Training Session 5
Usman Zafar Malik
 
SharePoint 2013 Hosted App Presentation by Roy Kim
SharePoint 2013 Hosted App Presentation by Roy Kim
Roy Kim
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Netcetera
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
Bojana Popovska
 
SharePoint Hosted Add-in with AngularJS and Bootstrap
SharePoint Hosted Add-in with AngularJS and Bootstrap
Roy Kim
 
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
 
Adobe AEM core components
Adobe AEM core components
Lokesh BS
 
AEM GEMS Session Template Editor Sept 14 2016
AEM GEMS Session Template Editor Sept 14 2016
AdobeMarketingCloud
 
Gabriel Gayhart - XML Pointer File Example
Gabriel Gayhart - XML Pointer File Example
linkedinsys
 
AEM Sightly Deep Dive
AEM Sightly Deep Dive
Gabriel Walt
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
AEM HUB
 

Similar to CIRCUIT 2015 - UI Customization in AEM 6.1 (9)

Lab: Developing with the extension library
Lab: Developing with the extension library
WorkFlowStudios
 
UKLUG 2009 - Extending Domino Designer on Eclipse
UKLUG 2009 - Extending Domino Designer on Eclipse
René Winkelmeyer
 
Demo2
Demo2
Nuchit Atjanawat
 
Understanding and Configuring the FO Plug-in for Generating PDF Files: Part I...
Understanding and Configuring the FO Plug-in for Generating PDF Files: Part I...
Suite Solutions
 
Advanced Zen
Advanced Zen
InterSystems Corporation
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2
Byrne Reese
 
Introduction to DaVinci
Introduction to DaVinci
DavinciTool
 
Anatomy of a UI Control - Extension Library Case Study
Anatomy of a UI Control - Extension Library Case Study
gregorbyte
 
Lab: Developing with the extension library
Lab: Developing with the extension library
WorkFlowStudios
 
UKLUG 2009 - Extending Domino Designer on Eclipse
UKLUG 2009 - Extending Domino Designer on Eclipse
René Winkelmeyer
 
Understanding and Configuring the FO Plug-in for Generating PDF Files: Part I...
Understanding and Configuring the FO Plug-in for Generating PDF Files: Part I...
Suite Solutions
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2
Byrne Reese
 
Introduction to DaVinci
Introduction to DaVinci
DavinciTool
 
Anatomy of a UI Control - Extension Library Case Study
Anatomy of a UI Control - Extension Library Case Study
gregorbyte
 
Ad

More from ICF CIRCUIT (12)

CIRCUIT 2015 - Hybrid App Development with AEM Apps
CIRCUIT 2015 - Hybrid App Development with AEM Apps
ICF CIRCUIT
 
CIRCUIT 2015 - AEM Infrastructure Automation with Chef Cookbooks
CIRCUIT 2015 - AEM Infrastructure Automation with Chef Cookbooks
ICF CIRCUIT
 
CIRCUIT 2015 - Monitoring AEM
CIRCUIT 2015 - Monitoring AEM
ICF CIRCUIT
 
CIRCUIT 2015 - Akamai: Caching and Beyond
CIRCUIT 2015 - Akamai: Caching and Beyond
ICF CIRCUIT
 
CIRCUIT 2015 - Free Beer and Testing
CIRCUIT 2015 - Free Beer and Testing
ICF CIRCUIT
 
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
ICF CIRCUIT
 
CIRCUIT 2015 - Glimpse of perceptual diff
CIRCUIT 2015 - Glimpse of perceptual diff
ICF CIRCUIT
 
CIRCUIT 2015 - Orchestrate your story with interactive video and web content
CIRCUIT 2015 - Orchestrate your story with interactive video and web content
ICF CIRCUIT
 
How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)
ICF CIRCUIT
 
Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM
ICF CIRCUIT
 
CIRCUIT 2015 - 10 Things Apache Sling Can Do
CIRCUIT 2015 - 10 Things Apache Sling Can Do
ICF CIRCUIT
 
Circuit 2015 Keynote - Carsten Ziegeler
Circuit 2015 Keynote - Carsten Ziegeler
ICF CIRCUIT
 
CIRCUIT 2015 - Hybrid App Development with AEM Apps
CIRCUIT 2015 - Hybrid App Development with AEM Apps
ICF CIRCUIT
 
CIRCUIT 2015 - AEM Infrastructure Automation with Chef Cookbooks
CIRCUIT 2015 - AEM Infrastructure Automation with Chef Cookbooks
ICF CIRCUIT
 
CIRCUIT 2015 - Monitoring AEM
CIRCUIT 2015 - Monitoring AEM
ICF CIRCUIT
 
CIRCUIT 2015 - Akamai: Caching and Beyond
CIRCUIT 2015 - Akamai: Caching and Beyond
ICF CIRCUIT
 
CIRCUIT 2015 - Free Beer and Testing
CIRCUIT 2015 - Free Beer and Testing
ICF CIRCUIT
 
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
ICF CIRCUIT
 
CIRCUIT 2015 - Glimpse of perceptual diff
CIRCUIT 2015 - Glimpse of perceptual diff
ICF CIRCUIT
 
CIRCUIT 2015 - Orchestrate your story with interactive video and web content
CIRCUIT 2015 - Orchestrate your story with interactive video and web content
ICF CIRCUIT
 
How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)
ICF CIRCUIT
 
Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM
ICF CIRCUIT
 
CIRCUIT 2015 - 10 Things Apache Sling Can Do
CIRCUIT 2015 - 10 Things Apache Sling Can Do
ICF CIRCUIT
 
Circuit 2015 Keynote - Carsten Ziegeler
Circuit 2015 Keynote - Carsten Ziegeler
ICF CIRCUIT
 
Ad

Recently uploaded (20)

Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 

CIRCUIT 2015 - UI Customization in AEM 6.1