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


2 comments:

  1. Hi Sreekanth ,
    I'm trying to implement the above functionality by following the steps mentioned , but still the new facet is not coming up in searchpanel
    Steps followed :
    Overlay SiteAdminSearchPanel.js to /apps/cq/ui/widgets/source/widgets/wcm path and used the above code in the javascript . But still its not working
    Do we have to configure any node (/apps/cq/ui/widgets node ) for defining the client library "MyClientLib" . Right now the properties value for widgets are categories = cq.widgets dependencies = cq.shared#cq.rte . Please let me know , if any changes has to be done for the above code to work

    ReplyDelete
  2. hello Prabhu, No additional changes are required. If you are not seeing the Modified By widget, try adding a simple alert in js file, to see if the overlay is actually working or not. Also, i've updated the post to add another solution (Solution - 1) better than the overlay

    ReplyDelete