EditConfig Tips

Custom listeners: Some of my components needed to execute javascript after their configuration is changed. There are build-in listeners shortcuts:

• REFRESH_PAGE, 
• REFRESH_PARENT, 
• REFRESH_SELF, 
• REFRESH_SELFMOVED, 
• REFRESH_INSERTED

The most important and widely used are the first three. The refreshing the whole page is generally a bad idea as it's bad user experience. Ideally, you should use refresh_parent or refresh_self and only a part of the page will be updated via ajax call.

In my case, it was not enough to use these shortcuts, because apart from refreshing a parent container, some page-scoped javascripts need to be executed. Therefore I had to write my own listener.

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

          cq:actions="[text:My Component,EDIT,DELETE,COPYMOVE]"

          cq:layout="editbar"

          jcr:primaryType="cq:EditConfig"

          cq:disableTargeting="{Boolean}true"

          cq:dialogMode="floating">

    <cq:listeners

            jcr:primaryType="cq:EditListenersConfig"

            afterinsert="function(path, definition) { CQWidgets.refreshParent(this); }"

            afteredit="function(path, definition) { CQWidgets.refreshParent(this); }"/>

</jcr:root>

where CQWidgets is a separate JS file which is included inside clientlib in edit mode.

var CQWidgets = function () {

    return {

        refreshParent: function (editBar) {

            editBar.refreshParent();

            MyComponentController.initializeSliders(); // this is where my javascript logic is being executed

        }

    }

}();