Tabs

Tabs may be added to your UI to represent menus or submenus.

You typically use Tabs inside a view or a dialog, to control which parts of the UI should be displayed. Example: A dialog for displaying info for an Order with two Tabs: Order Info and Order Lines, and you only want to display either Order Info or the Order Lines, depending on which Tab the User clicked.

A full example setup on Tabs (combined with a Visibility Group) is available in our Showroom. You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.

Settings

Active Tab Value

When the user clicks the tabs, the information on which tab is clicked needs to be stored somewhere.

The Tabs UI component itself does not hold the Order Info properties or Orderliness - it only holds

• Which tab was clicked (stored in the Active Tab Value)

• Which tabs are available (explained further down)

So, you need a variable to hold this information (which tab was clicked).

1. Add a variable to your App Variables (the built-in Data Source found in the App Data menu). It would typically be an integer data type. Example for order dialog: Name the property Order - Active Tab Value and set the default value to 0.

2. Active Tab Value: Select Data Binding and select the property you added in 1).

Tabs

Add a tab, or two, or three.

• Label: The visible name for the tab.

• Icon: If you want an icon above the label.

• Tab Value: Automatically set. This is the value to write back to, to property bound in Active Tab Value when this tab is clicked.

Use Tabs to control the visibility of UI Components

In our example above, the value 0 or 1 is saved into App variables.Order - Active Tab Value property when the tabs are clicked.

We simply need to control what should be visible depending on this value.

You could add two Containers, one being visible if Active Tab Value is 0, and another if 1. But let us do something smarter.

The best way to do it is to add a Visibility Group.

A Visibility Group with Control Mode Controlled may have a Visible Index. Select the same property here as in the Active Tab Value, for example, App variables.Order - Active Tab Value.

You may add two Containers inside the Visibility Group, the first is recognized as index 0, the second as index 1.

When the property bound in the Visible Index changes, for example from 0 to 1, the second Container will be displayed - since it is located at index 1 inside the Visibility Group.