Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
Show hide tab based on dropdown in content fragment
Hi Team,
I need help regarding show hide dropdown field inside content fragment.
Based on dropdown value in general tab, i need to show hide next tab. We need to write custom js for the same but i am not able to find any js.
Hi @jaideep_te
you need to write custom js for that.
To trigger a js on dialog open a js need to add as a clientlib:
(function (document, $, Coral) {
$(document).on('foundation-contentloaded', function (e) {
//do what you want to do here
});
})(document, Granite.$, Coral);then you can show/hide your tab based on selection.
there are other events like 'foundation-contentloaded' for when you actually want to trigger the JS, please do some research and find which one is suitable for you.
You need to create a clientlibs as category name dam.cfm.authoring.contenteditor.v2 for adding javascript when you add/edit content fragment from DAM.
Here are sample javascript for hide the tab:
(function(document, $) {
$(document).on("foundation-contentloaded", function(e) {
Coral.commons.ready(function() {
showHideHandler($(".cfm-dialog-dropdown-showhide", e.target))
})
});
$(document).on("selected", ".cfm-dialog-dropdown-showhide", function(e) {
showHideHandler($(this))
});
function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select"))
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element)
})
});
else {
var component = $(element).data("select");
if (component)
showHide(component, element)
}
})
}
function showHide(component, element) {
var target = $(element).data("cfmDialogDropdownShowhideTarget");
var showhidetargetvalue = $(element).data("showhidetargetvalue");
// Hide your tab here
}
})(document, Granite.$);Although we can add class to the dialog element using granite:class but Tab Placeholder not support granite:class property. So, we need to use auto-generated ID for Tab in this case. ID is maintaining the order you added in the content fragment model e.g., cf-tab-0, cf-tab-1, etc..
Also granite:data not supported for Tab Placeholder, so adding showhidetargetvalue property at the select node.
<_x0031_689938946527 jcr:primaryType="nt:unstructured"
granite:class="cfm-dialog-dropdown-showhide"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Question Type"
name="questionType"
valueType="string">
<optionsmultifield jcr:primaryType="nt:unstructured">
<item0 jcr:primaryType="nt:unstructured"
fieldLabel="Text"
fieldValue="text"/>
<item1 jcr:primaryType="nt:unstructured"
fieldLabel="Radio"
fieldValue="radio"/>
</optionsmultifield>
<granite:data jcr:primaryType="nt:unstructured"
showhidetargetvalue="text"
cfm-dialog-dropdown-showhide-target="#cf-tab-1"/>
</_x0031_689938946527>
<_x0031_689938985967 jcr:primaryType="nt:unstructured"
sling:resourceType="dam/cfm/models/editor/components/tabplaceholder"
fieldLabel="List of Questions"
name="placeholder"
valueType="string/tab"/>
Related Conversations
