May 9, 2020
Estimated Post Reading Time ~

Sidekick Customization

Sometimes it is necessary to override the default behavior of CQ Sidekick. For example, you need to reload the page when the author presses the "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 the author clicks on the 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 (preferable 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.


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.