http://dev.day.com/content/ddc/en/gems/user-interface-customization-for-aem-6.html

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?