Adobe Experience Manager Blog

AEM concepts, snippets and implementation

Tag Archives: Assets Toolbar

Customizing AEM Toolbar

0

Adding new action to an AEM Assets Toolbar consists of 2 steps:

  1. Configure the new action for the toolbar
  2. Add a client library to execute some operation on clicking the action.

In the following example, we are adding ability to publish and unpublish assets from the Collection view.

Icons.PNG

Step 1: Resolving the location of toolbar in CRXDE.

A toolbar’s location can easily be resolved via its page URL.

  1. Copy the URL of the page.
  2. Replace “/mnt/overlay” with “/libs” to resolve toolbar’s path. In our current example:
    • Page URL: /mnt/overlay/dam/gui/content/collections/collectiondetails
    • Toolbar’s location: /libs/dam/gui/content/collections/collectiondetail

 

Step 2: Add the new action to the toolbar

  1. In CRXDE, locate the toolbar via the path resolved in Step-1.
  2. Browse to “<Toolbar’s path>/jcr:content/actions”.
  3. Overlay actions node in “/apps”. This is to ensure that the customization are only done in “/apps” and NOT “/libs”
  4. Add the new required action. In current example, we have copied publish and unpublish actions from:
    • Source:
      • /libs/dam/gui/content/assets/annotate/jcr:content/actions/publish
      • /libs/dam/gui/content/assets/annotate/jcr:content/actions/unpublish
    • Destination:
      • /apps/dam/gui/content/collections/collectiondetail/jcr:content/actions/publish
      • /apps/dam/gui/content/collections/collectiondetail/jcr:content/actions/unpublish
  5. Visit the Collections View. Select an asset. Notice that publish and unpublish actions would now be available. But, clicking on will execute any operation

 

Step 3: Add clientlibs to execute an operation via the newly added actions

  1. In CRXDE, locate the toolbar via the path resolved in Step-1.
  2. Browse to “<Toolbar’s path>/jcr:content/head/clientlibs”.
  3. Overlay clientlibs node in “/apps”. This is to ensure that the customization are only done in “/apps” and NOT “/libs”
  4. Add the required client library to the “categories” property of “/apps/dam/gui/content/collections/collectiondetail/jcr:content/head/clientlibs”
    • For the current example, we have added following client libraries:
      • dam.gui.admin.publishasset.coral
      • dam.gui.admin.unpublishasset.coral

Node View.PNG

Visit the Collections View. Select an asset. You should now be able to publish/unpublish an asset via Collection view 🙂

 

 

Advertisements