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
