AEM 6.0 - Author UI Customization & Features
Download as pptx, pdf8 likes8,404 views
This document discusses various features and customization options for the AEM 6.0 user interface. It covers the Sling resource merger which allows overlaying and customizing nodes, adding and hiding links from the left rail, adding buttons to the console, modifying search filters, using metadata properties as tags, and customizing asset editor metadata templates. It provides examples of how to customize and overlay nodes in the /libs path with custom configurations in the /apps path. The document also includes some additional useful information and links for AEM UI customization.
More Related Content
What's hot (20)
Viewers also liked (20)
Recently uploaded (20)
AEM 6.0 - Author UI Customization & Features
- 1. AEM 6.0 – UI Customization & Features Abhinit Bhatnagar Senior Developer, 3|SHARE Corporation
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Questions please ? AEM 6.0 UI Customization