UI Customization in AEM 6.0
•Download as PPTX, PDF•
6 likes•4,129 views
Get how to customize AEM 6 Touch-optimized UI. Showed at Evolve'14 conference in San Diego.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to UI Customization in AEM 6.0
Similar to UI Customization in AEM 6.0 (20)
Recently uploaded
Recently uploaded (20)
UI Customization in AEM 6.0
- 1. USER INTERFACE CUSTOMI ZAT ION 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. 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. 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. Extend Admin screens Create Admin screens © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Page Authoring
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 Custom components (styles, scripts, JSPs) Page definition Granite UI page resource © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
- 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. 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. Page Authoring in AEM 6.0 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
- 20. Customer Page = ContentFrame Editing Features = EditorFrame © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
- 21. : AssetGroups © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 Sidepanel
- 22. Components © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
- 23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 These are Editables
- 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. 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 These are Overlays
- 27. Toolbar © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
- 28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
- 29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
- 30. Inplace Editing © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
- 31. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 Layer
- 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. Layer Switcher © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
- 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. 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. 1 Custom toolbar action © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
- 37. Still working: Adding custom actions to components © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 1
- 38. 1 Add Toolbar Button - Javascript implementation - component independent actions - toolbar entry definition © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
- 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. 39
- 40. 1 EXAMPLE: Adding a screenshot functionality © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
- 41. Custom page action © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41 2
- 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. 3 Inplace Editors © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
- 44. 3 Create a Hybrid Editor © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
- 45. 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
- 46. 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
- 47. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
- 48. 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
- 49. 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
- 50. Extend Admin screens Create Admin screens © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53 Page Authoring Wrap-up
- 51. 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
- 52. Questions & Comments? Please give us feedback: http://adobe.ly/1pCZJ4h © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
Editor's Notes
- hi, welcome everyone. we are glad to have you here today and walk you through user interface customisation opportunities in Adobe Experience Manager 6.
- Before we start, let me quickly introduce ourselves. Damien is… working on our full UI technology stack and technical architect of the new page authoring For my part, I’m leading a small team of developers with focus on the UI framework, WCM administration and page authoring.
- As you may know, we did quite a lot of UX changes in the last couple of months for several reasons, one of them being the support for mobile devices. Therefore, we built our new UI to be mobile first, but still keeping desktop in mind by leveraging responsiveness features. It is now spread across multiple UIs of the product, and based on a UI framework that provides the foundation components.
- We are going to show 3 major ways of extending the AEM 6.0 UI: Modifying an existing admin screen Creating your own one And finally see how the page authoring interface can be customized
- You’re used to have your CQ pages composed of nodes and their appropriate rendering component. Admin UIs are now also built the same way, which easily allows integrating further features and customer extensions. So the structure is similar to what is stored under jcr:content nodes of your CQ pages. Sling resource merger and Includes are two features that help in customizing this node structure.
- You had to copy the whole subtree —- CLICK All nodes and properties were duplicated, and you added your customisations there —- CLICK If we did a major change, for instance a new feature —- CLICK, your duplication wouldn’t contain that change. You might also miss some important bug fixes, which you’ll have to re-apply by yourself.
- Now the idea is to extend within the apps tree only what’s required, in an almost empty subtree. —- CLICK So when you add a customisation —- CLICK —- and Adobe finally upgrades the console —- CLICK Any intermediate update will be got for free. —- CLICK — This is true for functional fixes, new features or even security fixes which might affect your system. In the end, your customisation is applied on top of the UI Adobe provides.
- What I just explained is now possible through a new feature that has been contributed to Sling, called Resource Merger, and is based on a custom resource provider, which is an OSGi service that reads a resource from the JCR repository, and returns it as an object. This object is built by iterating over the resource resolver search paths, and merging those resources together like a diff thanks to a custom Sling vocabulary but also respecting ACLs. Easier debugging for you, the developers.
- In order to add or override…
- If you want to hide one or more properties…
- You might also want to hide a whole subtree of resources. For this, you …
- Similar to hiding properties, you can also hide some children by using…
- And finally, you can also influence the order of the nodes by using… NO DEMO
- I recommend you to check our examples to see how this is applied to the Sites administration. As you can see, we can add a custom toolbar action or restrict the behaviour of another one to some group membership, even change the default layout, and all of this by just providing the corresponding diff under /apps. For you, partners and customers, Sling resource merger will really become your friend.
- You might not only want to extend existing admin screens, but also create your own ones to display and edit any kind of custom resources you are storing in the repository. As an example, we might want to create a new console for managing our Launches in the new UI — CLICK —- with its specific actions —- CLICK —- And we’re also going to append this item in the navigation. —- CLICK
- So for this, we’ll have a space in the repository for our new console —- CLICK This will contain some specific components with styles, scripts, etc. —- CLICK —- as well as the page definition —- CLICK By using granite UI foundation page like OOTB consoles —- CLICK —- you can build your custom screen using the same mechanisms and in the end getting the exact same user experience
- To add the item in the navigation, you extend the default navigation thanks to the Resource Merger —- CLICK —-map it to the right location and its corresponding id for the navigation —- CLICK — and eventually specify where in the navigation tree it should be displayed. NO DEMO
- The last item I’d like to talk about is Granite UI include component. If different places of your UIs are requiring the exact same node substree, —- CLICK —- you can store this subtree in a common place to avoid duplication —- CLICK —- and reference it from the include component as shown here. —- CLICK —- It can for instance be used if you want to extend a component dialog. You can reuse parts of the existing dialog in your extension. TODO: create a custom component with overlaid dialog and add it to samples (no demo)
- I will now continue with the third part of our presentation- the page authoring. As may have noticed. the authoring has slightly changed its look and feel :) In 5.6.1 it was already preview technology. To give an understanding of what i m talking about let me walk you through the basics and clarify some expressions.
- When you go to the siteadmin and click edit on a page you will see this view. This view consists of 2 parts. we call them frames. - PAUSE AND CLICK - On the right side in red you see the customer page. The page which will be delivered to your visitors. We call this frame ContentFrame - PAUSE AND CLICK - On the left side in green you see the editing capabilities. This frame is called EditorFrame and will deliver the editing capabilities to the authors. PAUSE We call these to elements frames, because they run in a separated context. This means that their styles sheets and javascript is not influencing each other. This is very important for the further extension of the authoring because you don’t want to have editing styles leaking into the customer page. no interference ----- Meeting Notes (18/11/14 11:57) -----
- Part of the EditorFrame is the Sidepanel. The Sidepanel provides multiple tabs on the very top. The first tab we see here is the assets tab. Assets can be added to the page through drag and drop - PAUSE AND CLICK - We can see images on the screen now but the side panel provides to show different groups of assets like videos and documents. The highlighted drop down will be important for one of our extension points.
- The second tab of the side panel shows all available components which can be added to the page.
- So back to the contentFrame. All the elements highlighted in red are called editables. It is important to understand what’s an Editable.
- instance of a component on a page it is a JCR node on the client side there it access to html dom node this object
- From the perspective of a developer… - find the definition of the object in the JS namespace Granite….
- A little bit more confusion. At the same visual position of the Editables there are also elements called OVERLAYS. While Editables build a connection to an HTML element inside of the ContentFrame, The overlays represent an HTML element in the editorframe. Overlays protect Editables from direct communication. They are invisible and react to user input. Any user interaction like click will happen on the Overlay instead.
- So what happens when we click on an Overlay. Usually we get a toolbar. The toolbar defines the action which can be done with the editable.
- In some cases if you double click you open an inplace editor. Like the image editor for example.
- The glue between all these elements and features are a concept called layer.
- New concept to make the page authoring more modular - State: Which gives you a way to change the way of rendering and functionality. For example you can control what happens when a user clicks on an overlay Or control how an overlay should be rendered Or show a custom sidepanel Layers are a new concept. independent bundle of functionality which can be activated in order to manipulate or interact with the page The glue. Each of them is loaded separately, completely control experience a lot of power, as long as u r responsible
- So lets finally dive into the actual extensibility opportunities. REMOVED: I must warn you, I will show QUITE SOME CODE on the next slides I will explain you 5 of the most important extension points
- - client library to add all JS for extension points. loaded in time. namespace contains all objects we are working with, DO NOT use for your stuff oM current loaded page editables page information like path, design, acl, components
- The first extension point we will have a look is the toolbar. So after clicking on an overlay we see a toolbar. And we want an additional action on this toolbar.
- The good news: As you used to do it you can still add your action to a component changing editConfig - this is working as before. —- Demo 1: create the nodes in /libs/foundation/components/image/cq:editConfig cq:actions=EDITANNOTATECOPYMOVEDELETEINSERT
- We can now also add actions to the component with JS This allows us to add actions which are not bound to a specific component, they can be global or restricted to any other property
- What you see here is a definition of an action in a toolbar as a Javascript Object. Lets have a look from top to bottom. icon, css class for the button icon text handler: function to be executed when the button is clicked (optional) rendering condition, button not shown if it returns false (optional) render function, change button style, (e.g. red bg)
- I will do a DEMO. In this example I build a button which renders the editable into an image. Therefor I am using an open source project called html2canvas. Does not make too much sense, image to image
- Our next extension point will be about creating new page actions. In the screenshot you can see I added a new button on the very top of the page. So when the button is clicked I want to perform an action like starting a workflow.
- This can be achieved by leveraging the resource merger which was presented by Gilles beforehand. So when you look at this very long path on the button. If you add your button there, you will see it in the page authoring. I won’t show a live demo here but of course we have a code example ready for you to look at.
- The next extension point is about the inplace editors. As you remember when you double clicked on certain components then you activate the inplace editor. On the left side we the image editor and on the right side the rich text editor. To be most flexible, existing inplace editors can be overridden or new ones can added. Therefor we use a submode of the editConfiguration of a component.
- To be most flexible, existing inplace editors can be overridden or new ones can added. Therefor we use a submode of the editConfiguration of a component. We use a node called cq:inplaceEditing and place a property editorType with a unique editor name there.
- On javascript part we need to implement an interface to make our new editor work. This editor can then be registered as a new inplace editor.
- There is a special case for inplace editors when a component allows to use different editors for different parts. A good example is the Text & Image component. So when clicking (CLICK) on this component. We see a menu showing up which allows us to pick the right editor. We call this kind of editor an hybrid editor because it allows to merge multiple editors
- The hybrid editor can be reused to create your own custom editor combinations. Here is some example code I won’t going to explain, just have a look if you want to try it out. composing
- So Authoring extension point number 4. The actual most powerful one. Creating your own layer gives you the power about the whole authoring and plays nicely with other layers. So other bundles of functionality. inherit or scratch
- Here is an example of a custom layer. particular view for MSM websites Let me try to walk you trough the code
- NO DEMO
- NO DEMO but we have a flickr example
- Limitation: ExtJS code cannot be converted
- so what you learned today…. Leverage the resource merger and includes to extend admin screens, how to create completely new admin screens and how to customise the page authoring
- official doc: http://docs.adobe.com/content/docs/en/aem/6-0/develop/extending.html github? link to sample packages qrcode
- Please give us feedback on this session. We will try to publish as many examples over the following months as possible. If you want to know more about a specific customisation or you are wondering how you can extend a certain area or feature of AEM, please drop us a message. We will do our best to integrate it into one of our public examples/speeches, blogs etc.