AEm 6.2 show hide tabs in a component TOUCH UI

When we are developing AEM component we came up with a lot of situation where we want to show tabs on the basis of selection. And in selection also we have two scenarios.

Scenario 1: when we want to show a number of selected tabs. example if we select tab 6 from dropdown so our component will show 6 Tabs. for reference please see the screenshots below

To solve this scenario I am giving the sample code for cq_dialog.xml code and js code.

cq_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="show hide tabs" sling:resourceType="cq/gui/components/authoring/dialog"> <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"/> <items jcr:primaryType="nt:unstructured"> <tab0 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"> <drpdown jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" class="cq-dialog-tab-showhide" cq-dialog-tab-showhide-target=".list-option-tab-showhide-target" fieldLabel="select no. of tabs" name="./tabs"> <items jcr:primaryType="nt:unstructured"> <tab1 jcr:primaryType="nt:unstructured" text="Tab 1" value="1"/> <tab2 jcr:primaryType="nt:unstructured" text="Tab 2" value="2"/> <tab3 jcr:primaryType="nt:unstructured" text="Tab 3" value="3"/> <tab4 jcr:primaryType="nt:unstructured" text="Tab 4" value="4"/> <tab5 jcr:primaryType="nt:unstructured" text="Tab 5" value="5"/> <tab6 jcr:primaryType="nt:unstructured" text="Tab 6" value="6"/> <tab7 jcr:primaryType="nt:unstructured" text="Tab 7" value="7"/> </items> </drpdown> </items> </column> </items> </column> </items> </tab0> <tab1 jcr:primaryType="nt:unstructured" jcr:title="Tab 1" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem1"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 1"/> </tab1> <tab2 jcr:primaryType="nt:unstructured" jcr:title="Tab 2" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem2"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 2"/> </tab2> <tab3 jcr:primaryType="nt:unstructured" jcr:title="Tab 3" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem3"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 3"/> </tab3> <tab4 jcr:primaryType="nt:unstructured" jcr:title="Tab 4" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem4"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 4"/> </tab4> <tab5 jcr:primaryType="nt:unstructured" jcr:title="Tab 5" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem5"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 5"/> </tab5> <tab6 jcr:primaryType="nt:unstructured" jcr:title="Tab 6" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem6"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 6"/> </tab6> <tab7 jcr:primaryType="nt:unstructured" jcr:title="Tab 7" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Menu Item Name" name="./menuItem7"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target 7"/> </tab7> </items> </content> </jcr:root>


showhidetabs.js
 for this create a clientlib and add categories as cq.authoring.dialog and paste the js file in clientlib folder. For reference see the screenshot below

(function(document, $) { "use strict"; $(document).on("foundation-contentloaded", function(e) { 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) { var target = $(element).data("cqDialogTabShowhideTarget"); if ($(element).data("select")) { var value = $(element).data("select").getValue(); $(target).not(".hide").addClass("hide"); if(value) var i; for (i = 0; i <= value; i++) { $(target+'.'+i).removeClass("hide"); } } //$(target+'.'+value).removeClass("hide"); }) } })(document,Granite.$);

Once you are done with those changes add other things like cq_editConfig and write the HTML code for the component and then the component will work perfectly.

Scenario 2: When we want to show only the selected tab from the dropdown. Example lets say we have three values in the dropdown image, video, and Text. If we select the image then it will show only image tab for reference please see the screenshots below.

To solve this scenario please find the cq_dialog.xml and js code 

cq_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="show hide tab" sling:resourceType="cq/gui/components/authoring/dialog"> <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"/> <items jcr:primaryType="nt:unstructured"> <tab0 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"> <drpdown jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" class="cq-dialog-tab-showhide" cq-dialog-tab-showhide-target=".list-option-tab-showhide-target" fieldLabel="select Tab" name="./tab"> <items jcr:primaryType="nt:unstructured"> <tab1 jcr:primaryType="nt:unstructured" text="Image" value="image"/> <tab2 jcr:primaryType="nt:unstructured" text="Video" value="video"/> <tab3 jcr:primaryType="nt:unstructured" text="Text" value="text"/> </items> </drpdown> </items> </column> </items> </column> </items> </tab0> <tab1 jcr:primaryType="nt:unstructured" jcr:title="Image" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Alt Text" name="./altText"/> <dkimage jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fileupload" allowUpload="{Boolean}false" class="cq-droptarget" fieldDescription="Drag-drop the image to be used in HTML." fieldLabel="Desktop Image" fileReferenceParameter="./largeImageFileReference" mimeTypes="[image]" title="Drag and Drop Image" uploadUrl="${suffix.path}" useHTML5="{Boolean}true"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target image"/> </tab1> <tab2 jcr:primaryType="nt:unstructured" jcr:title="Video" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Enter Video Path" name="./videoPath"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target video"/> </tab2> <tab3 jcr:primaryType="nt:unstructured" jcr:title="Text" 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"> <item jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Name" name="./text"/> </items> </column> </items> </column> </items> <layoutConfig jcr:primaryType="nt:unstructured" class="hide list-option-tab-showhide-target text"/> </tab3> </items> </content> </jcr:root>

showHideTab.js
 for this create a clientlib and add categories as cq.authoring.dialog and paste the js file in clientlib folder. For reference, a screenshot is attached above.

(function(document, $) { "use strict"; $(document).on("foundation-contentloaded", function(e) { 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) { var target = $(element).data("cqDialogTabShowhideTarget"); if ($(element).data("select")) { var value = $(element).data("select").getValue(); $(target).not(".hide").addClass("hide"); if(value) $(target+'.'+value).removeClass("hide"); } }) } })(document,Granite.$);

Once you are done with those changes add other things like cq_editConfig and write the HTML code for the component and then the component will work perfectly.

For any query and suggestion please comment or write us an email at rishabhy555@gmail.com