In AEM based on selection of drop-down show some(hide some) options in other dropdown | Community
Skip to main content
S
srikanthg212933
Level 3
May 26, 2020
Solved

In AEM based on selection of drop-down show some(hide some) options in other dropdown

  • May 26, 2020
  • 4 replies
  • 11884 views

Hi, 

currently dropdownshowhide.js is able to perform hide and show field/fields based on the dropdown selection.

I have requirement like below:

I have two dropdowns lets say dp1&dp2. 

  • dp1 contains option1 and option2 as options
  • dp2 contains a,b,c,d,e,f as options

so if dp1 is selected option1 then I want to show a,b,c options in dp2(hide d,e,f)

And similarly dp1 is selected option2 then I want to show d,e,f options in dp2(hide a,b,c)

 

How can I achieve the above let me know if anyone come across the situation similar to this. Thanks in advance

 

@arunpatidar @theo_pendle @veenavikraman 

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 Theo_Pendle

Hi @srikanthg212933,

I answered a similar question recently. For your specific case I think the best option that will be simplest and require least maintenance is the following: Modify the content of dp2 in the front end. This is the quickest solution. Follow this tutorial to design a simple framework for dynamically modifying TouchUI dialogs: AEM: Conditionally show or hide a field based on a Checkbox widget (or anything else). The tutorial doesn't use your exact use case, but it doesn't have to because it's easily extensible 🙂

@vish.dhaliwal also shared a useful previous answer which modified the content of dropdown by making changes in the datasource in the back end. The problem with this is that you still need front-end code to make it work. If you needed some kind of backend validation, or if the values in dp2 are truly dynamic (ie: they changed based on which user is logged, the day of the week etc.) then manipulating the datasource would make sense but it doesn't seem like that's your use-case. If you chose to go that route anyways, here is a tutorial to create a generic framework for building datasource (you can probably tell by now that I like extensible frameworks 😂  AEM: Populate a drop-down with a data source

Let me know if that helps! 🙂

 

4 replies

V
Adobe Employee
vish.dhaliwalAdobe Employee
Adobe Employee
May 26, 2020

Please review post: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-selection-dropdown-in-aem6-2/qaq-p/244620

Hope this helps!

    V
    Adobe Employee
    vish.dhaliwalAdobe Employee
    Adobe Employee
    May 26, 2020

    Please review post: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-selection-dropdown-in-aem6-2/qaq-p/244620

      S
      srikanthg212933Author
      Level 3
      May 26, 2020
      Hi ,my requirement is not about populating second dropdown dynamically. I am looking for static options hide and show(some fields at a time) based on first drop down selection
      Theo_Pendle
      Theo_PendleAccepted solution
      Level 8
      May 26, 2020

      Hi @srikanthg212933,

      I answered a similar question recently. For your specific case I think the best option that will be simplest and require least maintenance is the following: Modify the content of dp2 in the front end. This is the quickest solution. Follow this tutorial to design a simple framework for dynamically modifying TouchUI dialogs: AEM: Conditionally show or hide a field based on a Checkbox widget (or anything else). The tutorial doesn't use your exact use case, but it doesn't have to because it's easily extensible 🙂

      @vish.dhaliwal also shared a useful previous answer which modified the content of dropdown by making changes in the datasource in the back end. The problem with this is that you still need front-end code to make it work. If you needed some kind of backend validation, or if the values in dp2 are truly dynamic (ie: they changed based on which user is logged, the day of the week etc.) then manipulating the datasource would make sense but it doesn't seem like that's your use-case. If you chose to go that route anyways, here is a tutorial to create a generic framework for building datasource (you can probably tell by now that I like extensible frameworks 😂  AEM: Populate a drop-down with a data source

      Let me know if that helps! 🙂

       

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        May 26, 2020

        Hi,

        You need to write a custom frontend javascript code to achieve this. The OOTB dropdownshowhide.js will not work to hide options of other dropdown options.

        If you know the options are fixed in both the dropdown then it will be a simple javascript code.

         

         

         

         

         

        Arun Patidar
          S
          srikanthg212933Author
          Level 3
          May 27, 2020

          any references

          Terms & ConditionsAccessibility statement

          Loading footer...