Toggle fields based on selection in Granite UI dialogs

Classic UI was built on top of the ExtJS library which has tons of inbuilt methods that can be used for anything starting for simple field validations to displaying data-rich content. I have taken a simple use case that 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. The author will have two options for giving background to text.
If he selects background style like color, he will get an additional dropdown to select a color.
If he selects the background style as an image, he will get a pathfield to select an 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 the 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 the background style.



When you select Background Color, you get pathfield to select an 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 any custom class name you would like to use, it will act as a 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 a summary, it’s a 3 step process:-

• Define a custom class.
• Add custom class defined in the select field to all fields
• Add target fields and values in all respective fields

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