avatar
add clientlibs in AEM component AEM

» 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.$);
24
show hide dialog fields with a Checkbox in AEM include client libraries in AEM component
You need to login to do this manipulation!