Use tabs

Using Tabs

Step 1: Insert the Tab component

Insert a Tab component in your main view. You don’t need to place anything else inside the view.

Step 2: Create a table

Create a new Table (click on Tables on the right of Views in the SystemBuilder). This table should contain:

• an id column
• a title column
• a view column

Add one row for each Tab you want to include in your Tab component (see image 3).

Step 3: Link the table to the Tab component

Select your Tab component (in the main view) and fill in the following fields:

• Table → your created table
• Title → the title column
• View ID → the view column

Step 4: Customize the display

You can customize how the Tabs are displayed:

• Show Tabs as a column instead of a row (check Vertical)
• Display labels vertically (check Vertical text)
• Show Tab labels on the right instead of the left (via the drop-down menu)

Step 5: Create subviews

For each Tab, create a Subview (Create a new view → Type SubComponent).

• Use the id corresponding to the view column
• Optional: use the title column value as the subview name

These subviews will contain the content of each Tab.