How to show groups when users click tabs

Hey there,

I’m trying to bring up individual groups when a user ‘clicks’ or is ‘viewing’ a specific tab. I’m unsure of how to add this as a condition on the specific group.

Could someone show me how this looks like in the editor? I’m struggling to understand the instructions.

Would love any insights.

https://docs.airdev.co/canvas-pages-and-modules/v/2.0.0/modules/toggle-tabs-group#how-to-show-a-tab

Thanks

Hi @dave,

We’ve just updated the documentation page with screenshots. Please let us know if you have any more questions.

1 Like

Very helpful thanks Stephanie! Will give it a go today.

Hi Stephanie - tried implementing it but running into a few issues.

In my template I don’t have: ‘Group toggleTabsGroup’s’ but I have ‘Group main toggle tabs’ i’m assuming it’s the same?

For text in your example, I didn’t have that custom state, so I created one. Is this correct?

This is steps 1 & 2 completed also for reference.

Hi @dave,

It seems like you are using Toggle Tabs Page instead of Toggle Tabs Group. In this case, please read the documentation for Toggle Tabs Page here.

The general idea is the same but the workflows are a bit different. Specifically, the Toggle Tabs Page uses a custom workflow called “Navigate” but the Toggle Tabs Group doesn’t. This is because custom workflows cannot be copied over to a different app unless you are copying the whole page.

1 Like

Hey @stephanie ,
I am trying to use Toggle Tabs Group-component, but something is not working.
I have attached screenshots to show you what I have done.
the tabs are not navigating (show/hide) groups, what is wrong?
Here: the screenshots

Hello @mohamedhamdeen welcome to the community!

Check what the conditions are in the groups that you are attempting to show/hide. They should correspond to the logic shown in your screenshots.

I made it visible when the toggle group’s text is tabs(write static text). Is that wrong?

Not wrong if that’s the text that needs to be sent

The basic premise of how this type of visibility logic works in a Canvas Bubble template is as follows:

(1) Groups designed as toggle tab buttons with a data-type of type “text” and a data source of “whateverTextIsNeeded”
(2) Invisible section groups that have the content that needs to be shown and that become visible when some condition is true
(3) One way to establish a system the groups in point (2) react to (… meaning that they reveal or hide) is when a toggle is pressed, then it’s text is sent as a url parameter to a “tab” parameter which can only be a text because it is a url parameter … and when that url tab is “whateverTextItNeedsToBeSoThatTheGroup2BecomesVisible” then it becomes visible

I hope the above makes sense. Canvas templates depending on the version have different logic but the above is generally how things work.

Walk through the logic and try to infer how things are working vs how they should work.

One other way to study how visibility works is to study another Canvas template. You can access them via this link.

Also, visibility logic is discussed on this video. Perhaps it may be worth your while to watch it as it may likely help you fix the issue that your app is experiencing:

I solved it. I needed to create more than one parameter as it was included in a dashboard page.

1 Like