Tuesday, April 29, 2014

Sidekick Customization

Sometimes it is necessary to override default behaviour of CQ Sidekick. For example, you need to reload the page when author presses "Preview" button to apply some javascript logic or rename buttons in Sidekick, etc.

There are two ways to do it:
1). Straightforward (ugly). You need to copy script init.jsp from "/libs/wcm/core/components/init" directly under your application folder, customize it and include it from your page. (You can also copy this script under /apps but that would affect all other applications on this CQ instance).
Let's reload the page when author clicks on Preview button.

For that we need to change these lines:
    CQ.WCM.launchSidekick("<%= currentPage.getPath() %>", {
        propsDialog: "<%= dlgPath == null ? "" : dlgPath %>",
        locked: <%= currentPage.isLocked() %>,
        previewReload: "true"
    });
Notice previewReload property, it does the trick.

Next we need to include this script from our page component:
    <cq:include script="/apps/skywalker/init.jsp" />

2) Programmatic (preferrable approach).
Inside your page component please use the following code:

<script>
    function checkSidekickStatus() {
        if (CQ.WCM.isSidekickReady()) {
            CQ.WCM.getSidekick().previewReload = true;
            clearTimeout(timeout);
        }
    }
    var timeout = setInterval(checkSidekickStatus, 1000);
</script>

In other words, we wait until sidekick is loaded and then modify its properties. In this case we set previewReload to true. To check all available properties of sidekick please visit http://dev.day.com/docs/en/cq/current/widgets-api/index.html and search for "sidekick" there.

No comments:

Post a Comment