Expand my Community achievements bar.

SOLVED

Show/hide related implementation in dialog in AEM 6.3

Avatar

Level 8

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.

1 Accepted Solution

Avatar

Correct answer by
Level 5

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.$);

View solution in original post

7 Replies

Avatar

Level 5

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

Avatar

Level 8

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.

Avatar

Level 8

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].

Avatar

Level 8

Hi,

Further pointers/reference code would be helpful.

Avatar

Level 5

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

Avatar

Correct answer by
Level 5

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.$);

Avatar

Level 8

Hi Susheel,

Thanks a ton. It really really helped me.