Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 526

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

$
0
0

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




Viewing all articles
Browse latest Browse all 526

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>