Customizing AEM Toolbar

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/selection/publish
      • /libs/dam/gui/content/assets/annotate/jcr:content/actions/selection/unpublish
    • Destination:
      • /apps/dam/gui/content/collections/collectiondetail/jcr:content/actions/selection/publish
      • /apps/dam/gui/content/collections/collectiondetail/jcr:content/actions/selection/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

2 thoughts on “Customizing AEM Toolbar”

  1. the destination path for the action nodes is listed incorrectly in the text, but is shown correctly in the screen shot. the path should read:

    /apps/dam/gui/content/collections/collectiondetail/jcr:content/actions/selection/publish…

    (note the “selection” level)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s