Benefits of Overriding and Customizing AEM Tools

AEM (formerly CQ5) provides a vast array of tools to allow and assist Content Authors in producing and editing content. Many of these tools are very specific in their abilities, sometimes not providing the desired functionality. An example of this would be the Reports Tools, it does not provide the ability to export the data, but you can add this by creating custom javascript to generate a .csv file that the user can download.
Because AEM’s source code for the front end is available in the JCR, it is possible to override any and all out of the box functionality for these tools. These tools are written in Sencha’s Ext JS and loaded into AEM using the same techniques developers use to include Javascript and CSS for custom components via Client Libraries.

Examples of AEM Tools:

1. Site AdminDAM Admin
2. DAM Admin
3. Sidekick
4. Content FinderCRXDE Lite
5. CRXDE Lite

Benefits from this customization include, but are not limited to: closer inspection of DAM assets without the need of opening the asset, viewing multiple resolutions of the same image, or confirming an image’s Scene7 link integrity (additional customizations may be required). The final outcome of this enhancement is one that will save the Content Authors time and effort when examining which DAM Asset they would like to include on a page. This enhancement could also be added to the Assets that are seen in the Content Finder while editing a page.

Additional benefits of overriding out of the box functionality for AEM tools include providing a tailored shortcut for your Authors by removing additional user input/actions. Thus, making your authors more productive. You can also remove features that your Authors won’t use allowing you to simplify their experience and prevent authoring errors. In hindsight, there is no true limit to what you can do to the AEM UI and User Experience to fit your needs.

All of these tools can be customized to perform new or enhanced functionality. In fact, many of AEM’s tools are overridden versions of main tools. For example, the DAM Admin tool is an overridden Site Admin tool. In order to customize and override the functionality of existing AEM tools, one must have an advanced understanding of Javascript. Having prior experience with Ext JS will also be a benefit while reading through and understanding all of the custom Javascript libraries used in implementing AEM Tools.

Some of the changes you can make are something as complex as a custom windowpane in the Site Admin that provides additional details of a Page while a page is selected, all the way down to a simple text change like making the “OK” button of a Dialog read “Save” instead.

Below is an example of a DAM Admin change.
It provides a larger preview of a DAM Asset while hovering over an asset’s thumbnail. Necessary steps would include:
1) Locate the Javascript file containing the widget controlling the DAM Admin functionality
A. /libs/cq/ui/widgets/source/widgets /wcm/SiteAdmin.js
B. CQ.wcm.SiteAdmin.COLUMNS.thumbnail (this object returns the thumbnail image that we will use to render our preview)
2) Create a Client Library under the /apps directory containing the javascript file holding the DAM Admin widget. This is to prevent customizations from being lost when upgrading to the next version of AEM.
3) The Client Library must contain the same “category” value of the original Client Library that contains the DAM Admin widget
4) Add custom Javascript that will retrieve the image currently being hovered by the user’s mouse cursor and generating a duplicate image of a larger size on the browser.
A. add an additional attribute to the <img> being returned such as:

“data:preview='”+CQ.HTTP.
externalize(CQ.shared.XSS.
getXSSValue(CQ.HTTP.encodePath(path))
+”.thumb.319.319″ + (ck ? “.” + ck : “”) +
“.png”, true)+”‘”;

B. By putting this additional attribute in the thumbnail being rendered, it allows us to easily grab a larger preview of the thumbnail.
C. Because jQuery has already been imported to the browser by AEM, we can use jQuery to handle our preview rendering and effects by placing our custom jQuery code at the bottom of the SiteAdmin file.
5) Create a jQuery object of the existing thumbnail using and append the preview image to the #CQ div element:

jQuery(‘document’).on{mouseenter: function(e)

{var previewPath = jQuery(this).attr(‘data:preview’);
jQuery(‘#CQ’).append(‘<img’+
‘src=”‘+previewPath+'” />’);},mouseleave: function(e)
{jQuery(‘.preview’).remove();}}, ‘div.x-grid3-col-thumbnail img’);

6) Custom CSS and additional effects can be added here as well.