Solved

Create one show hide for tab

Forum|Forum|4 years ago
January 6, 2022
2 replies
2193 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Leela-Pavan-Kumar

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

milind_bachani

Adobe Employee

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.

Ronnie09Author

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

Adobe Employee

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

Ronnie09Author

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded