Show/hide related implementation in dialog in AEM 6.3

[cquser1]

Hi zeeshan/All,

Show hide dialog fields based on selection in AEM 6.3 Based on the inputs provided here, have been trying on this for quite some time.

My component dialog is like

/apps/sample/components/content/samplleone/cq:dialog/content/items/listing/items/column/items.

Under this directly[direct descendanats] I have the below 

I have selection node of type granite/ui/components/foundation/form/select. which has values value1, value2 ....to value6.

Have two more nodes 'x' and 'y' of type granite/ui/components/foundation/container.

Basically on selection of value1 only, I have to show node 'x'. On selection of other values in dropdown, have to show node 'y'.

Tried various things, but no luck.

Custom js Code I tried so far as below :

(function(document, $) { 

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

        showHide();

    });

    function showHide(){

         var value = $("[name='./pagetitle']").val() ;

    }

})(document,Granite.$);

Once, I do the above none of the container fields show up and so many errors  come up in browser console[which seems to be pointing to some OOTB js files].

Any thoughts/pointers/reference code will be really helpful.

[zeeshanKhan0786]

Hi,

It seems that above code will through Jquery error due to not found of $("[name='./pagetitle']") value of undefined name.

did you follow this article it might helpful Toggle fields based on selection in Granite UI dialogs | Adobe AEM Club

Thanks

[cquser1]

Hi,

So far the progess is as below :

(function(document, $) {

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

        showHide();

    });

    function showHide() {

        var numberOfFields = $("[name='./Selection']").val(); // here I am getting the value selected in the dropdown field

        if (numberOfFields === 'value1') {

            alert('condition satisfied');

        }

    }

})(document, Granite.$);

This code runs through fine, but the container nodes x and y do not appear in dialog.

[cquser1]

Please ignore my comment "but the container nodes x and y do not appear in dialog." in the previous post.

All of the dialogs are appearing in front end. Based on whatever I have done so far, probably I need to show/hide the container fields in dialog[which is the requirement].

[cquser1]

Hi,

Further pointers/reference code would be helpful.

[zeeshanKhan0786]

please take a look of this ootb js /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

below is the sample package and install it.analyse the dialog node properties and try to change accordingly.

http://adobeaemclub.com/wp-content/uploads/2016/05/text-style-component-1.0.zip

[susheel · Accepted solution]

Try something as below:

We can do it using ootb classes as well. But I feel writing a clientlib is a bit cleaner and easier.

Write a clientlib with cq.authoring.dialog category and add the js as below:

<selection
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
id="partnerSelection"
name="./partnerSelection">
......
</selection>
 <multilogo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="logo-text-multifield"
id="multilogo">
.....
<multitextfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="logo-text-multifield"
id="multitextfield">

JS:

(function(document, $) {
  $(document).on('foundation-contentloaded', function(e) {
    showHide();
  });
  $(document).on('selected.select', '#partnerSelection', function(e) {
    showHide();
  });
  function showHide() {
    var selectedValue = $('#partnerSelection select').val();
    $(".logo-text-multifield").hide();
    if (selectedValue === 'name') {
      $("#multitextfield").show();
    } else {
      $("#multilogo").show();
    }
  }
})(document, Granite.$);

[cquser1]

Hi Susheel,

Thanks a ton. It really really helped me.