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 ( Clear browser cache, adjust columns size, if the template path column added doesn't fit in grid  )

These steps were also tested on AEM 6 SP1

Package Install

Default SiteAdmin Grid

Extended SiteAdmin Grid

Related Posts

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

2) To add a column to siteadmin search panel check this post

Solution - 1

1) Login to CRXDE Lite, create folder (nt:folder) /apps/gridcolumnadd

2) Create clientlib (type cq:ClientLibraryFolder) /apps/gridcolumnadd/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/gridcolumnadd/clientlib/js.txt, add the following

                         addcolumn.js

4) Create file ( type nt:file ) /apps/gridcolumnadd/clientlib/addcolumn.js, add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.SiteAdminGrid = {
    SA_GRID: "cq-siteadmin-grid",
    TEMPLATE_PATH: "templatePath",

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

        var tPathColumn = new CQ.Ext.grid.Column({
            "header": "Template Path",
            "id":"templatePath",
            "dataIndex":"templatePath",
            "renderer": function(v, params, record) {
                return v;
            }
        });

        cm.columns.push(tPathColumn);

        cm.lookup[this.TEMPLATE_PATH] = tPathColumn;

        grid.doLayout();
    }
};

(function(){
    if(window.location.pathname !== "/siteadmin"){
        return;
    }

    var s = ExperienceAEM.SiteAdminGrid;

    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);
})();

Solution - 2

Not preferred, as it results in not minifying /libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.js

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();

        var tPathColumn = new CQ.Ext.grid.Column({
            "header": "Template Path",
            "id":"templatePath",
            "dataIndex":"templatePath",
            "renderer": function(v, params, record) {
                return v;
            }
        });

        cm.columns.push(tPathColumn);

        cm.lookup[this.TEMPLATE_PATH] = tPathColumn;

        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