Customize AEM Sidekick

Normally, once you activates a new page in author instance, in order to view it in publish instance you probably copy page its URL, paste it in new tab and change the host-name and port name to see the results. To simplify it here, we will add a custom button in our sidekick and convert it into a useful features.

The button we are going to add here will automatically give you the link to the page in publish instance once you activates it. With one click you can see your current page in publish instance.

The path where AEM sidekick code is present is: /libs/cq/ui/widgets/source/widgets/wcm/Sidekick.js

Follow the below steps :-

1. Create a folder inside /apps with name customsidekick
2. Create a node with type cq:ClientLibraryFolder inside /apps/customsidekick
3. Create a file name customSidekick.js
4. Create a file name js.txt inside /apps/customsidekick and write customSidekick.js in the this file
5. Add categories property with value cq.widgets to the clientlibrary created in step 2
6. Open the customSidekick.js file created in step 3 and paste the below code

CQ.Ext.ns("PublishButtonSidekick");

PublishButtonSidekick.Publish = {
publishPageFn: function(sk){
var pagePanel = sk.panels["PAGE"];

var button = pagePanel.findBy(function(comp){
return comp["name"] == "PUBLISH_PAGE";
}, pagePanel);

if(button && button.length > 0){
return;
}
button = {
xtype: "button",
scope: sk,
name: "PUBLISH_PAGE",
text: "Publish Page",
"context": [
CQ.wcm.Sidekick.PAGE
],
handler: function(){
var x,y,a,z,b,pp,url;

CQ.HTTP.get("/etc/replication/agents.author.2.json",
function(options, success, response) {
if (!success) {
CQ.Ext.Msg.alert(
CQ.I18n.getMessage("Error"),
CQ.I18n.getMessage("Something went wrong"));
} else {
pp=CQ.WCM.getPagePath();

x = response.responseText;
console.log(response);
y = JSON.parse(x);
a= y["publish"]["jcr:content"]["transportUri"];
x = a.indexOf('/bin');
y = a.substring(0,x);
c= y.lastIndexOf('/');
z = y.substring(c+1);
b = z.split(":");
if(b[0]=="localhost")
h= window.location.hostname;
else h=b[0];
p = window.location.port;
url="http://"+h+":"+b[1]+pp+".html";
console.log(url);
CQ.shared.Util.open(url);
}
}
);

}
};

pagePanel.insert(6,button);
sk.actns.push(button);
}
};

(function(){
var c = PublishButtonSidekick.Publish;

if( ( window.location.pathname == "/cf" ) || ( window.location.pathname.indexOf("/content") == 0)){
var SK_INTERVAL = setInterval(function(){
var sk = CQ.WCM.getSidekick();
if(sk){
clearInterval(SK_INTERVAL);
c.publishPageFn(sk);
}
}, 250);
}
})();

Once completed, Clear you browser cache and AEM Cache.

Now to see the button, Open any page with sidekick

How to test:-

1. Activate the page
2. Click on “Publish Page” button to see the page in publish instance.

Behind the Scene story:-

When you click on above “Publish Page” button, it makes an ajax call to get the list of replication agents configured in you author for publish. Once the response is received, it forms the page url in with the hostname and port present in response and opens it.

This was tested in AEM 5.6.1 and AEM 6.1 and worked fine, however if you feel any difficult in implementing or  getting expected output or bug please comment below. We will help you