Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

To show Tabs on the basis of dropdown option selection

Avatar

Level 2

Hi,
I have 3 tabs in my dialog, the first tab has the dropdown and the other two tabs have different fields in it, I want to show the tabs on the basis of dropdown option selection, please share your ideas on this.

 

This is the js I am using:

(function(document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});

$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});

function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
})
}

function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
var elementIndex = $(element).closest('coral-multifield-item').index();

if (target) {
var value;
if (component.value) {
value = component.value;
}
$target.each(function(index) {
var tarIndex = $(this).closest('coral-multifield-item').index();
if (elementIndex == tarIndex) {
$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
}
});
}
}

})(document, Granite.$);


the classes which I have given as properties to the nodes are given in the images attached.





Thanks

CC : @EstebanBustamante , @kautuk_sahni , @ksh_ingole7 , @ayush-804 , @arunpatidar

6 Replies

Avatar

Level 2

the js given in the link is partially correct, when I am selecting any option from the dropdown, I am able to see the fields of the tab(which I selected from dropdown) , but also I am able to see only the tab name which I have not selected from the dropdown, what could be the correct js for it.

Avatar

Level 9

Hi @Sandeep_k_Singh ,

To show tabs based on dropdown option selection in an AEM dialog, you can modify the existing JavaScript code to add logic that shows and hides the tabs based on the selected option.

Here's an example of how you can modify the existing code to show and hide tabs based on the selected option:

1. Add a data attribute to the tabs: Add a data attribute to each tab that specifies the value of the dropdown option that should be selected to show the tab. For example, you can add a `data-showhidetabvalue` attribute to each tab with the value of the corresponding dropdown option.

2. Modify the `showHideHandler` function: Modify the `showHideHandler` function to show and hide the tabs based on the selected option. You can use the `value` variable to get the selected option value and the `data-showhidetabvalue` attribute to match the value with the corresponding tab.

Here's the modified JavaScript code:

```
(function(document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});

$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});

function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
});

// show/hide tabs based on selected option
var value = el.val();
var tabs = $(".coral-TabPanel-tab");
tabs.each(function(i, tab) {
var tabValue = $(tab).data("showhidetabvalue");
if (tabValue === value) {
$(tab).show();
} else {
$(tab).hide();
}
});
}

function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
var elementIndex = $(element).closest('coral-multifield-item').index();

if (target) {
var value;
if (component.value) {
value = component.value;
}
$target.each(function(index) {
var tarIndex = $(this).closest('coral-multifield-item').index();
if (elementIndex == tarIndex) {
$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide"); }
});
}
}

})(document, Granite.$);
```

Note that this is just an example and you may need to modify the code to fit your specific use case. It's also recommended to consult with experienced AEM developers or solution architects to ensure that the code is implemented correctly and follows best practices.

Avatar

Community Advisor

@Sandeep_k_Singh Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.