Show/Hide Tabs and Fields based on Drop Down Selection Using Granite Widgets in AEM

Hello Everyone,

While creating components, we come across a lot of situations where we need to show

and hide tabs based on drop-down selection, show and hide fields on the basis of

drop-down, radio-button and checkbox.

So in this blog, I will talk about the two situations in detail with demo videos

and sample package.

1. Show and Hide tabs based on Drop Down selection
2. Show and Hide fields based on Drop Down selection

Show and Hide Tabs based on Drop Down Selection

Let’s take an example, in which There are two options “Image” and “Video” in the drop down in the first tab and if author choose image, the tab 2 "Image" shows up and if author choose video,tab 3 "Video" shows up.

Step 1:Make a drop down field in the first tab and make second and third tab

as per your requirement.

Step 2: The drop down node must have these properties:

Name	Type	Value
class	string	cq-dialog-tab-showhide
cq-dialog-tab-showhide-target	string	.list-option-tab-showhide-target

Fig -1 Add Properties in the DropDown Field Widget

Step 3: The value property of options is very important as in my component, the value property is image and video for both options.

Fig -2

Step 4: Now to open Tab 2 on the selection of “Image” Option from the drop -down,

create a node “layoutConfig” as shown below  in the tab and configure a property class having value “hide list-option-tab-showhide-target image”.Here “image” in class name should match with the value of option selected in tab1. For video tab the value will be “hide list-option-tab-showhide-target video”.

Fig -3 Add layoutConfig Node to Show/Hide Tabs 

Step 4 : Create a clientlib having “categories” as “cq.authoring.dialog” and add a js file in it.

That’s all you are supposed to do and your component will start working.This is not AEM OOTB feature, so to support this functionality we are using custom JS.

Demonstration Video on Show/Hide Tabs Based on Drop Down Selection:

Show and Hide Fields based on Drop Down Selection

Let’s take an example, in which There are two options “Title” and “URL” in the drop down, if author choose “title” show “Title” else show “URL” widget for adding path.

Step 1: Make a drop down having two options:Title and URL having value “title” and “url”.

Step 2:The drop down node must have these properties:

Name	Type	Value
class	string	cq-dialog-dropdown-showhide
cq-dialog-dropdown-showhide-target	string	.title-url-hide-show

Fig -4 Add Properties in the DropDown Field Widget

The value of “cq-dialog-dropdown-showhide-target” can be changed as per your need. Right now it is “.title-url-hide-show”. You can change it to” .text-image-hide-show” if you are hiding and showing text and image.Try to use good naming convention.

Step 3: Now to show and hide fields based on title, follow the steps:

• Create a node name “title” of type "nt:unstructured" having "sling:resourceType" as "granite/ui/components/foundation/container" having the following properties:

Name	Type	Value
showhidetargetvalue	string	title
class	string	hide title-url-hide-show

Note: “showhidetargetvalue” depends on the “value” of options in the drop down. For URL Option,  the “showhidetargetvalue” would be “url”.

Note: the “class” value will be same as defined in the property of “cq-dialog-dropdown-showhide-target” of the drop-down.just add “hide” before that value

• Create “items”(nt:unstructured) as a child node of “title” node.
• Create “well” (nt:unstructured) as a child node of items having sling:resourceType as “granite/ui/components/foundation/container”
• Create a node “layout” (nt:unstructured) under “well” node having sling:resourceType as granite/ui/components/foundation/layouts/well.
• Create a “items” (nt:unstructured) node parallel to layout of type nt:unstructured.
• Add as many widgets under “items” node you want to show on the selection of title option.

Step 4: Repeat Step 3 for URL option as well.

Fig-5

And that’s all you are supposed to do.There is no need to write any custom JS as AEM has this as an OOTB functionality.

Demonstration Video on Show/Hide Fields Based on Drop Down Selection:

INSTALL DEMO PACKAGE

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!

Thanks and Happy Learning.