Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Create one show hide for tab

Avatar

Level 7

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?

1 Accepted Solution

Avatar

Correct answer by
Level 4

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

View solution in original post

6 Replies

Avatar

Employee Advisor

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.

Avatar

Level 7

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

 

Avatar

Employee Advisor

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

Avatar

Level 4

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

Avatar

Level 7

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

Avatar

Correct answer by
Level 4

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