Toggle Tabs Group

Overview

This group includes a tab-like UI component for showing and hiding blocks.

Structure

• This Group toggleTabsGroup has a data type of text. It stores the name of the current tab that the user is viewing. It includes all of the tabs that a user can click on. Each tab group (e.g., Group Nav 1 tab -) has a data type of text and contains the name of the tab. Clicking on tab group will toggle to a different tab (you will have to determine which group to show).

How to set up

• Update the data source of each of the tab groups (e.g., Group Nav 1 tab - , Group Nav 2 tab -, etc.)

• Update the group's text

• Resize the tab groups to ensure the full text is visible.

• In the workflow tab, create a custom workflow called Navigate of type text

• Add the following workflow to the custom workflow: Go to [page name] and send a parameter called tab, where tab = current workflow text

• For each Group Nav 1 tab -, trigger the Navigate custom workflow and set the workflow thing to Parent group's text

• Adding these workflows will allow your users to use the browser's BACK feature to go back to the last tab they've viewed. Please note this will only work if the box for Replace the entry in the browser history is unchecked in the Go to page step of the Navigate workflow.

The tab elements are within a single-celled horizontal scroll repeating group called "RepeatingGroup scrolling (do not change)". Please do not alter or remove this repeating group; it is used to create the horizontal scroll functionality on mobile.

How to show a tab

• Add the following conditional statement to the block you want to display for each tab: If Group toggleTabsGroup's text is Group Nav 1/2/3/4 tab -'s text then this group is visible