Customize AEM Sidekick and add a useful feature

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 customize

How to test:-
Activate the page
Click on the “Publish Page” button to see the page in publish instance.

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

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