Tabs Container Layout

Overview

The Tabs Containers allow the ability to place controls into navigational Tabs to efficiently display, group, and organize controls.

Clicking a Tab opens its own workspace where controls may be added. A control inserted into the Tab will fit the size of the Tab. It is recommended to add a Layout within the Tab to organize the space to prevent this. By default, the Tabs Layout starts with three Tabs, but more can be added to its Properties.

Configuration

Tab Containers may be configured via its Properties > Layout settings panel.

Hovering the mouse over a Tab presents icons to execute certain actions:

Example

This example Form will present user information in three sections (e.g. User Information, Resume/CV, Contact Information)with their own Tabs containing the relevant control as shown below.

1. In a Designer Folder, create a new Form and open it in the Form Designer.
2. In the Toolbox, locate the Layout section and drag the Tab Container Layout into the workspace. 
   
   Alternatively, opening the Explorer tab, selecting Surface, and opening its Properties to change its Container Type to Tabs achieves the same goal without adding a new Layout control.

   

3. Rename the default Tabs to the more descriptive: 'User Information', 'Resume/CV', and 'Contact Information' by hovering over the Tab in the Tabs setting and selecting the pencil icon.
4. Select the User Information Tab. From the Layouts Folder in the Toolbox, drag a Canvas Layout control into the workspace.
   

   
   

5. Add two Text Box into the workspace. Select each Text Box control and enter a name into the Data Name field under the Data section. Confirm with SHIFT+ENTER to create a Label. Place the corresponding Label to the left of their Text Box.
   

   

   
   
6. Set an outcome path by including a Button control into the Form. This will resolve the red exclamation errors on the other controls.

   

7. Click on the Approval Chain Tab to edit its contents.
8. Drag a Canvas Layout control to the workspace.
9. Under the Approval Chain category, drag the Approval Chain Editor control to the workspace. Name the control.
10. Finally, place the controls for the Personal Information tab in the same manner as the User Information Tab as detailed in Steps 4-7.This completes the Form design, so Save and Preview the Form. Select a tab to navigate to a different section.

Dynamic Names

Starting in v9.8, uses can make their Tab names dynamic by pulling in data from Flows.

1. Create a flow with a Show Form step.
2. Create or pick an existing Form and edit it.
3. Add a Tab Container Control and in the Tabs setting under the LAYOUT section click the edit icon.
4. Enable the Get Header From Data Name option on the menu that opens.
5. Save and Close the Form. Back in the Flow Designer the Show Form Step will now have an Input option. Use whatever Input type is appropriate for the use case - this could be Flow Data, a constant, or the output of another Step.

Feature Changes