AEM 6590 - Show Page References of Content Fragment in Metadata (Info) Page

Goal

References of a Content Fragment can be added in Metadata (Info) page by editing the content fragment metadata schema (http://localhost:4502/mnt/overlay/dam/gui/content/metadataschemaeditor/schemadetails.html/contentfragment?formPath=/conf/global/settings/dam/adminui-extension/metadataschema)

This post is on adding the References as an extension to show page name and path in separate columns...

Demo | Package Install | Github

Solution

Create a client library /apps/eaem-65-cf-references/clientlibs/cf-references with categories=dam.cfm.adminpage.v2 Add the following js logic in /apps/eaem-65-cf-references/clientlibs/cf-references/cf-references.js

(function ($, $document) {
    "use strict";

    var _ = window._,
        initialized = false,
        FRAGMENT_INFO_PAGE = "/mnt/overlay/dam/cfm/admin/content/v2/metadata-editor.html",
        GET_REFERENCES_URL = "/libs/dam/content/schemaeditors/forms/references/items/tabs/items/tab1/items/col1/items/local-references/items/references.html";

    if (!isFragmentInfoPage()) {
        return;
    }

    init();

    function init(){
        if(initialized){
            return;
        }

        initialized = true;

        window.Dam.CFM.Core.registerReadyHandler(extendFragmentInfoPage);
    }

    function extendFragmentInfoPage(){
        var cfPath = getCFPath();

        $.ajax(GET_REFERENCES_URL + cfPath).done(function(html){
            var $secondColumn = $("[data-metatype=tags]").closest(".aem-assets-metadata-form-column");

            if($secondColumn.length === 0){

                $secondColumn = $("[name='./jcr:content/metadata/cq:tags']").closest(".aem-assets-metadata-form-column");

                if($secondColumn.length === 0){
                    return;
                }
            }

            addReferencesHtml($secondColumn, html);
        })
    }

    function addReferencesHtml($secondColumn, html){
        html = '<div class="coral-Form-fieldwrapper">' +
                    '<div class="coral-Form-fieldlabel" style="margin: 10px 0 5px 0">Page References</div>' + html +
                '</div>';

        $secondColumn.append(html);

        $secondColumn.find("thead").remove();
    }

    function getCFPath(){
        var path = window.location.pathname;

        return path.substring(path.indexOf(FRAGMENT_INFO_PAGE) + FRAGMENT_INFO_PAGE.length);
    }

    function isFragmentInfoPage() {
        return (window.location.pathname.indexOf(FRAGMENT_INFO_PAGE) >= 0);
    }
}(jQuery, jQuery(document)));