Touch UI - Hide/Show Fields in the dialog in AEM by selection/checkbox

In this post, I'll cover 2 methods to hide/show fields in the touch UI dialog of AEM. One is the OOTB method provided by aem for toggling fields based on dropdown selection field and other method is toggling fields programmatically based on any resourceType (checkbox, selection etc.)

Method 1:
This method uses some class and attributes provided by AEM OOTB which is applicable to only toggle fields based on dropdown selection and thus is the easiest way to achieve hide/show.

First, you have to add below 2 properties to the selection field as shown below:

class : cq-dialog-dropdown-showhide
cq-dialog-dropdown-showhide-target : .list-option-listfrom-showhide-target


Then, add another 2 properties to each child container which you want to show/hide based on dropdown selection:

class: hide list-option-listfrom-showhide-target
showhidetargetvalue : field11

Thus for any child containers which you want to hide/show- add a class property which matches the data-target attribute of selection field as shown above and add another property of showhidetargetvalue with value equal to dropdown options value.

Method 2:
This method is a generic method and you can use it to hide/show fields based on any resourceType like chekbox or selection etc. Here, I'll toggle fields using jQuery logic written in a js file inside clientlibs folder with category cq.authoring.dialog .

To use this method, add any attribute (I've added listener) to checkbox(or selection) field and child fields which you want to toggle and give any value which u'll be using it as an identifier in js file as shown below:




Now, use the below logic applied when the dialog is loaded and fetch the checkbox value using listener and toggle fields whichever you want using listeners.

(function (document, $) {

    'use strict';

 var CHECKBOX_LIST = 'touch.checkbox';

 var FIELD5_LIST = 'touch.field5'

 var FIELD6_LIST = 'touch.field6';

$(document).on("foundation-contentloaded",function () {

 var $dialog = $(document).find('.cq-dialog');

 function showhideCheckbox() {

   var isChecked = false;

   var isTextfield = false;

   var el = $dialog.find("[data-listener='" + CHECKBOX_LIST + "']");

   if (el[0] !== undefined) {

 isChecked = el[0].checked;

   }

   if (isChecked === true) {

 $dialog.find("[data-listener='" + FIELD5_LIST + "']").parent().show();

 $dialog.find("[data-listener='" + FIELD6_LIST + "']").parent().hide();

   }  

   else {

 $dialog.find("[data-listener='" + FIELD5_LIST + "']").parent().hide();

 $dialog.find("[data-listener='" + FIELD6_LIST + "']").parent().show();

   }

}

  var checkBtn = $("[data-listener='" + CHECKBOX_LIST + "']").closest('.coral-Checkbox');

  if (checkBtn.length === 1) {

 showhideCheckbox();

 checkBtn.on('click', function () {

  showhideCheckbox();

 });

  }   

});

})(document,Granite.$);

And at the last, if you are using acs-commons package in your project, then it already provides showhidedialogfields.js in clientlibs which you can directly use without using any of the above methods.

It provides an extension to the standard dropdown/select and checkbox component. But It enables hiding/unhiding of multiple dialog fields based on the selection made only in the dropdown/select or on checkbox check.