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

Goal

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

Solution

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 granite.ui.foundation

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

                       add-overlay-text.js

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"){
            return;
        }

        if (mode !== "edit"&& mode !== "default"){
            return;
        }

        //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){
            return;
        }

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

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

                if(!value){
                    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>" +
"</div>";

                var asset = $(form).find(".assets-metadata-view");
                asset.append(overlayTextField);
            }
        });
    });
})(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

5) The component structure in CRXDE