Show/hide related implementation in dialog in AEM 6.3 | Community
Skip to main content
cquser1
cquser1
Level 7
July 23, 2017
Solved

Show/hide related implementation in dialog in AEM 6.3

  • July 23, 2017
  • 7 replies
  • 6910 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by susheel

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

    7 replies

    zeeshanKhan0786
    zeeshanKhan0786
    Level 5
    July 23, 2017

    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
    cquser1Author
    Level 7
    July 23, 2017

    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
    cquser1Author
    Level 7
    July 23, 2017

    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
    cquser1Author
    Level 7
    July 23, 2017

    Hi,

    Further pointers/reference code would be helpful.

    zeeshanKhan0786
    zeeshanKhan0786
    Level 5
    July 23, 2017

    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
    susheelAccepted solution
    Level 5
    July 23, 2017

    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
      cquser1Author
      Level 7
      July 23, 2017

      Hi Susheel,

      Thanks a ton. It really really helped me.

        Terms & ConditionsAccessibility statement

        Loading footer...