I have a requirement where by default one tab will appear on dialog with 1 dropdown(FullWidth(default) and Contained) and 1 RTE if author select contained he should see another tab in dialog with text Field and image place holder.
For default I am clear it should be visble..
how to show only the tab which is selected in dropdown?
Solved! Go to Solution.
Views
Replies
Total Likes
Try this @Ronnie09 ,
content.xml
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="RTE" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[customValidation]" mode="edit"> <content granite:class="cq-dialog-content-page" granite:id="tabtest" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs granite:class="cq-siteadmin-admin-properties-tabs" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" size="L"> <items jcr:primaryType="nt:unstructured"> <section jcr:primaryType="nt:unstructured" jcr:title="Rich Text" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="qcomm-martech/components/content/commonElements/text/text"/> <texttype granite:class="textType" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" emptyText="Select Text Type" fieldDescription="Select Text Type" fieldLabel="Text Type" name="./textType"> <items jcr:primaryType="nt:unstructured"> <none jcr:primaryType="nt:unstructured" selected="{Boolean}true" text="None" value="_none"/> <contained granite:class="contained" jcr:primaryType="nt:unstructured" text="Contained" value="contained"/> <default granite:class="default" jcr:primaryType="nt:unstructured" text="Default" value="Default"/> </items> </texttype> </items> </column> </items> </section> <contained jcr:primaryType="nt:unstructured" jcr:title="contained" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textarea" fieldDescription="Text" fieldLabel="Text" name="./textarea"/> </items> </column> </items> </contained> <default jcr:primaryType="nt:unstructured" jcr:title="Default" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textarea" fieldDescription="Text" fieldLabel="Text" name="./textarea"/> </items> </column> </items> </default> </items> </tabs> </items> </content> </jcr:root>
JS file :
(function($, $document) { "use strict"; $(document).on("foundation-contentloaded", function(e) { $("#tabtest").each(function() { showHide(); }); }); $document.on("change", ".textType", function(e) { showHide(); }); function showHide() { var list = $("#tabtest").find("coral-tab"); let contained = $(".contained").prop("selected"); let defaultt = $(".default").prop("selected") if (contained) { list[1].removeAttribute("hidden"); } else { list[1].setAttribute("hidden", true) } if (defaultt) { list[2].removeAttribute("hidden"); } else { list[2].setAttribute("hidden", true); } } })($, $(document));
hi @Ronnie09
As I understand you want your dialog to function dynamically for which you can use a listener js.
Add a listener to the dropdown (which contains values as : [fullWidth, contained]) and check if the value is updated to contained, you show the new dialog tab (which has textfield, image placeholder) .
Here is a nearly same implementation sample :
https://www.albinsblog.com/2019/02/how-to-hideshow-tabs-in-coral-3-ui-dialogs-aem.html#.YdarCmhBxPY
Thanks.
Sorry but I mentioned some wrong statement. And the link provided above has the solution which is not working properly.
For first iteration above it is working when author select different drop down it is not hiding back
Hi @Ronnie09 ,
https://www.youtube.com/watch?v=JZFFxxiFpGY
Here's a tutorial which uses OOTB dropdownhideshow in aem , however there is already known issue that it doesnt work for tabs, I will try checking it. You can also have a look and check if it helps.
Thanks
Hi @Ronnie09 ,
Try with below code snippet
JS File :
(function($, $document) { "use strict"; $(document).on("foundation-contentloaded", function(e) { $("#tabhideandshow").each(function() { showHide(); }); }); $document.on("change", ".textType", function(e) { showHide(); }); function showHide() { var list = $("#tabhideandshow").find("coral-tab"); let contained = $(".contained").prop("selected"); if (contained) { list[1].removeAttribute("hidden"); } else { list[1].setAttribute("hidden", true) } } })($, $(document));
content.xml
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="default" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[customValidation]" mode="edit"> <content granite:class="cq-dialog-content-page" granite:id="tabhideandshow" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs granite:class="cq-siteadmin-admin-properties-tabs" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" size="L"> <items jcr:primaryType="nt:unstructured"> <section jcr:primaryType="nt:unstructured" jcr:title="Default" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="qcomm-martech/components/content/commonElements/text/text"/> <texttype granite:class="textType" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" emptyText="Select Text Type" fieldDescription="Select Text Type" fieldLabel="Text Type" name="./textType"> <items jcr:primaryType="nt:unstructured"> <default jcr:primaryType="nt:unstructured" selected="{Boolean}true" text="Default" value="default"/> <Contained granite:class="contained" jcr:primaryType="nt:unstructured" text="Contained" value="contained"/> </items> </texttype> </items> </column> </items> </section> <contained granite:class="contained-hide" jcr:primaryType="nt:unstructured" jcr:title="Contained" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="Text" fieldLabel="Text" name="./text"/> </items> </column> </items> </contained> </items> </tabs> </items> </content> </jcr:root>
Hope it works !!
It is working quite good but for------- default I have another tab to show..
for contained another tab to show
I did the below it is working
function showHide() {
var list = $("#tabhideandshow").find("coral-tab");
let contained = $(".contained").prop("selected");
let good=$(".good").prop("selected");
if (contained) {
list[1].removeAttribute("hidden");
} else {
list[1].setAttribute("hidden", true);
}
if(good){
list[2].removeAttribute("hidden");
}
else{
list[2].setAttribute("hidden", true);
}
}
I added this if and else.... can we reduce the statement for if else....
Try this @Ronnie09 ,
content.xml
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="RTE" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[customValidation]" mode="edit"> <content granite:class="cq-dialog-content-page" granite:id="tabtest" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs granite:class="cq-siteadmin-admin-properties-tabs" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" size="L"> <items jcr:primaryType="nt:unstructured"> <section jcr:primaryType="nt:unstructured" jcr:title="Rich Text" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="qcomm-martech/components/content/commonElements/text/text"/> <texttype granite:class="textType" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" emptyText="Select Text Type" fieldDescription="Select Text Type" fieldLabel="Text Type" name="./textType"> <items jcr:primaryType="nt:unstructured"> <none jcr:primaryType="nt:unstructured" selected="{Boolean}true" text="None" value="_none"/> <contained granite:class="contained" jcr:primaryType="nt:unstructured" text="Contained" value="contained"/> <default granite:class="default" jcr:primaryType="nt:unstructured" text="Default" value="Default"/> </items> </texttype> </items> </column> </items> </section> <contained jcr:primaryType="nt:unstructured" jcr:title="contained" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textarea" fieldDescription="Text" fieldLabel="Text" name="./textarea"/> </items> </column> </items> </contained> <default jcr:primaryType="nt:unstructured" jcr:title="Default" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textarea" fieldDescription="Text" fieldLabel="Text" name="./textarea"/> </items> </column> </items> </default> </items> </tabs> </items> </content> </jcr:root>
JS file :
(function($, $document) { "use strict"; $(document).on("foundation-contentloaded", function(e) { $("#tabtest").each(function() { showHide(); }); }); $document.on("change", ".textType", function(e) { showHide(); }); function showHide() { var list = $("#tabtest").find("coral-tab"); let contained = $(".contained").prop("selected"); let defaultt = $(".default").prop("selected") if (contained) { list[1].removeAttribute("hidden"); } else { list[1].setAttribute("hidden", true) } if (defaultt) { list[2].removeAttribute("hidden"); } else { list[2].setAttribute("hidden", true); } } })($, $(document));
Views
Likes
Replies
Views
Likes
Replies