Tab hide not working in dialog-ready but its working...

[samsundar23]

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

[Jineet_Vora · Accepted solution]

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]

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

https://medium.com/@techforum/how-to-hide-show-tabs-in-coral-3-touch-ui-dialog-adobe-experience-mana...

[Manjunath_K]

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

[Manjunath_K]

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

https://medium.com/@techforum/how-to-hide-show-tabs-in-coral-3-touch-ui-dialog-adobe-experience-mana...

[samsundar23]

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]

@samsundar23 

can you please share updated dialog xml & listener js code

[samsundar23]

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

[samsundar23]

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

[RinkiShahi]

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")
}
}