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

vikashy47555224 01-10-2018

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

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

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

vikashy47555224 02-10-2018

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.

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

Arun_Patidar
MVP
02-10-2018

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.

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

vikashy47555224 04-10-2018

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

        }

        });

    }  

    }   

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

PuzanovsP
MVP
04-10-2018

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