[WCM] AEM CQ 561 - Add a button to Sidekick Bottom Toolbar

Problem

Add a button for viewing the page in wcmmode disabled. Here, on clicking the button added to sidekick bottom toolbar (beside Edit button), allows the user to view page in wcm disabled mode.

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/sidekick-button-wcmmode-disabled

2) Create node /apps/sidekick-button-wcmmode-disabled/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) We need a button icon, so create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/css.txt and add

#base=source wcmmode-disabled.css

4) Add the following code in /apps/sidekick-button-wcmmode-disabled/clientlib/wcmmode-disabled.css

#CQ .cq-sidekick .x-window-bbar .cq-sidekick-wcmmode-disabled {    background-image:url(wcmmode-disabled.png); }

5) Download below image and named wcmmode-disabled.png and commit to /apps/sidekick-button-wcmmode-disabled/clientlib

6) Create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/js.txt and add

#base=source add-wcmmode-disabled-button.js

7) Create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/add-wcmmode-disabled-button.js and add the following code

CQ.Ext.ns("ExperienceAEM"); ExperienceAEM.Sidekick = {    WCMMODE_DISABLED_BUTTON_ID: "experience-aem-sk-button-wcmmode-disabled",    //add the button to sidekick bottom bar    addWCMModeDisabled: function(sk){        var bbar = sk.getBottomToolbar();        var dButton = bbar.getComponent(0);        //if the sidekick is reloaded, remove existing and add a fresh one        if(dButton.getId() == this.WCMMODE_DISABLED_BUTTON_ID){            bbar.remove(dButton, true);        }        dButton = new CQ.Ext.Button({            id: this.WCMMODE_DISABLED_BUTTON_ID,            iconCls: "cq-sidekick-wcmmode-disabled",            tooltip: {                title: "Disabled",                text: "Switch to wcmmode=disabled"            },            handler: function() {                var win = CQ.WCM.isContentWindow(window) ?  window.parent : window;                win.location.href = sk.getPath() + ".html?wcmmode=disabled";            },            scope: sk        });        //add the button as first component in bottom toolbar        bbar.insert(0, dButton );    } }; (function(){    var E = ExperienceAEM.Sidekick;    if( ( window.location.pathname == "/cf" ) || ( window.location.pathname.indexOf("/content") == 0)){        //when the sidekick is ready CQ fires sidekickready event        CQ.WCM.on("sidekickready", function(sk){            //after the sidekick content is loaded, add wcmmode disabled button            sk.on("loadcontent", function(){                E.addWCMModeDisabled(sk);            });        });    } })();

8) Here is the extension structure in CRX