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.
Views
Replies
Total Likes
Hi,
To implement show/hide functionality for a dropdown field inside a content fragment, below steps could help:
Do you have any reference for the js which show hide multifield based on dropdown selection in content fragment.
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.
As per my understanding this is just to add multifield in content fragment and show hide fields in multifield but i want to show hide tab/multifield within a same tab based on dropdown selection.
Hi @jaideep_te
You can follow the approach below to hide the tab based on the dropdown selection.
(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
showHide($(".cq-dialog-tab-showhide", e.target));
});
$(document).on("selected", ".cq-dialog-tab-showhide", function(e) {
showHide($(this));
});
$(document).on("change", ".cq-dialog-tab-showhide", function(e) {
showHide($(this));
});
function showHide(el){
el.each(function(i, element) {
/* get the selector to find the target elements. its stored as data-.. attribute */
var target = $(element).data("cqDialogTabShowhideTarget");
if ($(element).data("select")) {
// get the selected value
var value = $(element).data("select").getValue();
// make sure all unselected target elements are hidden.
$(target).not(".hide").addClass("hide");
/* show the target element that contains the selected value as data-showhidetargetvalue attribute */
if(value)
$(target+'.'+value).removeClass("hide");
}else if ($(element).is("coral-select")) {
// get the selected value
var value = $(element).find("coral-select-item:selected").attr("value");
// make sure all unselected target elements are hidden.
$(target).not(".hide").addClass("hide");
/* show the target element that contains the selected value as data-showhidetargetvalue attribute */
if(value)
$(target+'.'+value).removeClass("hide");
} else if($(element).is('input:checkbox')){
// toggle the target element that contains the selected value as data-showhidetargetvalue attribute
if($(element).is(':checked')){
$(target).removeClass( "hide" );
}else{
$(target).addClass( "hide" );
}
}
})
}
})(document,Granite.$);
Make sure to add the script available in the authoring dialogue(with extraClientslibs).
Then follow the structure in dialog.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Component Name"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[abbvie-pro.tab-showhide]"
mode="edit" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" >
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
active="{Boolean}true"/>
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Select Tabs"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<dropdownSelector
granite:class="cmp-select-type-selection cq-dialog-tab-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Selection Type"
name="./selectionType">
<items jcr:primaryType="nt:unstructured">
<option1
jcr:primaryType="nt:unstructured"
text="Option 1"
value="selectOption1"/>
<option2
jcr:primaryType="nt:unstructured"
text="optionv 2"
value="selectOption2"/>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-tab-showhide-target=".list-option-tab-showhide-target"/>
</dropdownSelector>
</items>
</column>
</items>
</column>
</items>
</properties>
<secondTab
jcr:primaryType="nt:unstructured"
jcr:title="Second Tab"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<!-- Ttab Items-->
</items>
<layoutConfig
jcr:primaryType="nt:unstructured"
class="hide list-option-tab-showhide-target selectOption1"/>
</secondTab>
</items>
</content>
</jcr:root>
This will show the second tab if Option 1 is selected.
Hope that's what you were looking for.
Yes this is correct for the tab show hide in cq:dialog , but i am looking for the content fragment as the dialog structure in content fragment is different from normal dialog
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"/>
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies