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.



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



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



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



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







Step 2:
Now for the fields which you want to toggle follow below steps:-
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.
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.





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

As summary, it’s a 3 step process:-
Define custom class.
Add custom class defined in select field to all fields
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.