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 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 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