Adobe Experience Manager Sites & More

samsundar23 · ‎14-10-2020

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

View profile · 14-10-2020

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 · ‎14-10-2020

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

View profile · 15-10-2020

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

Adobe Experience Manager Sites & More

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

Accepted Solutions (1)

Accepted Solutions (1)

Answers (2)

Answers (2)

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe