AEM CQ 56 - 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

1) Create folder /apps/clientlibs

2) Create /apps/clientlibs/myclientlib of type cq:ClientLibraryFolder and add property categories with String value cq.widgets

3) Create /apps/clientlibs/myclientlib/js.txt of type nt:file, add the following

                       addModifiedBy.js

4) Create /apps/clientlibs/myclientlib/addModifiedBy.js of type nt:file 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();
    }
};

(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){
                    //CQ.shared.User.data["userID"]
                    modBy.setValue(CQ.User.getCurrentUser().getUserID());
                    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);
    }
})();

Solution - 2

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