Custom Clientlib cq.authoring.editor.sites.page raise condition when using javascript functions within cq:editConfig --> cq:listener
Hi all,
For a client we required some custom javascript to be executed when components are inserted, edited and deleted
For this we created our own clientlib and assigned it the following category:
cq.authoring.editor.sites.page
Full .content.xml file
<?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"
jcr:primaryType="cq:ClientLibraryFolder"
allowProxy="{Boolean}true"
categories="[cq.authoring.editor.sites.page]"/>
This clientlib contains a JS file which has some neat functions i pass along to the cq:listeners in the cq:editConfig file of various components.
Here is a short version of the JS file:
(function(window, Granite) {
"use strict";
const myClient = window.myClient || {};
const authoringActions =myClient.authoringActions || {};
window.myClient = myClient;
myClient.authoringActions = authoringActions;
const privateFunctions = {};
authoringActions.openEditDialog = function() {
etc....
};
authoringActions.refreshContentFrame = function() {
etc..
};
etc...
}(window, Granite));
Here is an example how we use it within a cq:editConfig of a component
<?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"
jcr:primaryType="cq:EditConfig"
cq:actions="[INSERT,EDIT,DELETE,COPYMOVE,PASTE]">
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afteredit="myClient.authoringActions.refreshContentFrame"
afterinsert="myClient.authoringActions.openEditDialogRefreshOnSaveDeleteOnCancel"
afterdelete="myClient.authoringActions.refreshContentFrame"/>
</jcr:root>
This is the problem:
approximately 7 out of 10 times, when loading in the authoring environment the author is greeted with the message:
"An error occurred, please check the browser console for more details."
When checking the console we can read this:
Handler of component is invalid -> ReferenceError: myClient is not defined
at eval (eval at ns.util.sanitizeCQHandler etc....
As this occurs are random this tells me that this is a raise condition
It is probably caused by AEM checking if the validity of the configured cq:listeners to see if the javascript that needs to be executed actually exists.
During this check, the clientlib apparently was not initialised yet.
Funny thing is, when the author start authoring, all javascript functionality assigned to the listeners work just fine even if the error was given prior.
The ideal solution is to find a way to have the Javascript from this clientlib fully initialised prior the sanitizeCQHandler did it's thing (perhaps we can change to another category?)
But i don't mind turning sanitizeCQHandler off (if possible) for these components as a fallback
Did you experienced this aswell? If so, how did you work around it?