AEM CQ 56 - Adding Column to SiteAdmin Grid

Goal

Lets add a column to SiteAdmin (http://localhost:4502/siteadmin) grid. The Template Path column we are going to add displays template path of page

Default SiteAdmin Grid



Customized SiteAdmin Grid

Related Posts

If you are trying to modify a column of grid, check this post

Solution

1) Use overlay architecture of CQ to overlay the file /libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.js. Create file /apps/cq/ui/widgets/source/widgets/wcm/SiteAdmin.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.SiteAdminGrid = {
    SA_GRID: "cq-siteadmin-grid",

    addPathColumn: function(grid){
        var cm = grid.getColumnModel();

        cm.columns.push({
"header": "Template Path",
"id":"templatePath",
"dataIndex":"templatePath",
"renderer": function(v, params, record) {
                return v;
            }
        });

        grid.doLayout();
    }
};

CQ.shared.HTTP.get("/libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.js");

(function(){
    var s = MyClientLib.SiteAdminGrid;

    if(window.location.pathname == "/siteadmin"){
        var SA_INTERVAL = setInterval(function(){
            var grid = CQ.Ext.getCmp(s.SA_GRID);

            if(grid && ( grid.rendered == true)){
                var cm = grid.getColumnModel();

                if(cm && cm.columns){
                    clearInterval(SA_INTERVAL);
                    s.addPathColumn(grid);
                }
            }
        }, 250);
    }
})();

2) Here we are loading ootb SiteAdmin.js to create the default siteadmin grid (line 22) and later add the path column

3) The overlay in CRXDE Lite (http://localhost:4502/crx/de)