Submit Search
Upload
User Interface customization for AEM 6
•
33 likes
•
18,574 views
Damien Antipa
Follow
http://dev.day.com/content/ddc/en/gems/user-interface-customization-for-aem-6.html
Read less
Read more
Software
Technology
Business
Report
Share
Report
Share
1 of 54
Recommended
Sling Models Overview
Sling Models Overview
Justin Edelson
Sling models by Justin Edelson
Sling models by Justin Edelson
AEM HUB
AEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt
Experience and Content Fragment
Experience and Content Fragment
Heena Madan
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
Springboot introduction
Springboot introduction
Sagar Verma
AEM and Sling
AEM and Sling
Lo Ki
Adobe AEM - From Eventing to Job Processing
Adobe AEM - From Eventing to Job Processing
Carsten Ziegeler
Recommended
Sling Models Overview
Sling Models Overview
Justin Edelson
Sling models by Justin Edelson
Sling models by Justin Edelson
AEM HUB
AEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt
Experience and Content Fragment
Experience and Content Fragment
Heena Madan
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
Stefano Celentano
Springboot introduction
Springboot introduction
Sagar Verma
AEM and Sling
AEM and Sling
Lo Ki
Adobe AEM - From Eventing to Job Processing
Adobe AEM - From Eventing to Job Processing
Carsten Ziegeler
AEM - Client Libraries
AEM - Client Libraries
Prabhdeep Singh
Multi Site Manager
Multi Site Manager
shivani garg
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Rodrigo Cândido da Silva
Rest and Sling Resolution
Rest and Sling Resolution
DEEPAK KHETAWAT
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
Elastic search adaptto2014
Elastic search adaptto2014
Vivek Sachdeva
Angular interview questions
Angular interview questions
Goa App
asp-net.pptx
asp-net.pptx
Fajar Baskoro
Rolls-Royce UseCase: Capella for large complex mechanical systems
Rolls-Royce UseCase: Capella for large complex mechanical systems
Obeo
UDA-Plugin UDA. Guia de desarrollo
UDA-Plugin UDA. Guia de desarrollo
Ander Martinez
Integration patterns in AEM 6
Integration patterns in AEM 6
Yuval Ararat
UDA-Componentes RUP. Tabla Avanzada
UDA-Componentes RUP. Tabla Avanzada
Ander Martinez
UDA-Componentes RUP. Botonera
UDA-Componentes RUP. Botonera
Ander Martinez
Spring Core
Spring Core
Pushan Bhattacharya
Spring boot
Spring boot
Pradeep Shanmugam
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Eliran Eliassy
JavaScript for ABAP Programmers - 1/7 Introduction
JavaScript for ABAP Programmers - 1/7 Introduction
Chris Whealy
/path/to/content - the Apache Jackrabbit content repository
/path/to/content - the Apache Jackrabbit content repository
Jukka Zitting
Why Vue.js?
Why Vue.js?
Jonathan Goode
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
AEM 6.1 User Interface Customization
AEM 6.1 User Interface Customization
Christian Meyer
AEM Best Practices for Component Development
AEM Best Practices for Component Development
Gabriel Walt
More Related Content
What's hot
AEM - Client Libraries
AEM - Client Libraries
Prabhdeep Singh
Multi Site Manager
Multi Site Manager
shivani garg
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Rodrigo Cândido da Silva
Rest and Sling Resolution
Rest and Sling Resolution
DEEPAK KHETAWAT
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
Elastic search adaptto2014
Elastic search adaptto2014
Vivek Sachdeva
Angular interview questions
Angular interview questions
Goa App
asp-net.pptx
asp-net.pptx
Fajar Baskoro
Rolls-Royce UseCase: Capella for large complex mechanical systems
Rolls-Royce UseCase: Capella for large complex mechanical systems
Obeo
UDA-Plugin UDA. Guia de desarrollo
UDA-Plugin UDA. Guia de desarrollo
Ander Martinez
Integration patterns in AEM 6
Integration patterns in AEM 6
Yuval Ararat
UDA-Componentes RUP. Tabla Avanzada
UDA-Componentes RUP. Tabla Avanzada
Ander Martinez
UDA-Componentes RUP. Botonera
UDA-Componentes RUP. Botonera
Ander Martinez
Spring Core
Spring Core
Pushan Bhattacharya
Spring boot
Spring boot
Pradeep Shanmugam
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Eliran Eliassy
JavaScript for ABAP Programmers - 1/7 Introduction
JavaScript for ABAP Programmers - 1/7 Introduction
Chris Whealy
/path/to/content - the Apache Jackrabbit content repository
/path/to/content - the Apache Jackrabbit content repository
Jukka Zitting
Why Vue.js?
Why Vue.js?
Jonathan Goode
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
What's hot
(20)
AEM - Client Libraries
AEM - Client Libraries
Multi Site Manager
Multi Site Manager
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Workshop Microservices - Microservices com Spring Cloud e Netflix OSS
Rest and Sling Resolution
Rest and Sling Resolution
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Elastic search adaptto2014
Elastic search adaptto2014
Angular interview questions
Angular interview questions
asp-net.pptx
asp-net.pptx
Rolls-Royce UseCase: Capella for large complex mechanical systems
Rolls-Royce UseCase: Capella for large complex mechanical systems
UDA-Plugin UDA. Guia de desarrollo
UDA-Plugin UDA. Guia de desarrollo
Integration patterns in AEM 6
Integration patterns in AEM 6
UDA-Componentes RUP. Tabla Avanzada
UDA-Componentes RUP. Tabla Avanzada
UDA-Componentes RUP. Botonera
UDA-Componentes RUP. Botonera
Spring Core
Spring Core
Spring boot
Spring boot
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
JavaScript for ABAP Programmers - 1/7 Introduction
JavaScript for ABAP Programmers - 1/7 Introduction
/path/to/content - the Apache Jackrabbit content repository
/path/to/content - the Apache Jackrabbit content repository
Why Vue.js?
Why Vue.js?
Angular Dependency Injection
Angular Dependency Injection
Viewers also liked
AEM 6.1 User Interface Customization
AEM 6.1 User Interface Customization
Christian Meyer
AEM Best Practices for Component Development
AEM Best Practices for Component Development
Gabriel Walt
User interface customization for aem6 circuit
User interface customization for aem6 circuit
Damien Antipa
UI Customization in AEM 6.0
UI Customization in AEM 6.0
Gilles Knobloch
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
Abhinit Bhatnagar
REST in AEM
REST in AEM
Roy Fielding
The six key steps to AEM architecture
The six key steps to AEM architecture
Ashokkumar T A
CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1
ICF CIRCUIT
AEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UI
Gilles Knobloch
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Damien Antipa
(Re)discover your AEM
(Re)discover your AEM
Jakub Wadolowski
Adobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer Introduction
Yash Mody
AEM (CQ) Dispatcher Security and CDN+Browser Caching
AEM (CQ) Dispatcher Security and CDN+Browser Caching
Andrew Khoury
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
François Le Droff
Adobe AEM Commerce with hybris
Adobe AEM Commerce with hybris
Paolo Mottadelli
New Repository in AEM 6 by Michael Marth
New Repository in AEM 6 by Michael Marth
AEM HUB
Touching the AEM component dialog by Mateusz Chromiński
Touching the AEM component dialog by Mateusz Chromiński
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...
AEM HUB
Adobe 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
Krishna Chaitanya Palla
Accelerate Your Next AEM Project
Accelerate Your Next AEM Project
Mark Kelley
Viewers also liked
(20)
AEM 6.1 User Interface Customization
AEM 6.1 User Interface Customization
AEM Best Practices for Component Development
AEM Best Practices for Component Development
User interface customization for aem6 circuit
User interface customization for aem6 circuit
UI Customization in AEM 6.0
UI Customization in AEM 6.0
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
REST in AEM
REST in AEM
The six key steps to AEM architecture
The six key steps to AEM architecture
CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1
AEM 6.0 Touch-optimized UI
AEM 6.0 Touch-optimized UI
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
(Re)discover your AEM
(Re)discover your AEM
Adobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer Introduction
AEM (CQ) Dispatcher Security and CDN+Browser Caching
AEM (CQ) Dispatcher Security and CDN+Browser Caching
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Adobe AEM Commerce with hybris
Adobe AEM Commerce with hybris
New Repository in AEM 6 by Michael Marth
New Repository in AEM 6 by Michael Marth
Touching the AEM component dialog by Mateusz Chromiński
Touching the AEM component dialog by Mateusz Chromiński
Building Quality into the AEM Publication Workflow with Active Standards by D...
Building Quality into the AEM Publication Workflow with Active Standards by D...
Adobe 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
Accelerate Your Next AEM Project
Similar to User Interface customization for AEM 6
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
Joseph Labrecque
Open Architecture in the Adobe Marketing Cloud - Summit 2014
Open Architecture in the Adobe Marketing Cloud - Summit 2014
Paolo Mottadelli
CODE BLUE 2014 : Persisted: The active use and exploitation of Microsoft's Ap...
CODE BLUE 2014 : Persisted: The active use and exploitation of Microsoft's Ap...
CODE BLUE
ColdFusion 11 Overview - CFSummit 2013
ColdFusion 11 Overview - CFSummit 2013
Rupesh Kumar
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
AdobeMarketingCloud
Umbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup Presentation
Bluegrass Digital
Sightly_techInsight
Sightly_techInsight
Purnendra Pratap Singh
What's new in designer
What's new in designer
Raj J (Rajendran)
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)
Gabriel Walt
Adobe Stock Integration community project
Adobe Stock Integration community project
Magecom UK Limited
SPA Editor - Adobe Experience Manager Sites
SPA Editor - Adobe Experience Manager Sites
Gabriel Walt
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
AEM HUB
Android Development with Flash Platform
Android Development with Flash Platform
Mihai Corlan
EVOLVE'15 | Enhance | Bob O'Conner & Kevin Nenning | Capturing Existing Cont...
EVOLVE'15 | Enhance | Bob O'Conner & Kevin Nenning | Capturing Existing Cont...
Evolve The Adobe Digital Marketing Community
AEM Evernote Sync
AEM Evernote Sync
Kevin Nennig
Sst hackathon express
Sst hackathon express
Aeshan Wijetunge
Securing Containers - Sathyajit Bhat - Adobe
Securing Containers - Sathyajit Bhat - Adobe
CodeOps Technologies LLP
Similar to User Interface customization for AEM 6
(20)
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
Open Architecture in the Adobe Marketing Cloud - Summit 2014
Open Architecture in the Adobe Marketing Cloud - Summit 2014
CODE BLUE 2014 : Persisted: The active use and exploitation of Microsoft's Ap...
CODE BLUE 2014 : Persisted: The active use and exploitation of Microsoft's Ap...
ColdFusion 11 Overview - CFSummit 2013
ColdFusion 11 Overview - CFSummit 2013
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
IMMERSE'16 Intro to Adobe Experience Manager & Adobe Marketing Cloud
Umbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup Presentation
Sightly_techInsight
Sightly_techInsight
What's new in designer
What's new in designer
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Modernizing Adobe Experience Manager (AEM)
Modernizing Adobe Experience Manager (AEM)
Adobe Stock Integration community project
Adobe Stock Integration community project
SPA Editor - Adobe Experience Manager Sites
SPA Editor - Adobe Experience Manager Sites
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Android Development with Flash Platform
Android Development with Flash Platform
EVOLVE'15 | Enhance | Bob O'Conner & Kevin Nenning | Capturing Existing Cont...
EVOLVE'15 | Enhance | Bob O'Conner & Kevin Nenning | Capturing Existing Cont...
AEM Evernote Sync
AEM Evernote Sync
Sst hackathon express
Sst hackathon express
Securing Containers - Sathyajit Bhat - Adobe
Securing Containers - Sathyajit Bhat - Adobe
Recently uploaded
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
Andreas Granig
EY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
Neo4j
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
umasea
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Ahmed Mohamed
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
Philip Schwarz
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
BradBedford3
MYjobs Presentation Django-based project
MYjobs Presentation Django-based project
AnoyGreter
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
Power Karaoke
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
VICTOR MAESTRE RAMIREZ
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio, Inc.
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
StefanoLambiase
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
Christina Lin
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
Hanief Utama
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
Wave PLM
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
gurkirankumar98700
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
OPEN KNOWLEDGE GmbH
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Tier1 app
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
Sujith Sukumaran
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
VICTOR MAESTRE RAMIREZ
Recently uploaded
(20)
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
EY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
MYjobs Presentation Django-based project
MYjobs Presentation Django-based project
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
User Interface customization for AEM 6
1.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 1 User Interface customization for AEM 6 CQ Gems May 7th, 2014 ! Gilles Knobloch Damien Antipa
2.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 2 working on AEM/Granite/Coral and wherever Javascript is used 4 years of AEM experience working on AEM/Granite/Coral architect of the Sling Resource Merger Damien Antipa, Senior UX Engineer Gilles Knobloch, Engineering Manager @visiongeist @gilknob
3.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 Introduction New UI: Mobile first, Desktop in mind
4.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Introduction - Granite UI introduced in 5.6.0 - Now spread across multiple UIs of the product - UI framework provides base components ! Challenges Extensible technology for partners/customers ! Goal of the session Understand how to extend admin screens and page authoring
5.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 Extending the Administration pages - Extend existing admin screen - Create a custom admin screen - Sling Resource Merger - Includes
6.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Sling Resource Merger https://issues.apache.org/jira/browse/SLING-2986 ! - Custom resource provider - Overlays of resources using resource resolver search paths - Working as a diff - Custom Sling vocabulary ! Overall goal: override in /apps, never touch /libs - Guarantees upgradability - Easier for customers to debug
7.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Sling Resource Merger Add or override a property ! Create the corresponding property within /apps (the property will have priority based on Sling Resource Resolver configuration) ! Changing the type of the property is supported
8.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 Sling Resource Merger Add or override a property
9.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Sling Resource Merger Delete one or more properties ! Create the corresponding node within /apps, Add sling:hideProperties property: list of properties to delete (String[]) ! * wildcard can be used to delete all the properties
10.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 Sling Resource Merger Delete one or more properties
11.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 Sling Resource Merger Delete a node (and its children) ! Create the corresponding node within /apps Set sling:hideResource to true (Boolean)
12.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 Sling Resource Merger Delete a node (and its children)
13.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 Sling Resource Merger Delete children of a node (but keep the properties of the node) ! Create the corresponding node within /apps, Add sling:hideChildren property: list of children to delete (String[]) ! * wildcard can be used to delete all the children
14.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 Sling Resource Merger Delete children of a node
15.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 Sling Resource Merger Reorder nodes ! Create the corresponding node within /apps Set sling:orderBefore to the name of the sibling where that node should be reordered before (String) ! TODO: support redefining the whole list of children
16.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 Sling Resource Merger Reorder nodes
17.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 Extend existing admin screen Sling Resource Merger is our friend! ! - Update root title for breadcrumb - Custom documentation links (sling:hideChildren, sling:orderBefore) - Additional toolbar action - Restrict Create Site to administrators (custom rendering condition) - Default layout to list view, removed toggle to card view (sling:hideResource)
18.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. Create a custom admin screen 18 Launches Console - Custom console - Custom menu entry - Specific actions
19.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 Create a custom admin screen Root space for Launches console Granite UI page resource Page definition Custom components (styles, scripts, JSPs)
20.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 Create a custom admin screen Add in navigation Extend navigation Give same ID as your console and point to it Specify location in the tree
21.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 Create a custom admin screen Custom action bar - Build your own components - Include the corresponding client libraries for custom actions
22.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Granite UI Includes granite/ui/components/foundation/include ! - Specify path to include Can be used to extend component dialogs
23.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 The new Page Authoring in AEM 6.0
24.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
25.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 Customer Page = ContentFrame Editing Features = EditorFrame
26.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 Layer switcher Layer switcher
27.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 27 These are Overlays
28.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 Sidepanel AssetGroups
29.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 29 Components
30.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 Toolbar
31.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 What is an Editable? - is an instance of a component on a page - allows access to the page’s DOM and its overlay - is aware of its JCR path and edit configuration - all Editable’s of the current page are accessible through Granite.author.store - Constructor: Granite.author.Editable - inherits from Granite.author.Inspectable
32.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 What is a layer? - A layer is an independent bundle of functionality which can be activated in order to manipulate or interact with the page - What can I do with a layer? What ever you want. (but please cleanup:-)
33.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. - Toolbar action - Inplace Editor - Custom Layer - Page action Extending the Page Authoring - Assetfinder Group
34.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 Before we start… - Javascript Namespace: Granite.author - Overlays are managed by overlayManager - ClientLib category hook: cq.authoring.editor.hook - Current page’s Editables are in Granite.author.store - A lot of page data is in Granite.author.page
35.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 35 Custom toolbar action
36.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. Still working: Adding custom actions to components 36
37.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 Still working: Adding custom actions to components
38.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 New: Manipulating the toolbar with Javascript - understand eventing in the authoring channel - use global objects - toolbar entry definition - component independent actions
39.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 'CUSTOM': {! icon: 'coral-Icon--gear',! text: Granite.I18n.get('Custom'),! handler: function (editable, param, target) {! alert('my custom action');! // do not close toolbar! return false;! },! condition: function (editable) {! // optional condition to show action! return !!editable.config.orderable;! },! render: function (dom) {! // custom rendering! return dom;! },! // could be executed when only one editable is selected! // default: false! isNonMulti: true ! }!
40.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 40 Adding a screenshot functionality
41.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. Custom page action 41 Add an action to page authoring toolbar Example: a button to translate the page
42.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 42 Custom page action - define as a header action - cq-Translate-action used as jQuery selector new action added under /apps extension to cq.authoring.editor client library
43.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 43 Inplace Editors
44.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 44 Create an Inplace Editor
45.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 var MyEditor = function () {! ! };! ! MyEditor.prototype.setUp = function (editable) {! ! };! ! MyEditor.prototype.tearDown = function (editable) {! ! };! ! Granite.author.editor.register(‘myeditor', new MyEditor());!
46.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 46 How we created the title editor - manipulate the Editable’s DOM
47.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 Create a Hybrid Editor
48.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 var textImageEditorConfig = {! editors: [! {! editorType: "text",! imageClass: "coral-Icon coral-Icon--text coral-Icon--sizeL"! },! {! editorType: "image",! imageClass: "coral-Icon coral-Icon--image coral-Icon--sizeL"! }! ]! };! ! Granite.author.editor.TextImageEditor = function () {! };! ! Granite.author.editor.TextImageEditor.prototype = ! new Granite.editor.HybridEditor(textImageEditorConfig);! ! // register the editor to the editor registry! Granite.author.editor.register('textimage', new Granite.editor.TextImageEditor());!
49.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 49 Creating a layer - Important objects: layerManager, overlayManager, persistence - Build-in layers: Edit, Preview, Annotation, Developer, Target - Change the view and actions
50.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 50 var MyLayer = function () {! // Call super constructor! this.constructor.prototype.constructor.call(this, "MyLayer", "coral-Icon--bug");! };! ! MyLayer.prototype = new author.Layer();! ! ! MyLayer.prototype.setUp = function () {! // allow user interaction with the iframe content (e.g., click on links)! author.ContentFrame.showFullScreenMask(false);! ! // Close the sidepanel! author.SidePanel.close();! };! ! MyLayer.prototype.tearDown = function () {! // prevent user interaction with the iframe content (e.g., click on links)! author.ContentFrame.showFullScreenMask(true);! };! ! // register at the manager! author.layerManager.registerLayer(new MyLayer());!
51.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
52.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. - Adding a new asset group 52 Assetfinder - Handling the Drag&Drop Granite.author.dropController - Handling the Persistence Granite.author.edit.actions or Granite.author.persistence - Handling the rendering Granite.author.ui.assetFinder
53.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 53 Resources Upcoming resources on Package Share - Sample packages - CRXDE Lite extension tool - Dialog conversion tool ! Extension points currently being documented
54.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 54 Questions & Comments?