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



3 comments:

  1. Instead of using granite.ui.foundation, it's better to use cq.gui.metadataeditor. Using granite.ui.foundation would make this clientlib loaded in all the places where ever granite.ui.foundation (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.

    ReplyDelete