Implementing custom rendering for the Document Identifier field - Alfresco Content Services - 23.4 - 23.4 - Ready - Alfresco - external

Open the add-metadata-template-doclib-extension-modules.xml Surf Extension module file again, it is located in the aio/aio-share-jar/src/main/resources/alfresco/web-extension/site-data/extensions directory.

Then update the Metadata Template definition so it has the extra Acme Document Id field at the end:

<extension>
    <modules>
        <module>
            <id>Add Acme Document Metadata Template</id>
            <version>1.0</version>
            <auto-deploy>true</auto-deploy>
            <configurations>
                <config evaluator="string-compare" condition="DocumentLibrary">
                    <metadata-templates>
                        <template id="acmeDocMetadataTemplate">
                            <evaluator>alfresco.tutorials.evaluator.isAcmeDocument</evaluator>
                            <banner index="10" id="lockBanner" evaluator="evaluator.doclib.metadata.hasLockBanner">{lockBanner}</banner>
                            <banner index="20" id="syncTransientError" evaluator="evaluator.doclib.metadata.hasSyncTransientErrorBanner">{syncTransientError}</banner>
                            <banner index="30" id="syncFailed" evaluator="evaluator.doclib.metadata.hasSyncFailedBanner">{syncFailed}</banner>
                            <line index="10" id="date">{date}{size}</line>
                            <line index="20" id="description" view="detailed">{description}</line>
                            <line index="30" id="tags" view="detailed">{tags}</line>
                            <line index="40" id="categories" view="detailed" evaluator="evaluator.doclib.metadata.hasCategories">{categories}</line>
                            <line index="50" id="acmeDocId" view="detailed">{acme_documentId org.alfresco.tutorial.label.acme_documentId}</line>
                            <line index="60" id="social" view="detailed">{social}</line>
                            <line index="70" id="acmeDocIdCustom" view="detailed">{acmeDocumentIdCustomRendition org.alfresco.tutorial.label.acme_documentId}</line>
                        </template>
                    </metadata-templates>
                </config>

                <config evaluator="string-compare" condition="DocLibCustom">
                    <dependencies>
                        <js src="components/documentlibrary/custom-metadata-template-renderer.js"/>
                    </dependencies>
                </config>
            </configurations>
        </module>
    </modules>
</extension>

Here we have added an extra line identified with the id="acmeDocIdCustom" that will represent the custom rendered document identifier. The custom rendering will be done via some client side JavaScript code that is going to be associated with the line via the property name acmeDocumentIdCustomRendition. The custom JavaScript code will be loaded via the above DocLibCustom definition that loads a new JavaScript file called custom-metadata-template-renderer.js. This file needs to be created next.

Add a JavaScript file called custom-metadata-template-renderer.js to the aio/aio-share-jar/src/main/resources/META-INF/resources/aio-share-jar/components/documentlibrary directory. Then add the following function:

(function () {
    YAHOO.Bubbling.fire("registerRenderer",
        {
            propertyName: "acmeDocumentIdCustomRendition",
            renderer: functionacmeDocumentId_renderer(record, label) {
                var jsNode = record.jsNode,
                    properties = jsNode.properties,
                    html = "";
                var acmeDocId = properties["acme:documentId"] || "";
                html = '<span>' + label + '<h2>' + acmeDocId + '</h2></span>';

                return html;
            }
        });
})();

The important thing here is that the propertyName matches what we got in the line element text content in the metadata template, which is acmeDocumentIdCustomRendition. There is not much of a fancy rendering going on here, we just change the presentation of the property value so it is displayed as header <h2>.

/all-in-one$ ./run.sh build_start