avatar
show hide dialog fields with a Checkbox in AEM AEM
> ui.apps
  > src/main/content/jcr_root/apps/flagtick/clientlibs
  > src/main/content/jcr_root/apps/flagtick/clientlibs/clientlib-author-dialog
  > js
    > checkboxshowhide.js
  > .content.xml
  > js.txt

> js.txt

#base=js
checkboxshowhide.js

> .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"
    categories="[cq.authoring.dialog.all,coralui3]"/>
Note: cq.authoring.dialog is a global category and applies to all Touch UI dialogs.

> checkboxshowhide.js

(function (document, $) {
    "use strict";
    $(document).on("foundation-contentloaded", function (e) {
        checkboxShowHideHandler($(".cq-dialog-checkbox-showhide", e.target));
    });
    $(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
        checkboxShowHideHandler($(this));
    });
    function checkboxShowHideHandler(el) {
        el.each(function (i, element) {
            if($(element).is("coral-checkbox")) {
                Coral.commons.ready(element, function (component) {
                    showHide(component, element);
                    component.on("change", function () {
                        showHide(component, element);
                    });
                });
            } else {
                var component = $(element).data("checkbox");
                if (component) {
                    showHide(component, element);
                }
            }
        })
    }
    function showHide(component, element) {
        var target = $(element).data("cqDialogCheckboxShowhideTarget");
        var $target = $(target);
        if (target) {
            $target.addClass("hide");
            if (component.checked) {
                $target.removeClass("hide");
            }
        }
    }
})(document, Granite.$);

> cq:dialog

<title
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Service Credit Label"
        value="Title"
        name="./title"/>
<chkTitle jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
           granite:class="cq-dialog-checkbox-showhide"
           text="Enable Title Tooltip"
           value="{Boolean}true"
           uncheckedValue="{Boolean}false"
           name="./chkTitle">
    <granite:data jcr:primaryType="nt:unstructured"
                  cq-dialog-checkbox-showhide-target=".title-showhide-target" />
</chkTitle>
<ttTitle
        jcr:primaryType="nt:unstructured"
        granite:class="title-showhide-target"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Service Credit Tooltip"
        name="./ttServiceCredit">
    <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="true" />
</ttTitle>

> Wrap Label

<chkTitle jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
           granite:class="cq-dialog-checkbox-showhide"
           text="Enable Title Tooltip"
           value="{Boolean}true"
           uncheckedValue="{Boolean}false"
           name="./chkTitle">
    <granite:data jcr:primaryType="nt:unstructured"
                  cq-dialog-checkbox-showhide-target=".title-showhide-target" />
</chkTitle>
<containerTitle
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    granite:class="title-showhide-target">
    <items jcr:primaryType="nt:unstructured">
        <ttTitle
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Title Tooltip"
                name="./ttTitle">


        </ttTitle>
    </items>
    <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="true" />
</containerTitle>
24
You need to login to do this manipulation!