EditConfig tips

A couple of months ago I read very good article from Dan Klco about EditConfigs. Some weeks later I had to practice it myself, so here are some tips from my side.

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

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

Most important and widely used are first three. Refreshing whole page is generally a bad idea as it's a 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

        }

    }

}();

2) EditConfig actions.

<TBD>