Adding Modified By Filter to SiteAdmin Search Panel

Goal

This post is on extending the SiteAdmin Search Panel (http://localhost:4502/siteadmin) to provide additional filters for search and filtering content. Here we add Modified By filter ( predicate ) and by default, the filter is set to logged-in user. So when author clicks on search tab, all pages modified by the author are shown. See the demo

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de); Overlay the file /libs/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js by creating /apps/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.SiteAdminSearchPanel = {
    SA_SEARCH_PANEL_MB: 'cq-myclientlib-searchpanel-modified-by',
    SA_SEARCH_PANEL_SEARCH: "cq-siteadminsearchpanel-search",
    SA_SEARCH_PANEL_GRID: "cq-siteadminsearchpanel-grid",
    SA_SEARCH_PANEL: "cq-siteadminsearchpanel",

    addModifiedBy: function(){
        var panel = CQ.Ext.getCmp(this.SA_SEARCH_PANEL_SEARCH);

        var defaults = {
"predicateName":"property",
"propertyName":"jcr:content/cq:lastModifiedBy"
        };

        var id = CQ.wcm.PredicateBase.createId(defaults.predicateName);

        panel.add(new CQ.Ext.form.Hidden({
"name": id,
"value": defaults.propertyName
        }));

        var aCombo = new CQ.security.AuthorizableSelection({
            id: this.SA_SEARCH_PANEL_MB,
"name": id + ".value",
"anchor": "100%",
"valueField" : "id",
"displayField" : "name",
"fieldLabel": CQ.I18n.getMessage("Modified By"),
"filter" : "users",
"autoSelect" : true
        });

        panel.add(aCombo);
        panel.doLayout();

        var sPanel = CQ.Ext.getCmp(this.SA_SEARCH_PANEL);
        sPanel.reloadPages();
    }
};

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

(function(){
    if(window.location.pathname == "/siteadmin"){
        var s = MyClientLib.SiteAdminSearchPanel;

        CQ.Ext.override(CQ.wcm.SiteAdminSearchPanel, {
            reloadPages: function(){
                this.performReset();

                var modBy = CQ.Ext.getCmp(s.SA_SEARCH_PANEL_MB);

                if(modBy){
                    modBy.setValue(CQ.shared.User.data["userID"]);
                    this.performSearch();
                }
            }
        });

        var INTERVAL = setInterval(function(){
            var grid = CQ.Ext.getCmp(s.SA_SEARCH_PANEL_GRID);

            if(grid && (grid.rendered == true)){
                clearInterval(INTERVAL);
                s.addModifiedBy();
            }
        }, 250);
    }
})();

2) Line 43, we are loading the ootb SiteAdminSearchPanel.js and Line 65, after search panel grid renders, add the Modified By filter

3) Line 50, reloadPages() is called when user clicks on search tab; logic in JS function adds the Modified By filter value to search params

4) The overlay in CRXDE Lite