© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1
USER INTERFACE CUSTOMIZAT ION FOR AEM 6
P R E S E N T E D B Y
Damien Antipa
Gilles Knobloch
November 18th, 2014
© 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 Launches & Sling Resource Merger
Damien Antipa, Senior UX Engineer
Gilles Knobloch, Engineering Manager
@visiongeist
@gilknob
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
Introduction
New user experience introduced in 5.6.0
Challenges
- Extensible technology for partners/customers
- Guarantee upgradability
Goal of the session
Understand how to extend admin screens and page authoring
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
Extend
Admin screensCreate
Admin screens
Page
Authoring
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
Fundamental Concepts
- UI based on content nodes
- Sling Resource Merger
- Granite UI Include
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
/libs
/wcm
/core
/content
/siteadmin
…
6
How were you used to overlay?
/new-feature
/custom-feature
- All properties duplicated
- Blocking for upgrades
/apps/wcm/core/content/siteadmin
- Currently, need to copy
the whole subtree
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
/libs
/wcm
/core
/content
/sites
…
7
How does it work now?
/new-feature
/custom-feature
(/new-feature)
/apps/wcm/core/content/sites
- Extend within an
almost empty sub-
tree
- Only needed
nodes/properties need to
be overlaid
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
Sling Resource Merger
- Custom resource provider: /mnt/overlay
- 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 debugging
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Sling Resource Merger
Add or override a property
Create the corresponding node structure and property within /apps(the property will have priority based on Sling Resource Resolver configuration)
Changing the type of the property is supported
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
Sling Resource Merger
Hide one or more properties
Create the corresponding node structure and property within /apps,
Add sling:hideProperties property: list of properties to hide (String[])
* wildcard can be used to hide all properties
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
Sling Resource Merger
Hide a resource (and its children)
Create the corresponding node structure within /apps
Set sling:hideResource to true (Boolean)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
Sling Resource Merger
Hide children of a resource (but keep the properties of the resource)
Create the corresponding node structure within /apps,
Add sling:hideChildren property: list of children to hide (String[])
* wildcard can be used to hide all children
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
Sling Resource Merger
Reorder resources
Create the corresponding node within /apps
Set sling:orderBefore to the name of the sibling where
that node should be reordered before (String)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Extend existing admin screen
Check our examples!
- Custom documentation links
(sling:hideChildren, sling:orderBefore)
- Additional toolbar action
- Restrict Create Site to administrators
(sling:hideProperties, custom rendering condition)
- Default layout to list view, removed toggle to card view
(sling:hideResource)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Create a custom admin screen
Launches Console
- Custom console
- Custom menu entry
- Specific actions
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
Create a custom admin screen
Root space
for Launches
console
Granite UI page resourcePage definition
Custom components (styles, scripts, JSPs)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
Create a custom admin screen
Add in
navigationGive same ID as your console and point
to it
Specify location in the tree
Extend navigation
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
Granite UI Includes
granite/ui/components/foundation/include
Can be used to extend component dialogs
Avoid duplicating
same subtrees of
nodes
/apps/one /apps/two
/apps/commo
n
Specify path to
include
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
Page Authoring in AEM 6.0
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
Customer Page = ContentFrame
Editing Features = EditorFrame
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
:
21
Sidepanel
AssetGroups
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
Components
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
These are Editables
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
What is an Editable?
- is an instance of a component on a page
- allows access to the page’s HTML
- is aware of its JCR path and edit configuration
- the JCR node lives under the page’s “jcr:content”
- represented through a Javascript object
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
An Editable in Javascript
- All Editable’s of the current page are accessible
through Granite.author.store
- Constructor: Granite.author.Editable
- It is a central object for manipulation and retrieval
- Allows to add listeners (afterEdit, beforeDelete, beforeMove etc).
- Exposes the configuration of the component
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
These are Overlays
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
Toolbar
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Inplace Editing
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
Layer
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
What is a layer?
- Bundles View/Rendering and Functionality
- Only 1 Layer is active
- Build-in layers: Edit, Preview, Annotate, Developer,
Target
- Have to play nicely with each other
- Defines a state of the Authoring User Interface
- Full control about the whole experience
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
Layer Switcher
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- Toolbar action
- Inplace Editor
- Custom Layer
- Page action
Extending the Page Authoring
- Assetfinder Group
- Dialog Conversion
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
Before we start…
- Javascript Namespace: Granite.author
- Overlays are managed by Granite.author.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
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
Custom toolbar action1
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Still working: Adding custom actions to components
37
1
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
- Javascript implementation
- toolbar entry definition
- component independent actions
1 Add Toolbar Button
© 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;
}
}
1
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
EXAMPLE: Adding a screenshot functionality1
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom page action
41
2
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
2
/apps/wcm/core/content/editor/jcr:content/content/items/conte
nt/header/items/headerbar/items/myCustomButton
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
Inplace Editors3
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
Create a Hybrid Editor3
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
var textImageEditorConfig = {
editors: [
{
editorType: "text",
imageClass: "coral-Icon coral-Icon--text"
},
{
editorType: "image",
imageClass: "coral-Icon coral-Icon--image"
}
]
};
textImageEditor =
new Granite.editor.HybridEditor(textImageEditorConfig);
// register the editor to the editor registry
Granite.author.editor.register('textimage', textImageEditor);
3
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
Creating a layer
- Important objects: layerManager, overlayManager,
persistence
- Inherit from Build-in layers like Edit
- Change the view and actions
4
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- Adding a new asset group
51
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
5
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
Dialog Conversion
- Console to convert Classic UI dialogs into Touch UI dialogsHelps to create the structure
ExtJS code needs to be migrated separately
- Plugin-basedContent nodes patterns
Implement OSGi service
6
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
Extend
Admin screens
Create
Admin screens
Page
Authoring
Wrap-up
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54
Resources
- CRXDE Lite overlay extension tool on Package Share
- Official documentation: http://adobe.ly/1meXUn7
Customizing consoles and page authoring
- Examples on Github: http://github.com/Adobe-Marketing-Cloud
- CQGems recording: http://adobe.ly/1mwhsZZ
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
Please give us feedback: http://adobe.ly/1pCZJ4h
Questions & Comments?