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 a capability of the
adding a feature in side kick which will give me a publishing instance
preview of the page.
My approach: We can find sidesick.js (libs/cq/ui/widgetes/source/
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.
=======================================================================
Hi Siva,
ReplyDeleteThank you for giving such a good introduction to Adobe CQ. I am starting my first code by looking at what you have done above as I also have almost a similar requirement.
I just want to inquire about the picture shown above. It is not visible and I tried to implement the above but no icon is seen in my application.
Can you please point out if I am missing something ?
Hi Kazi, Can you send me your customization.. so that I can findout what's the wrong in it..
ReplyDeleteHi Siva,
DeleteIs User validation API same for cq5.4 and 5.5?
Thanks for your quick response Siva.
ReplyDeleteMy Code does not get posted as it is exceeding the max char limit on the blog.
Please suggest how may I post my code?
Hi Siva
ReplyDeleteHow can we disable "Activate Page" option from the sidekick for a specific group or users ?
Hi Siva,
ReplyDeleteHere when i am using alert for below line,
var allowed = CQ.User.getCurrentUser().hasPermissionOn("wcm/core/privileges/modifyhierarchy", this.getPath())
It is getting object ..can you elaborate this?
Good post - what would make it better is to have the JS as a downloadable script. The code lines are out of sync.
ReplyDelete