AEM: Hide/Show Touch UI dialog fields based on checkbox selection

 Hello, I observed a lot of people asking the same question or similar kind of, How to Hide/Show field based on selection.

Just not to over load this post, here we will see how to Show/Hide fields based on checkbox selection in this post and in next post we will see how to achieve the same thing on radio button selection.

See how to AEM: Hide/Show Touch UI dialog fields based on radio selection

Let's get started

In order to achieve this we need to create our own custom client library. I suggest not to use OOTB categories. To know how to create custom client library and configure it in dialog check out below link. Ignore if you already know.

See how to Create custom Touch Dialog UI edit client libraries

Now we know how to create the custom client library and we created and configured in our dialog.

Here I have a Demo Component and in the dialog I have 3 fields as show in below image.

Here we have 2 text fields and a checkbox. Let us see to to show/hide the Sub Title field based on checkbox(Hide Sub Title) selection.

Below is the node and properties for checkbox.

Note:  It is recommended to set value, uncheckedValue properties. Check below documentation for checkbox.

https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/checkbox/index.html

We have listener.js file in our custom client library that we created, let us open that.

listener.js

Let's add a self executable function, inside that add dialog ready event.

(function ($, document, ns) {

    $(document).on("dialog-ready", function() {

    });

})(Granite.$, document, Granite.author);

 The dialog ready event listener(or call back) will be fired once dialog is ready.

Now let's write a change event listener for checkbox in side dialog ready.

(function ($, document, ns) {

    $(document).on("dialog-ready", function() {

const showHideSubTitle = function(e) {

            if($("[name='./hide-subtitle']").prop("checked")) {

                $("input[name='./sub-title']").closest(".coral-Form-fieldwrapper").hide();

            } else {

                $("input[name='./sub-title']").closest(".coral-Form-fieldwrapper").show();

            }

        };

$(document).on("change", "[name='./hide-subtitle']", showHideSubTitle);

showHideSubTitle();

    });

})(Granite.$, document, Granite.author);

Note: The highlighted name should be updated. 

Now Save the changes and hard reload the page and open the dialog.

Check and un-check the checkbox and you can see the sub-title field is hiding and showing upon selection.

Hurrah.... We have successfully achieved  the hide and show functionality based on checkbox selection.

Hope you liked the post and it helped you. Meet you in next post. Thank you very much for your time.

-AG