Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AEM 6.0 - Author UI Customization & Features

8.178 visualizaciones

Publicado el

This deck depicts how to go about customizing the Author UI in 6.0 using the new Coral 2 UI features and the Sling Resource Merger.

Publicado en: Software
  • Inicia sesión para ver los comentarios

AEM 6.0 - Author UI Customization & Features

  1. 1. AEM 6.0 – UI Customization & Features Abhinit Bhatnagar Senior Developer, 3|SHARE Corporation
  2. 2. Agenda  Sling Resource Merger  Add / Hide links from left rail  Add a new button in the console  Modify Search filters  Metadata properties as tags  Asset editor – Metadata Templates AEM 6.0 UI Customization
  3. 3. Sling Resource Merger  Provides services to access and merge resources  Allows to manage overrides of nodes and their properties  AEM configured to search the /apps first and then the /libs to find a resource.  What is an overlay ?  Taking the predefined functionality and imposing your own definitions over that. AEM 6.0 UI Customization
  4. 4. How to create an overlay  Recreate the required nodes and node structure as they exist in /libs  Create the overlay node structure in /apps  Make your changes in /apps  IMPORTANT :  You must not make changes in the /libs branch  Not recommended to copy entire structure from /libs to /apps  Non-Granite UI changes needs complete structure duplication. AEM 6.0 UI Customization
  5. 5. Properties  sling:hideProperties  To hide certain properties under the node  sling:hideResource  To hide the resource and its children  sling:hideChildren  To hide the children as specified but node remains visible  sling:orderBefore  Ordering the node with respect to the siblings AEM 6.0 UI Customization
  6. 6. Uses of Sling Resource Merger  Add a property  Override a property (not auto-created properties)  Override an auto-created property  Override a node and its children  Hide a property  Hide a node and its children  Hide children of a node (while keeping the properties of the node)  Reorder nodes AEM 6.0 UI Customization
  7. 7. Add links to the left rail To do this, you can create an overlay of : /libs/cq/core/content/nav In the apps overlay : /apps/cq/core/content/nav  Add a similar node with desired properties  All properties can be changed including the title AEM 6.0 UI Customization
  8. 8. Hide links from the left rail To do this, you can create an overlay of : /libs/cq/core/content/nav In the apps overlay : /apps/cq/core/content/nav  As simple as adding a property – sling:hideResource : true to the node AEM 6.0 UI Customization
  9. 9. Add a new button in the console To do this, you can create an overlay of : /libs/dam/gui/components/admin /libs/dam/gui/content/assets In the apps overlay : /apps/dam/gui/components/admin/{name} /apps/dam/gui/content/assets  Requires overriding of multiple properties and nodes.  The requirement specific changes can be done to the CSS and the JS under the clientlibs. AEM 6.0 UI Customization
  10. 10. Modify Search filters To do this, you can create an overlay of : /libs/dam/gui/content/facets /libs/dam/content/search /libs/dam/options In the apps overlay : /apps/dam/gui/content/facets /apps/dam/content/search /apps/dam/options  Requires overriding of multiple properties and nodes.  The predicates, facets and search options can all be modified and overridden.  Can also be useful for the creation of smart collections as it provides better optimized search results AEM 6.0 UI Customization
  11. 11. Metadata properties as tags To do this, you can create an overlay of : /libs/cq/gui/components/common/datasources /libs/dam/content/schemaeditors In the apps overlay : /apps/cq/gui/components/common/datasources /apps/dam/content/schemaeditors  Tags can be handy for multiple valued metadata & better taxonomy  Modify the datasources for the tags.  Changes in the metadata structure and can be used in multiple places. AEM 6.0 UI Customization
  12. 12. Asset Editor – Metadata Templates To do this, you can create an overlay of : /libs/dam/content/asseteditors In the apps overlay : /apps/dam/content/asseteditors  Metadata Editor changes can be done in accordance to the Non – Granite UI.  Can be seen in the classic UI.  Custom fields can be added similar to the metadata schema editor but not in the new UI but only in the node structure. AEM 6.0 UI Customization
  13. 13. Other useful information  Certain node structures in /libs which can be overridden in /apps for desired functionalities :  Form similar to the Image Set creation :  /libs/dam/gui/content/s7dam/sets/imageset/jcr:content/bod y/content/items  Asset Reports :  /libs/dam/content/reports  /libs/dam/gui/components/admin/reports  Page Header information comes from :  /libs/dam/gui/content/assets/jcr:content/head AEM 6.0 UI Customization
  14. 14. Other useful information (contd.)  Actions related to various DAM operations :  /libs/wcm/core/content/damadmin/actions  DAM Actions (Classic UI) :  /libs/cq/ui/widgets/source/widgets/wcm/DamAdmin.Actions .js  Metadata Template related wizards :  /libs/dam/widgets/source/widgets AEM 6.0 UI Customization
  15. 15. Useful Links  https://github.com/gknob/sling-resourcemerger  http://docs.adobe.com/content/docs/en/aem/6- 0/develop/platform/overlays.pdf  http://dev.day.com/content/docs/en/aem/6- 0/develop/extending/customizing-consoles-touch.html  http://dev.day.com/content/ddc/en/gems/user-interface- customization-for-aem- 6/_jcr_content/par/download/file.res/User_interface_customiz ation_for_aem6.pdf AEM 6.0 UI Customization
  16. 16. Questions please ? AEM 6.0 UI Customization

×