Displaying Form Sections in Tabs

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 pop-up, we will give our form the name “Tab Container” and click OK to open it in the Form Designer.

 

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 Save.

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.

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.

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.

 

Finally, we’ll place the components for the Personal Information tab in the same way we did on the User Information tab. 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

• Building a Form's Layout
• Creating Your First Form
• Creating Your First Form Flow
• Making Page Sections Collapsible and Expandable