-1

I am relatively new to AEM and I am trying to hide/show dialog fields on checkbox click. I have tried some ways but failed to achieve this functionality. This is just for my own learning. How can I achieve this?

I have tried adding the js clientlib and adding some classes and target to the checkbox and target fields respectively as suggested in other answers but it didn't seem to work. Please help.

Lothbrok
  • 9
  • 4

1 Answers1

1

First you need to create a clientLibs and add categories as cq.authoring.dialog.all, see the code below:

  (function($, $document) {
 $document.on("dialog-ready", function() {
   Coral.commons.ready($document, function () {   
  dispalyOrHideTabs();   
  $(document).on('change', '#showText', function() {

      if($('#showText').attr('checked')){
        show('1');
      }else{
          hide('1');    
      }

 });

 $(document).on('change', '#showTable', function() {

       if($('#showTable').attr('checked')){
          show('2');
      }else{
          hide('2');    
      }

 });    

     function hide(index){
                     var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
                      var tab2 = tab.attr("aria-labelledby");
                      var tab3 = $document.find("[id='"+tab2+"']");
                      tab3.addClass("hide");
     }
     function show(index){
                     var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
                      var tab2 = tab.attr("aria-labelledby");
                      var tab3 = $document.find("[id='"+tab2+"']");
                      tab3.removeClass("hide");
     }

     function dispalyOrHideTabs(){
         var editable = Granite.author.DialogFrame.currentDialog.editable;
         if(editable){
        var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
         if(node){
            var storedTextValue = node.showText;
             var storedTableValue = node.showTable;

             if(storedTextValue){
                    show('1');
             }else{
                    hide('1');
             }

             if(storedTableValue){
                    show('2');
             }else{
                    hide('2');
             }

         }
     }

     }

    });
     });

  })($, $(document));

Add granite:id property as showText of the checkbox resource type.

And below is the dialog tabs which will be hidden and shown: enter image description here

Pakira
  • 1,951
  • 3
  • 25
  • 54
  • added the js clientlib and granite:id property and target id too, still doesn't work – Lothbrok Sep 19 '19 at 13:41
  • Not sure, if you have understood the code, this is based on coral3 and you have to define proper id of checkbox field and in this code it show/hide different tabs of a dialog. As your requirement is to show/hide another field within the same tab then you can modify the code to add and remove "hide" class accordingly – Pakira Sep 19 '19 at 13:51