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
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
vikashy47555224
Level 2

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

Replies

Avatar

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

137 likes

Total Posts

541 posts

Correct Reply

164 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

137 likes

Total Posts

541 posts

Correct Reply

164 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile
PuzanovsP
MVP

01-10-2018

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

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
vikashy47555224
Level 2

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.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

891 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

891 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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.

Avatar

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
vikashy47555224
Level 2

Likes

5 likes

Total Posts

21 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
vikashy47555224
Level 2

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

        }

        });

    }  

    }   

Avatar

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

137 likes

Total Posts

541 posts

Correct Reply

164 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

137 likes

Total Posts

541 posts

Correct Reply

164 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile
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

Avatar

Avatar
Give Back
Level 1
Azizou69004
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
View profile

Avatar
Give Back
Level 1
Azizou69004
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
View profile
Azizou69004
Level 1

07-04-2021

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