Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

vikashy47555224
Level 2
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
Peter_Puzanovs
Community Advisor
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

vikashy47555224
Level 2
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.

Arun_Patidar
Community Advisor
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.

vikashy47555224
Level 2
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();

        }

        });

    }  

    }   

Peter_Puzanovs
Community Advisor
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

Azizou69004
Level 1
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