Displaying Form Sections in Tabs

Last Updated: 12/05/2018 Introduced in Version: 2.0

A complicated form can benefit from a Tabs layout, which efficiently displays and organizes many  components and helps users see how form components are related by grouping them on the same tab.

Set a Tabs layout in the Form Designer, by selecting Tabs from the Container Type drop-down list in the Properties panel.

Example

Our example form will accept user information in three sections – User Information, Approval Chain, and Personal Information. Each section will have its own tabbed page containing the relevant components.

 

We’ll begin our example in our Designer Folder by clicking the Create Form button at the bottom of the window.

 

 

In the resulting New Form dialog, we will give our form the name “Tab Container” and click CREATE to open it in the Form Designer.

 
 

Next, we will go to the Properties panel, locate the Layout section and use the Container Type drop-down list to choose Tabs.

 

By default, changing the layout to Tabs creates three tabs at the top of our Form Designer workspace: Tab A, Tab B, and Tab C. We’ll see these same tabs listed in the Properties panel, under the heading Tabs in the Layout section.

The default tab titles are not very informative, so we will rename them to be more descriptive. First, in the Properties panel, in the Layout section, in the Tabs box, we will select Tab A and click the Edit button.

In the resulting Edit Object pop-up, we will define this tab’s Header as “User Information” and click OK.

 

We will repeat these steps to rename Tab B to “Approval Chain” and Tab C to “Personal Information.”

 

Now that our tabs are named, we will design the content for each of those tabs.

We select the tab User Information. From the Toolbox panel, in the Containers category, we drag a Canvas component to the workspace. Components added to a tab are automatically resized to take up the entire tab. Container components like Canvas allow us to set up multiple components within a single tab.

 

First, in the Toolbox panel, we expand the Data category and drag the Label component to the workspace. Labels will appear as static blocks of text. 

To edit the Label’s properties, we select it. Using the Properties panel, in the Common section, we can change the font, size and color of the text, add a background to the label and change the text that will be displayed.

 

Next, from the Toolbox panel, in the Data category, we drag three Text Box components to the workspace and corresponding Label components.

In the Properties panel, the exclamation point next to a field indicates that some properties of a selected component must be edited before the form can function properly. Each text box must be named, and an outcome path must be set. We won’t set an outcome path yet, but will select each text box component in the workspace and enter a name into the Data Name field under the Data section.

 
The outcome path will actually be set by adding a final component to the tab: a Button. In the Toolbox panel, we expand the Actions category, and drag a Button component to the workspace.

One button will suffice as an outcome path for any number of text boxes.

For now, all we can do with the button is change its name and the style of the text. The effects of the button will be determined when this form is used in a flow.

 

Next, we’ll place the form fields for the Approval Chain tab. From the Toolbox panel, in the Containers category, we drag a Canvas component to the workspace.

Under the Approval Chain category, we drag the Approval Chain Editor component to the workspace and resize it. In the Properties panel, the exclamation point indicates that this component must be given a name before the form can function properly. We select the Approval Chain Editor component in the workspace, and, in the Data section in the Properties panel, use the Data Name field to name the component.
 
 

Finally, we’ll place the components for the Personal Information tab in the same way we did on the User Information tab.

From the Toolbox panel, in the Containers category, we drag a Canvas component to the workspace.

Note that when we add the text box components, the outcome path is already taken care of by the button in the User Information tab.

 

This completes our form’s design, so we will save it by clicking the Save Form link at the top of the screen. 

We will see our form in action by clicking the Preview link at the top of the screen. As required by our example, each of our three tabs contains the components we placed under them. We select a tab to navigate to a different section.

Additional Resources