Data Formatting on Metadata Schema Editor

[francisco_ribei]

Hi,

Is there any way to format the data that is presented on MetadataSchema Form?

I'd like to display the info of the dam:size metadata. But I'd like to display it formatted, like 128kb or 20MB.

Is this possible? Is there any documentation about this?

Thanks,

[Lokesh_Shivalingaiah]

Have you created the form option for displaying dam:size ??

[francisco_ribei]

Yes.

The user wants to see the file size in the properties form. It will be read-only.

is it possible to format the values displayed in the form?

Thanks

[Lokesh_Shivalingaiah]

can you help us with a screenshot to understand where exactly you are trying to show this ?

[francisco_ribei]

Hi bloski,

Here is the screenshot:

[kautuk_sahni · Accepted solution]

Hi

There is an article on Extending Schema EditorLink:- http://aem-dev.blogspot.in/2014/11/extending-schema-editor-in-aem-assets.html

You can add your custom formatting there.

//

Extending Schema Editor in AEM Assets Touch UI

AEM Assets Schema Editor allows you to define the schema of an asset using a WYSIWYG editor. You can find the more details at AEM documentatoin

Objective:
Extend Schema Editor to add a new widget. In this example I will add a path browser widget to the schema form.

You can download the package here

1. Add a place holder (this place holder will be replaced by the actual widget) using the OOTB Schema Editor

1. • Go to http://localhost:4502/libs/dam/gui/content/metadataschemaeditor/schemalist.html/dam/content/schemaed...
   • Traverse to the required form and select the form and click on edit from the action bar
   • Add a text box to the required column as in below

1. • Update 'Map to property' with a distinguishing value so that we can use this as a selector to select the widget in java script
   • Click on Done to save the changes.

2. Create "dam.gui.metadataeditor" clientlibs in /apps/dam

1. • Go to http://localhost:4502/crx/de/index.jsp
   • Go to /apps/dam (if not existing already, create one) and create nt:folder with name 'clientlibs'
   • Go to /apps/dam/clientlibs and create schema_editor_extension (cq:clientLibraryFolder)
   • Add property 'categories' with String Multi (String []) and value as 'dam.gui.metadataeditor'
   • Create a folder js (nt:folder) inside /apps/dam/clientlibs/schema_editor_extension
   • Create a file 'js.txt' (nt:file) inside /apps/dam/clientlibs/schema_editor_extension with the content as following:

?

     

1 2	#base=js newwidget.js

• • Create a file 'newwidget.js' (nt:file) in the /apps/dam/clientlibs/schema_editor_extension/js with the following content

 

?

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

(function(document, $) {     "use strict";     var PLACEHOLDER_SELECTOR = "input[name=\"./jcr:content/metadata/myWidget\"]";     var WIDGET_SELECTOR = "myWidget";     var MY_WIDGET = "<span id=\"" + WIDGET_SELECTOR + "\" class=\"coral-Form-field option-path-primary coral-InputGroup\" data-init=\"pathbrowser\" data-root-path=\"/content/dam/\"" +         "data-option-loader=\"function(path, callback) {    jQuery.get(path + &quot;.1.json&quot;, {        predicate: &quot; HierarchyNotFilePredicate&quot;    },    function(data) {     var result = [];  for(var object in data) {if(/Folder/i.test(data[object]['jcr:primaryType']) &amp;&amp; typeof(data[object]['hidden'])===&quot;undefined&quot;){    result.push(object);   }  }       if (callback) callback(result);    }, &quot;json&quot;);    return false;}\"" +         "><input class=\"coral-InputGroup-input coral-Textfield js-coral-pathbrowser-input\" type=\"text\" placeholder=\"eg: /content/dam\"></span>";     $(document).on("foundation-contentloaded", function(e) {         //find the placeholder element to create new widget         //replace the PLACEHOLDER_SELECTOR with path browser         var $palceHolder = $(PLACEHOLDER_SELECTOR);         $palceHolder.hide();         $palceHolder.parent().append($(MY_WIDGET));         //do the initializatoins of the new widget         $("#" + WIDGET_SELECTOR).pathBrowser();     });     //when the widget changes make sure to updat the hidden place holder so that the form submission persists the data     $(document).on("change", "#" + WIDGET_SELECTOR, function(e) {         var $widget = $(e.target);         $(PLACEHOLDER_SELECTOR).val($widget.val());     }); })(document, Granite.$);

3. When you edit meta data of an asset using metadata editor, you can see your new widget. In our example we can see path browser as below..

Pros of this approach: 

1. No components/content is being overridden.
2. Since we are not changing any thing in the content of schema form, even if we update the schemaform, customization still works as the entire widget work is being done on the client side.
3. This solution is upgrade proof.

I hope this would help you.

Thanks and Regards

Kautuk Sahni