Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Touch UI Dialog Tabs - granite:hidden does not hide tab

Avatar

Level 2

Hi,

we are moving from Classic UI to touch UI on AEM 6.3 SP1. There is one component which has 3 tabs[general, Image1, Image2]. When dialog opens, only first tab[general] should be visible to author, other two tabs[image1,image2] should be in hidden state. To hide two tabs, we have used granite:hidden{Boolean} true property on two tabs[image1, image2]. These two tabs has sling:resourcetypes granite/ui/components/coral/foundation/fixedcolumns.

1582963_pastedImage_6.png

1583015_pastedImage_7.png

This property hides all fields under tabs [image1, Image2] but does not hide tab label from tab header.

1583016_pastedImage_8.png

1583017_pastedImage_9.png

In browser developer tool, i can see "hidden" is applied to tabs content but not on tab label.

1583029_pastedImage_0.png

6 Replies

Avatar

Community Advisor

Dear Vikash,

Have a look at following adaptTo presentation from this year, it may answer the question you currently have[0].

[0] https://adapt.to/2018/en/schedule/migrating-a-large-aem-project-to-touchui.html

Regards,

Peter

Avatar

Level 2

Hi,

The adaptTo presentation has excellent explanation about fundamental concept of touch UI, approaches, best practices, tools that we have to use during Classic UI to Touch UI conversion.

Unfortunately, I  did not find anything specific to this issue.

Thanks.

Avatar

Community Advisor

Hi,

The class is getting applied to the fixed column, as you added the granite:hidden there only. To handle visibility of Tabs, you have to write javascript where on dialog ready you can hide tab title or container as well.



Arun Patidar

Avatar

Level 2

Hi,

Below custom javascript code works for me on "dialog-ready" event.

function hideTabs(){  

    var tabviewSelector = $(".toggletabs > coral-tablist > coral-tab");        

    if( typeof tabviewSelector !== undefined || tabviewSelector !== null){

    tabviewSelector.each(function(index){  

        if(index !== 0 ){

        tabviewSelector[index].hide();

        }

        });

    }  

    }   

Avatar

Community Advisor

Dear Vikash,

Please remember that while this works in 6.3 there is not guarantee this code would work in 6.4, 6.5 .e.t.c.

We should really as a community push Adobe to provide better API's to interact with AEM Front End Page Dialogs, so that we get consistent results during upgrades and have a reliable API for use cases like yours.

Regards,

Peter

Avatar

Level 1

Hi Vikash,

You can try to add the property sling:hideResource  and set it to True.

I did it for some page Properties tabs and it worked. 

 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/sling-resource-mer...

 

Azizou69004_0-1617802300505.png

 

Aziz