AEM CQ 561 - Add a new Image Metadata Field in Touch UI


Add a new metadata field for assets in Touch UI (Coral UI). Here we add a field for author to enter overlay text, that can be displayed on image while rendering. View demo


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touch-ui-add-dam-metadata-field

2) Create node /apps/touch-ui-add-dam-metadata-field/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.gui.metadataeditor (if there is requirement for other extensions in Touch UI and you donot like creating different clientlibs for each, a more broader category is

3) Create file (nt:file) /apps/touch-ui-add-dam-metadata-field/clientlib/js.txt and add


4) Create file (nt:file) /apps/touch-ui-add-dam-metadata-field/clientlib/add-overlay-text.js and add the following code

(function(document, Granite, $) {
    "use strict";

    var ns = ".foundation-form";

    $(document).on("foundation-mode-change" + ns, function(e, mode, group) {
        if(group !== "cq-damadmin-admin-bulkproperties"){

        if (mode !== "edit" && mode !== "default"){

        //the id is defined here /libs/dam/gui/content/assets/metadataeditor/items/content
        var form = $("#assetpropertiesform");

        var overlayTextField = $(form).find("[name='./jcr:content/metadata/overlayText']");

        //field already added
        if(overlayTextField && overlayTextField.length > 0){

        var assetPath = $(form).attr("action");
        assetPath = assetPath.substring(0, assetPath.lastIndexOf(".html"));

            url: assetPath + "/jcr:content/metadata.json",
            dataType: "json",
            success: function(data){
                var value = data["overlayText"];

                    value = "";

                overlayTextField = "<div class='grid-1'>" +
                                        "<label>" +
                                            "<span>Overlay Text</span>" +
                                            "<span class='foundation-field-editable'>" +
                                            "<span class='foundation-field-readonly'>" + value + "</span>" +
                                            "<input type='text' size=54 name='./jcr:content/metadata/overlayText' value='" + value + "' class='foundation-field-edit' />" +
                                            "</span>" +
                                        "</label>" +

                var asset = $(form).find(".assets-metadata-view");
})(document, Granite, Granite.$);

In the above code, logic listens to granite framework foundation-mode-change event, checks the dam editor mode for edit and adds overlayText field


  1. Instead of using, it's better to use cq.gui.metadataeditor. Using would make this clientlib loaded in all the places where ever (this clientlibs is used in almost all the admin consoles) is used. If you use the metadata editor specific clientlibs (i.e, cq.gui.metadataeditor) it will be only loaded in metadata screen.