» Be assumption that add Clientlibs in helloworld component, you can create from AEM project or CRXDE | Lite dashboard.
components
|- content
| |- helloworld
| | |- clientlibs [cq:ClientLibraryFolder]
| | | |- js
| | | | |- js.txt
| | | | |- js
| | | | | |- mycustom.js
» Open IntelliJ IDE and update structure as below
» We need to use extraClientlibs in _cq_dialog and categories in clientlibs(.content.xml) that need to be assigned same value.
_cq_dialog/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
extraClientlibs="[helloworld.clientlibs]"
sling:resourceType="cq/gui/components/authoring/dialog">
clientlibs/.content.xml
<?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="[helloworld.clientlibs]"/>
As you can see here, we had the same value helloworld.clientlibs. You can totally changes this value by any value.
» Let me update in mycustom.js to ensure javascript was active upon manipulating on Touch UI dialog.
(function(document, $) {
"use strict";
$(document).on("foundation-contentloaded", function(e) {
let textField = $('.cq-dialog-helloworld-comp').find('._coral-Textfield');
console.log(textField.val());
});
})(document, Granite.$);
» Establish a rule to put validation which component will be execute javascript function and other hands, ignore execution.
(function(document, $) {
"use strict";
const DIALOG_RESOURCE_TYPE = "flagtick/components/content/helloworld";
function isTargetDialog($formElement, dlgResourceType) {
const resourceType = $formElement.find("input[name='./sling:resourceType']").val();
return resourceType === dlgResourceType;
}
$(document).on("dialog-ready", function () {
const $formElement = $(this).find('coral-dialog form.foundation-form');
if (!isTargetDialog($formElement, DIALOG_RESOURCE_TYPE)) {
console.debug("Ignore the listener, not a ", DIALOG_RESOURCE_TYPE, " dialog.");
return;
} else {
console.log("Keep the form openning!");
}
});
})(document, Granite.$);