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