Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 525

AEM CQ 561 - Add a button to Sidekick Bottom Toolbar

$
0
0

Goal


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. View Demo




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

                       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 and check-in the image wcmmode-disabled.png to /apps/sidekick-button-wcmmode-disabled/clientlib

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

                       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







Viewing all articles
Browse latest Browse all 525

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>