Create one show hide for tab

[Ronnie09]

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?

[milind_bachani]

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.

[Ronnie09]

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

[milind_bachani]

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

[Leela-Pavan-Kumar]

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 !!

[Ronnie09]

Hi @Leela-Pavan-Kumar 

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.... 

[Leela-Pavan-Kumar · Accepted solution]

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));