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



4 comments:

  1. Hi Sreekanth,
    we need your help regarding in damadmin we need custom menu-list like below, please help us to achieve this.
    Please find the below link for screenshot.
    https://screenshot.net/v3938ar

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. If you can't write an essay, that is not problem! You can order it from the best application essay writers ever. They can write paper online for you! I should say that I was completely satisfied by the results!

    ReplyDelete
  4. If you hire the expert writing services https://www.masterpapers.com you can be sure that only the University degre holders will work on your paper.

    ReplyDelete