Disabling the field based on the selection of a drop down | Community
Skip to main content
sai_santhosht50
sai_santhosht50
Level 2
May 25, 2020
Solved

Disabling the field based on the selection of a drop down

  • May 25, 2020
  • 3 replies
  • 11649 views

Hi guys,

 

I have a custom hero component in which the dialog contains two tabs.

 

The ask here is:

In tab1, there is a dropdown contains v1,v2 &v3 as its values. In tab2 there is drop down field.

use cases: 1) if i select v1 & v2 in tab1, then the drop down field in tab2 should be visible.

                   2) if i select v3 in tab1, then the drop down field in tab2 should be disabled.

                   3) By default v1 will be selected , so the field in other tab should be visible.

 

AEM:- v6.4.5

put your suggestions over here

Thanks in advance.

    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 VeenaVikraman

    @sai_santhosht50 The steps mentioned in the link by @theo_pendle mentioned by @suraj_kamdi will help you with one option at a time.That means, if you want to show dropdown in Tab 2 when you select val1 , it will work. But for showing  dropdown in Tab 2 , when you select both val1 and val2 , you need to tweek the JS a little bit. I tried to do the same and adding the steps below. I would like you to use meaningful names , the values here are just for demo

     

      1. Follow the steps mentioned by @theo_pendle in his blog to the dot.
      2. Now , when you run this, you will see that , your fields are getting hidden for val2 and val3. That's perfectly alright. We will adjust this😉
      3. Below are the steps I did to get it to work for this use-case . Before going to that I will just walk you through the js a bit , to give an understanding on what exactly happens when you set the values mentioned in the blog
        1. Go to /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js in your CRXDE and open the JS
        2.  if you check this line, you can see that only the element with the "showhidetargetvalue" will be visible and everything else will be hidden via line 63.  So what we should do is to modify this line to make the field visible for one more value. The beauty of data- attributes is that you can give any name and add a data-* attribute to your HTML element. So I will create another data-* attribute element and add to the field.
      4. Go to your component node and add another data-* attribute value as below. This value can be anything

         

      5. Now I copied the dropdownshowhide.js JS to my component to modify it. I created a clientlib and added it as extraclientlib to my component. 

         

         

      6. Now in the JS I added an additional line to make sure the fields with the new data attribute value I added will also be showed when I select the dropdown 

         This worked for me and should work in your case. Hope it is helps☺🙂

    3 replies

    Suraj_Kamdi
    Community Advisor
    Suraj_KamdiCommunity Advisor
    Community Advisor
    May 25, 2020

    @sai_santhosht50 

    Go through this blog to customize your cq:dialog

    https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral-3-ie-aem-6-3-bfd48c261012

     

    I hope this will help 🙂 

      Theo_Pendle
      Theo_Pendle
      Level 8
      May 25, 2020

      Hi @sai_santhosht50,

      Well @suraj_kamdi already shared my article on using the OOTB dropdown show/hide functionality (yay, I'm famous!) but I also wrote another tutorial you might be interested in: https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-or-anything-else-6b23b2515810. This one will show you a simple framework for creating much more complex master-slave relationships between any widgets (not just based on drop-downs 😉 )

      In any case, I think you'll find what you need in the first tutorial but the second one might come handy in the future. If you have any follow-up questions, don't hesitate!

        K
        Adobe Employee
        Kaustav_MajoomderAdobe Employee
        Adobe Employee
        October 7, 2022

        Hey, I just used the approach you mentioned for selection(aka dropdown) in your article. It is working fine. But, if, I am putting this inside a multifield, the dynamic logic is getting applied for all the items. So, if i want to make a change of 2nd item, the 1st item is also been synced with the 2nd one.

        VeenaVikraman
        Community Advisor
        VeenaVikramanCommunity AdvisorAccepted solution
        Community Advisor
        May 25, 2020

        @sai_santhosht50 The steps mentioned in the link by @theo_pendle mentioned by @suraj_kamdi will help you with one option at a time.That means, if you want to show dropdown in Tab 2 when you select val1 , it will work. But for showing  dropdown in Tab 2 , when you select both val1 and val2 , you need to tweek the JS a little bit. I tried to do the same and adding the steps below. I would like you to use meaningful names , the values here are just for demo

         

          1. Follow the steps mentioned by @theo_pendle in his blog to the dot.
          2. Now , when you run this, you will see that , your fields are getting hidden for val2 and val3. That's perfectly alright. We will adjust this😉
          3. Below are the steps I did to get it to work for this use-case . Before going to that I will just walk you through the js a bit , to give an understanding on what exactly happens when you set the values mentioned in the blog
            1. Go to /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js in your CRXDE and open the JS
            2.  if you check this line, you can see that only the element with the "showhidetargetvalue" will be visible and everything else will be hidden via line 63.  So what we should do is to modify this line to make the field visible for one more value. The beauty of data- attributes is that you can give any name and add a data-* attribute to your HTML element. So I will create another data-* attribute element and add to the field.
          4. Go to your component node and add another data-* attribute value as below. This value can be anything

             

          5. Now I copied the dropdownshowhide.js JS to my component to modify it. I created a clientlib and added it as extraclientlib to my component. 

             

             

          6. Now in the JS I added an additional line to make sure the fields with the new data attribute value I added will also be showed when I select the dropdown 

             This worked for me and should work in your case. Hope it is helps☺🙂

          sai_santhosht50
          sai_santhosht50Author
          Level 2
          May 27, 2020
          @veenavikraman
          Terms & ConditionsAccessibility statement

          Loading footer...