Toggle fields based on selection in Granite UI dialogs

 

Classic UI was built on top of ExtJS library which has tons of inbuilt methods that can used for anything starting for simple field validations to dispalying data rich content. I have taken a simple use case which was easy to implement in classic UI but there is no approach available for it  in Granite UI and have seen many developers writing complex JS code to make it work.

The use case which I will be depicting will be of Show and Hide of fields without complex code. Let’s take a scenario you have a simple text component. Author will have two options for giving background to text.

  • If he selects background style as color,  he will get an addition dropdown to select color.
  • If he selects background style as image, he will get an pathfield to select image.

AEM is having one OOTB library to implement this hide/show feature. You can below path:-

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

In order to use this library there are few steps that developer has to follow. They are already mentioned in Js file, but I will try to implement with our example step by step:-

Before we start adding this show/hide feature, make sure you have built your component with all fields. At this point don’t worry about listeners, make sure you have all the fields present.

All fields in dialog

Once listeners are added, You will have two options in background style.

Background Style

When you select Background Color, you get pathfield to select image from DAM

Default Initial State

When you select Background Image, you get drop down to select colors.

Color Drop Down

As you switch between background style, appropriate fields are shown and rest gets hidden.

We are done with the dialog, let’s see how you can implement it on your own.

Step 1:  

Add class with value cq-dialog-dropdown-showhide as property (as shown with 1) on the main select field. Once the class is added, add a property with name cq-dialog-dropdown-showhide-target, value for which should be the any custom class name you would like to use, it will act as selector (as shown in 2) i have used .text-image-hide-show

Parent dropdown selecton properties

Image dropdown value

Color dropdown value

Step 2: 

Now for the fields which you want to toggle follow below steps:-

  1. Add property showhidetargetvalue  with value should be equal the value of the select option that will unhide this element. As we want that when user select ‘Background Image’ we have to show bg-image field, so values here will the equal to the value of ‘Background Image’. Similarly for other field also.
  2. Add property class for which values will hide and the custom class name which we gave in step 1 which is text-image-hide-show 

I have done these changes for both the nodes, one is image pathfield and another is color dropdown.

BG-image target details

BG-color target details

You can find the component package here: text-style-component-1.0

As summary, it’s a 3 step process:-

  1. Define custom class.
  2. Add custom class defined in select field to all fields
  3. Add target fields and values in all respective fields

OOTB List component is a good example for this type of component. Let me know if have any issue in implementing this.

7 thoughts on “Toggle fields based on selection in Granite UI dialogs

    1. To hide the field label as well the easiest way is to move the field to be hidden inside new section and items nodes and apply the showhidetargetvalue attribute to this new section.

       
      1. Hi Praveen,

        I had a similar requirement and ended up making my own function…

        If a user selects option ‘A’ or option ‘B’ then the hidden field is shown but not if any other option is selected.

        I hope this helps,
        Mark

         

Leave a Reply

Your email address will not be published. Required fields are marked *