Ad Code

Friday, January 11, 2019

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.

5 comments:

  1. Hi,
    can you let us know, how can we achieve the same functionality with the checkbox(not with dropdown)?
    i wanted to know how to show/hide the tabs based on the checkbox selection.
    please reply ASAP.
    Thanks in Advance.

    ReplyDelete
  2. Hi,
    If we want to show/hide both tabs and fields , do we have any OOB properties to add.
    Please help.

    ReplyDelete
  3. Hi ,
    I am trying to create Tab component. In Tabs Component cq:dialog I have 2 tabs. First Tabs take names of tab in textfield and second tab user can select active tab from drop down. I am trying to dynamically load dropdown from first tab through java.
    For which I have written DropDownServlet. My component is not able to find the component.
    Kindly help,

    ReplyDelete
  4. This does not works in 6.5 AEM, any ideas?

    ReplyDelete
  5. How to show/hide accoring to checked/unchecked checkbox in aem 6.5?

    ReplyDelete