Level 4

Solved

Tab hide not working in dialog-ready but its working in onchange method

Forum|Forum|5 years ago
October 14, 2020
6 replies
3702 views

This is a pretty straight forward question.

I'm trying to hide a tab based on drop-down selection. I have added the granite:class as image-tab for the tab to be hided.

The below piece of code is working for onchange method when ever i change drop-down, I get to see the Image tab getting hided. But the same is not retained during dialog-ready.

I get value of 'a' as undefined.

Please help me to resolve.

Please find the below clientlibs for the same.

(function(document, $, ns) {
"use strict";
$(document).on("dialog-ready", function(e) {
var imageDD = $(this).find(".cq-dialog-dropdown-showhide :selected").val();

var valueDD = $(this).find(".cq-dialog-dropdown-showhide");

if(imageDD == 'no-image'){
alert('hide the image......');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
alert('a::::'+a);
$('#'+a).hide();
}else{
alert('dont hide the image.....');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).show();
}

valueDD.on('change', function(event) {
var select = $(this).val();
if(select == 'no-image'){
alert('hide the image');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).hide();
}else{
alert('dont hide the image');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).show();
}
})
});

})(document,Granite.$, Granite.author);

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 Jineet_Vora

Hello @samsundar23,

The reason 'a' can show undefined is when JS is loaded first and then dialog fields are populated. To debug this add console statements or use JS debugger in browser.

var imageDD = $(this).find(".cq-dialog-dropdown-showhide :selected").val();

var valueDD = $(this).find(".cq-dialog-dropdown-showhide");

console.log("ImageDD: "+imageDD);

console.log("valueDD length: "+valueDD.length);

Also paste this on your browser console to check if you are getting the value: $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby')

It is also quite possible that the JS is loaded on dialog open and then your fields are populated which I think is the case.

Hope this helps!

Jineet

Jineet_Vora

Accepted solution

Community Advisor and Adobe Champion

Hello @samsundar23,

The reason 'a' can show undefined is when JS is loaded first and then dialog fields are populated. To debug this add console statements or use JS debugger in browser.

var imageDD = $(this).find(".cq-dialog-dropdown-showhide :selected").val();

var valueDD = $(this).find(".cq-dialog-dropdown-showhide");

console.log("ImageDD: "+imageDD);

console.log("valueDD length: "+valueDD.length);

Also paste this on your browser console to check if you are getting the value: $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby')

It is also quite possible that the JS is loaded on dialog open and then your fields are populated which I think is the case.

Hope this helps!

Jineet

Manjunath_K

Level 7

Hi @samsundar23

Refer this blogs which detail steps to implement "hide/show tabs in Coral 3", add modification to your dialog xml & js code accordingly.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-hide-show-tabs-in-coral-3-touch-ui-dialog-%C3%A2-adobe/td-p/368415

https://medium.com/@techforum/how-to-hide-show-tabs-in-coral-3-touch-ui-dialog-adobe-experience-manager-aem-6f65ae8ccb98?source=rss-9df2f1622001------2

Manjunath_K

Level 7

@samsundar23 can you please share updated dialog xml & listener js code

samsundar23Author

Level 4

Hi @manjunath_k

Still the same problem exists.

I added layoutConfig with class 'image-field-tab' as you said in the .
Still the image tab does not hide when i open the dialog although my selection was 'no-image' when I last applied from drop-down.
Kindly help me out.

Thanks

SS

Manjunath_K

Level 7

@samsundar23

can you please share updated dialog xml & listener js code

samsundar23Author

Level 4

Hi @manjunath_k

Please find the content.xml and banner.js

Now, even my on change which was working earlier is not working. 😞

I tried to search the class image-field-tab in the view-source of html but I could not see it.

Please help me.

content.xml [please check columnimage from below xml which is the Tab im trying to hide if No image drop-down is selected.]

<?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="Banner (M003)"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[resizing.dialog,ctabutton.dialog,banner.dialog]"
    height="30rem"
    helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#List - Sightly"
    mode="edit"
    width="60rem">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <columncontent
                jcr:primaryType="nt:unstructured"
                jcr:title="Content"
                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">
                            <listFrom
                                granite:class="cq-dialog-dropdown-showhide"
                                granite:title="Banner style"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"
                                fieldLabel="Banner style"
                                name="./variation">
                                <items jcr:primaryType="nt:unstructured">
                                    <nooffer
                                        jcr:primaryType="nt:unstructured"
                                        text="No offer (and for Evergreen Articles)"
                                        value="no-offer"/>
                                    <campaign
                                        jcr:primaryType="nt:unstructured"
                                        text="Campaign"
                                        value="banner-campaign"/>
                                    <campaign-can
                                        jcr:primaryType="nt:unstructured"
                                        text="Campaign - Can 2.5"
                                        value="banner-campaign-can"/>
                                    <homepage
                                        jcr:primaryType="nt:unstructured"
                                        text="Homepage"
                                        value="homepage-banner"/>
                                    <withoffer
                                        jcr:primaryType="nt:unstructured"
                                        text="With offer"
                                        value="with-offer"/>
                                    <noimage
                                        jcr:primaryType="nt:unstructured"
                                        text="No image"
                                        value="no-image"/>
                                </items>
                                <granite:data
                                    jcr:primaryType="nt:unstructured"
                                    cq-dialog-dropdown-showhide-target=".banner-offer-variation"/>
                            </listFrom>
                            <heading
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/include"
                                path="/apps/cba/commbank/modules/dialog-items-reference/cq:dialog/content/items/column/items/headingRTE"/>
                            <offer
                                granite:class="hide banner-offer-variation"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">                                
                                <granite:data
                                    jcr:primaryType="nt:unstructured"
                                    showhidetargetvalue="with-offer"/>
                            </offer>                         
                        </items>
                    </column>
                </items>
            </columncontent>
            <columncta
                jcr:primaryType="nt:unstructured"
                jcr:title="CTA"
                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">
                            <cta1
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/include"
                                path="/apps/cba/commbank/modules/dialog-items-reference/cq:dialog/content/items/column/items/ctabutton1-sr"/>
                            <cta2
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/include"
                                path="/apps/cba/commbank/modules/dialog-items-reference/cq:dialog/content/items/column/items/ctabutton2-sr"/>
                        </items>
                    </column>
                </items>
            </columncta>
            <columnimage
                jcr:primaryType="nt:unstructured"
                jcr:title="Image"
                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">
                            <image
                                granite:class="cq-droptarget"
                                granite:title="Upload Image Asset"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                fieldDescription="For standard Lego pages - 864 x 780 | for Evergreen article pages - 853 x 480"
                                fieldLabel="Image asset"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference"
                                mimeTypes="[image]"
                                name="./file"/>
                            <alt
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Alternate Text"
                                name="./alt"/>
                            <thumbnail
                                granite:class="cq-droptarget"
                                granite:title="Upload Thumbnail Image Asset"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                fieldDescription="87px x 87px - JPG"
                                fieldLabel="Thumbnail Image asset"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference1"
                                mimeTypes="[image]"
                                name="./file"/>
                        </items>
                    </column>
                </items>
                <layoutConfig
                    jcr:primaryType="nt:unstructured"
                    class="image-field-tab"/>
            </columnimage>
        </items>
    </content>
</jcr:root>

banner.js

attached as screenshot

Thanks
SS

samsundar23Author

Level 4

Thanks for all your inputs @manjunath_k and @jineet_vora.

banner.js file [show and hide of the tab based on drop-down selection "no-image"]

(function(document, $, ns) {
    "use strict";
	$(document).on("dialog-closed", function() {
            window.location.reload();
    });

    // below method will be triggered during dialog load
    $(document).on("dialog-loaded", function (event) {
            $(".no-image").each(function () {
                    Coral.commons.ready($(this), function (element) {
                        var product =  element.val();
                        showHide(product);
                    });
                });
	});

	// below method will be triggered during change of drop-down
    $(document).on("change", ".no-image", function () {
    	showHide($(this).val());
	}); 

    // custom method to show or hide 'Image' tab based on No image selection from drop-down
    function showHide(product){
        if(product == 'no-image'){
            var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
            $('#'+a).hide();
        }else{
            var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
            $('#'+a).show();
        }
    }
})(document,Granite.$, Granite.author);

dialog changes
- no-image is the value for property granite: class given at /coral/foundation/form/select (drop-down list)
- image-tab is the value for property granite: class given at Image Tab(tab to be hidden)

Thanks
SHYAMSUNDAR TK

R

RinkiShahi

Level 2

Hi,

Did you get any solution for your problem. I am facing a similar issue, my field should be shown and hidden based on checkbox inside multifield.

On debugging dialog-ready function, hide class is getting removed from field but again it got added from somewhere.

Below is the code.

var thankyouCheck = $("coral-checkbox[name='./addThankyouPage']")
for (var i = 0 ; i< thankyouCheck.length; i++)
{
if($(thankyouCheck[i]).find($("coral-checkbox[name='./addThankyouPage'] :checked")).length == 0 ) {
$(thankyouCheck[i]).parent().parent().children().parent().find($('div[data-showhidemultitargetvalue="true"]')).addClass("hide")
}
else {
$(thankyouCheck[i]).parent().parent().children().parent().find($('div[data-showhidemultitargetvalue="true"]')).removeClass("hide")
}
}

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded