How to Customize Sidekick?

Have a requirement where we need to add 'Preview Publish Page' button/item under the Page tab in the Sidekick. On click of the button/item it would popup a new window with the target url of that page in Publishing instance.

In short I want the capability of the adding a feature in sidekick which will give me a publishing instance preview of the page.

My approach: We can find sidesick.js (libs/cq/ui/widgetes/source/widgets/wcm/SideKick.js) where all the properties like Copy Page,

Move Page, Activate Page and so on..are configured..
So I'm going to add one more entry called 'preview Publish page' in the Same sidekick.jse and I can able to see 'prview publish page' button in the sidekick.Now, I will configure that entry to open a new window which redirects to the publish page url.

Customize sidekick:
Here I’ve customized the SideKick.js such a way that it adds one more button called ‘Preview Publish Page’ under the Page tab in the sidekick. When we click on the button it opens a new window and opens the current page in preview mode.

Customization starts at Line no: 100 to 107 in SideKick.js

/** -------------- Custom ------------------**/

/**

 * @cfg {String} previewPublishText

 * The text for the Preview Publish button (defaults to "Preview Publish Page").

 */

previewPublishText: null,

 /** -----------------------------------------**/

 Customization starts at Line no: 558 & Ends at 607 in SideKick.js

/** -----------------------------------------**/

/**

 * Returns the config for the default Create Sub Page button.

 * @private

 * @return {Object} The config for the default Create Sub Page button

 */

getPreviewPublishPageConfig: function() {

  var allowed = CQ.User.getCurrentUser().hasPermissionOn("wcm/core/privileges/modifyhierarchy", this.getPath()) &&

   CQ.User.getCurrentUser().hasPermissionOn("create", this.getPath());

  return {

   "text": this.previewPublishText,

   "disabled": !allowed,

   "handler": function() {

    if (!CQ.WCM.isPreviewMode()) {

     this.wcmMode = CQ.WCM.setMode(CQ.WCM.MODE_PREVIEW);

     if (!this.previewReload) {

      CQ.WCM.getContentWindow().CQ.WCM.hide();

     } else {

      CQ.Util.reload(CQ.WCM.getContentWindow());

     }

     this.collapse();

    } else {

     // make sure the button stays pressed

     this.previewButton.toggle(true);

    }

    var myRef = window.open('' + self.location, 'mywin',

     'left=20,top=20,width=1000,height=700,toolbar=1,resizable=0', CQ.WCM.setMode(CQ.WCM.MODE_PREVIEW));

    /** 

    * This opens the specified url in new the tab

    window.open('http://www.techaspect.com/'); // --> this opens a new tab on my browser

    Ext.Ajax.request({

    url: 'PHP function call',

    success: function(response) {

    window.open('http://www.techaspect.com/'); // --> this opens a new window, not tab

    }

    });

    */

   },

   "context": [

    CQ.wcm.Sidekick.PAGE

   ]

  };

 },

 /** ----------------------------------------------------**/

 Added Line no: 3264

"previewPublishText": CQ.I18n.getMessage("Preview Publish Page"),

 Customization starts at Line no: 3680 - 3687

/** --------------------------------------------------------------***/

/**

 * The value for {@link #actions} to create a PreviewPublish page button.

 * @static

 * @final

 * @type String

 */

CQ.wcm.Sidekick.PREVIEWPUBLISH = "PREVIEWPUBLISH";

-- -- -- -- -- -- -- --- -- -- -- -- -- -- -- -- -- -- -- --

Added Line no: 3790

CQ.wcm.Sidekick.PREVIEWPUBLISH,

 After adding the above lines of code in SideKick.js, we can see a customized button in sidekick as shown in the above figure.