• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User interface customization for aem6 circuit
 

User interface customization for aem6 circuit

on

  • 738 views

 

Statistics

Views

Total Views
738
Views on SlideShare
686
Embed Views
52

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 52

https://twitter.com 38
http://www.slideee.com 13
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User interface customization for aem6 circuit User interface customization for aem6 circuit Presentation Transcript

    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1 User Interface Customization for AEM 6 ! ! ! ! Gilles Knobloch Damien Antipa June 25th, 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
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 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. 5 Extend
 Admin screens Create 
 Admin screens Page 
 Authoring
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 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 … 7 How were you used to overlay? - Currently, need to copy the whole subtree - All properties duplicated - Blocking for upgrades /new-feature /custom-feature /apps/wcm/core/content/
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. /libs /wcm /core /content /sites … 8 How does it work now? - Extend within an almost empty sub-tree - Only needed nodes/properties need to be overlaid /new-feature /custom-feature /apps/wcm/core/content/sites (/new-feature)
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Sling Resource Merger http://bit.ly/1ot0Zn7 ! - 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. 10 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. 11 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. 12 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. 13 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. 14 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. 15 Extend existing admin screen Sling Resource Merger is your friend! ! Summary - 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 16 Launches Console - Custom console - Custom menu entry - Specific actions
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 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. 18 Create a custom admin screen Add in navigation Give 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. 19 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/ common Specify path to include
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 Page Authoring in AEM 6.0
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 Customer Page = ContentFrame Editing Features = EditorFrame
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. : 22 Sidepanel AssetGroups
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 Components
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 These are Editables
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 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. 26 What does an Editable do for me? - 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
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27 These are Overlays
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 Toolbar
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29 Inplace Editing
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 Layer
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 What is a layer? - View and Functionality - Layers can be activated one by one - Build-in layers: Edit, Preview, 
 Annotate, Developer, Target - What can I do with a layer? What ever you want. 
 (but please cleanup:-)
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 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
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 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. 35 Custom toolbar action1
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Still working: Adding custom actions to components 36 1
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 - Javascript implementation - toolbar entry definition - component independent actions 1 Add Toolbar Button
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 '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;! }! }! 1
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 EXAMPLE: Adding a screenshot functionality1
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Custom page action 40 2
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41 2 /apps/wcm/core/content/editor/jcr:content/content/items/ content/header/items/headerbar/items/myCustomButton
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42 Inplace Editors3
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43 3 cq:inplaceEditing/editorType = “title”
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44 var titleEditor = {! ! ! setUp: function (editable) {! ! ! },! ! ! tearDown = function (editable) {! ! ! }! ! };! ! Granite.author.editor.register(‘title', titleEditor);! 3
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 Create a Hybrid Editor3
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46 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. 47 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. 48 var MsmLayer = function () {! // Call super constructor! this.constructor.prototype.constructor.call(this, 
 ! ! "MSM", "coral-Icon--link");! };! ! MsmLayer.prototype = new Granite.author.Layer();! ! ! MsmLayer.prototype.setUp = function () {! // allow user interaction with the iframe content (e.g., click on links)! Granite.author.ContentFrame.showFullScreenMask(false);! ! // Close the sidepanel! Granite.author.SidePanel.close();! };! ! MsmLayer.prototype.tearDown = function () {! // prevent user interaction with the iframe content (e.g., click on links)! Granite.author.ContentFrame.showFullScreenMask(true);! };! ! // register at the manager! Granite.author.layerManager.registerLayer(new MsmLayer());! 4
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. - Adding a new asset group 50 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. 51 Extend
 Admin screens Create 
 Admin screens Page 
 Authoring Wrap-up
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52 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. X Github examples https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-customize-sites https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-toolbar-screenshot https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-layer-msm https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-new-console https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-header-backtosites https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-assetfinder-flickr
    • © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53 Please give us feedback: http://adobe.ly/1pCZJ4h Questions & Comments?