Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User interface customization for aem6 circuit

6,421 views

Published on

Published in: Technology, Art & Photos
  • Sorry - found it cannot use the path with .infinity.json like xtype cqinclude. Removed ",infinity.json" it works!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slide 18: Granite UI Include does not working for touch UI dialog. Could you provide an example?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

User interface customization for aem6 circuit

  1. 1. USER INTERFACE CUSTOMIZATION FOR AEM 6 P R E S E N T E D B Y Damien Antipa Gilles Knobloch © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1 November 18th, 2014
  2. 2. Gilles Knobloch, Engineering Manager 4 years of AEM experience Working on AEM/Granite/Coral Architect of the Launches & Sling Resource Merger @gilknob Damien Antipa, Senior UX Engineer Working on AEM/Granite/Coral and wherever Javascript is used @visiongeist © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  3. 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. 3
  4. 4. Extend Admin screens Create Admin screens © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Page Authoring
  5. 5. Fundamental Concepts © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 - UI based on content nodes - Sling Resource Merger - Granite UI Include
  6. 6. How were you used to overlay? © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. /libs /wcm /core /content /siteadmin … 6 /new-feature /custom-feature - All properties duplicated - Blocking for upgrades /apps/wcm/core/content/siteadmin - Currently, need to copy the whole subtree
  7. 7. How does it work now? © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. /libs /wcm /core /content /sites … /apps/wcm/core/content/sites 7 /new-feature /custom-feature (/new-feature) - Extend within an almost empty sub-tree - Only needed nodes/properties need to be overlaid
  8. 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. 8
  9. 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. 9
  10. 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. 10
  11. 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. 11
  12. 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. 12
  13. 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. 13
  14. 14. 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.
  15. 15. Create a custom admin screen Launches Console - Custom console - Custom menu entry - Specific actions © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  16. 16. Create a custom admin screen Root space for Launches console Custom components (styles, scripts, JSPs) Page definition Granite UI page resource © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  17. 17. Create a custom admin screen Add in navigation Give same ID as your console and point Extend navigation © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 to it Specify location in the tree
  18. 18. Granite UI Includes granite/ui/components/foundation/include Avoid duplicating same subtrees of nodes Specify path to include /apps/one /apps/two /apps/commo n Can be used to extend component dialogs © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  19. 19. Page Authoring in AEM 6.0 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  20. 20. Customer Page = ContentFrame Editing Features = EditorFrame © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  21. 21. : AssetGroups © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 Sidepanel
  22. 22. Components © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
  23. 23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 These are Editables
  24. 24. What is an Editable? - is an instance of a component on a page - the JCR node lives under the page’s “jcr:content” - represented through a Javascript object - allows access to the page’s HTML - is aware of its JCR path and edit configuration © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  25. 25. An Editable in Javascript - It is a central object for manipulation and retrieval - Exposes the configuration of the component - Allows to add listeners (afterEdit, beforeDelete, beforeMove etc). - Constructor: Granite.author.Editable - All Editable’s of the current page are accessible through Granite.author.store © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
  26. 26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 These are Overlays
  27. 27. Toolbar © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  29. 29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  30. 30. Inplace Editing © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  31. 31. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 Layer
  32. 32. What is a layer? - Defines a state of the Authoring User Interface - Bundles View/Rendering and Functionality - Only 1 Layer is active - Have to play nicely with each other - Full control about the whole experience - Build-in layers: Edit, Preview, Annotate, Developer, Target © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
  33. 33. Layer Switcher © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  34. 34. Extending the Page Authoring © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. - Toolbar action - Page action - Inplace Editor - Custom Layer - Assetfinder Group - Dialog Conversion
  35. 35. Before we start… - ClientLib category hook: cq.authoring.editor.hook - Javascript Namespace: Granite.author - Overlays are managed by Granite.author.overlayManager - 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
  36. 36. 1 Custom toolbar action © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
  37. 37. Still working: Adding custom actions to components © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 1
  38. 38. 1 Add Toolbar Button - Javascript implementation - component independent actions - toolbar entry definition © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
  39. 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; } } 1 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
  40. 40. 1 EXAMPLE: Adding a screenshot functionality © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  41. 41. Custom page action © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41 2
  42. 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. 42
  43. 43. 3 Inplace Editors © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  44. 44. 3 cq:inplaceEditing/editorType = “title” © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
  45. 45. 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
  46. 46. 3 Create a Hybrid Editor © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
  47. 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. 47
  48. 48. Creating a layer - Inherit from Build-in layers like Edit - Important objects: layerManager, overlayManager, persistence - Change the view and actions 4 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
  49. 49. 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
  50. 50. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  51. 51. Assetfinder - Adding a new asset group - Handling the rendering Granite.author.ui.assetFinder © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51 - Handling the Drag&Drop Granite.author.dropController - Handling the Persistence Granite.author.edit.actions or Granite.author.persistence 5
  52. 52. Dialog Conversion - Console to convert Classic UI dialogs into Touch UI dialogs Helps to create the structure ExtJS code needs to be migrated separately - Plugin-based Content nodes patterns Implement OSGi service 6 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  53. 53. Extend Admin screens Create Admin screens © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53 Page Authoring Wrap-up
  54. 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. 54
  55. 55. Questions & Comments? Please give us feedback: http://adobe.ly/1pCZJ4h © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56

×