Tab Layout Widget

The Tab Layout widget displays form content as one or more tabs of lists. Use it when you want users to view, search, create, edit, and delete form responses directly on a page in your applet.

When to use this

• You want to show form responses in list form on a page
• You need multiple views (tabs) of the same form with different selections or sorting
• You want users to create new content, open a detail view, or edit responses directly from the widget
• You want to surface subforms together with the main form

How it works

You select a form for the widget to build on. The widget contains one or more lists — each list is shown as a tab and has its own settings for Create, List view, Detail view, and Subforms. This lets you have, for example, a tab for "My cases" and another for "All cases" based on the same form but with different filtering.

Add a tab layout

1. Open the Design editor for your applet.
2. Add the Tab Layout widget to the page.
3. Open the widget settings.
4. Select the Form the widget should use.
5. Configure the first list via the list icon, or add more lists.
6. Save your changes.

Widget settings

Form

Select the form you want to display in the widget. The remaining settings depend on the form you choose here.

Lists

A list named New list is created automatically. You can add more lists with Add list. Each list is shown as a tab in the widget.

For each list, you can:

• Rename — click the pencil to the right of the list name, enter a new name, and select Ok.
• Duplicate — click the duplicate icon. All settings from the original list are copied to the new one.
• Remove — click the trash icon.
• Reorder — use drag and drop on the handle on the far right to change the list order.

List settings

Open a list's settings by clicking the list row. The list name is shown as the title. You can configure:

• Create
• List view
• Detail view
• Subforms (only shown if the form has subforms)

Create

Settings for the form's create mode. To configure anything in this section, Create new content must be enabled.

Setting	Description
Create new content	Lets the user create new content from the widget. When enabled, the settings below become available.
Button text	Label of the create button in the widget. Max 30 characters.
Show tempsave	Lets the user save a draft without submitting it.
Show field for forwarding	Shows a field where the user can enter an email address to forward the content to on submit.
Viewmode field groups	Controls how field groups are presented in create mode. See below.

Viewmode field groups

By default, all field groups are shown at once in create mode. You can change to:

Mode	Description
Default	All field groups are shown at the same time.
Expand/collapse	Only the first field group is expanded. The other groups are collapsed and expand when the user clicks the row.
Steps	The user steps through field groups using back and next buttons until the form is submitted.

Field settings

For each field group, you can toggle the entire group off to hide it in the widget. For each field within a group, you can configure:

Setting	Description
Show	Toggle off if the field should not appear in create mode.
Class name	Custom class name for the field — useful for styling with CSS.
Field label	A custom label that replaces the field's default name in the widget.

TIP

Field-level settings only apply to the list you are editing. If you have multiple lists, the same field can have different labels and visibility in different tabs.

Confirmation

Confirmation controls what the user sees after submitting content. By default, a confirmation page is shown with text taken from the form. You cannot change the confirmation text from the widget.

Setting	Description
Download	When enabled, the user can download a PDF from the confirmation page. The PDF uses the form's print template.
Navigate to	By default the user is taken back to the previous page when continuing from the confirmation page. To send the user somewhere else, pick a page in the current applet or another applet.

List view

Settings for the list shown in the tab.

View settings

Setting	Description
Name	Shows the form's name at the top of the widget.
Icon	Shows the form's icon together with the content.
Field labels	Enable to show field labels in the list view.
Show field labels on empty fields	Shows labels even for list fields that have no value. Turn off to hide the label when a field is empty.

Field settings

For each field, you can configure:

Setting	Description
List field	Enable if the field should appear as a list field in the list view.
Show in filter	When enabled, the field appears in the filter funnel as an option to filter on. Requires Show filtering to also be on under Search. Filtering applied from AppStudio on the form is reflected on fields that are also enabled here.
Class name	Custom class name for the field — for CSS.
Field label	Custom label that replaces the field's default name in the list view.

Available actions

Action	Description
Download	Lets the user download a PDF from the list view.
Forward	Lets the user forward the content from the list view.
Delete	Lets the user delete content from the list view. The user must also have delete permission according to the form's permissions.

Search

Setting	Description
Show search field	Shows a search field at the top of the list. When enabled, Show filtering and Instant search are turned on automatically.
Show filtering	Gives the user access to the filter funnel for the fields that have Show in filter enabled.
Instant search	The search runs as soon as the user types. Turn this off if the search should only run when the user presses enter.
Placeholder	Text shown in the empty search field.

Filter

Open Filtering to limit the content shown in the list. Add conditions by selecting a field and an operator. The available operators depend on the field type:

Operator
Is equal to
Is not equal to
Is empty
Is not empty
Includes
Does not include
Greater than
Less than
Is within
Is not within

After selecting an operator, enter a Term to complete the condition. For example, on a user field you pick a user as the term.

Add multiple conditions to fine-tune the filter. All conditions must be met for a response to be included in the list.

Sorting

You can choose a custom sort order for the content in the list view.

• Sort on — choose Created, Last modified, or one of the form's fields.
• Order — choose Ascending or Descending.

Fields containing both text and numbers are sorted alphanumerically. Numeric fields use numeric sort.

Advanced

Setting	Description
Display immediately when single content	Sends the user straight to the content if there is only one response — either because only one exists or because the user only has permission to one.
Show a specific number of form contents	Enable and enter a number between 1 and 20 to show only that many responses in the list.

Detail view

Settings for the detail view, which shows the content in more depth than the list view.

Setting	Description
Open content	Required to enable the detail view and let the user navigate into a response.
Edit content	Enable if the user should be able to change the content.
Edit content immediately	On by default when Edit content is enabled. When turned off, the content opens in read mode and the user has to actively choose Edit to make changes.
Viewmode field groups	Controls how field groups are presented in the detail view — Default, Expand/collapse, or Steps (same options as for Create).
Viewmode subforms	Choose how subforms are presented in the detail view — Tab layout (subforms are shown as tabs) or List (subforms are shown as lists below the main content).
Show the number of subform responses	Only available when Viewmode subforms is set to List. Shows the response count next to each subform.

Available actions

Action	Description
Download	Lets the user download a PDF from the detail view.
Forward	Lets the user forward the content from the detail view.
Delete	Lets the user delete the content from the detail view. The user must also have delete permission according to the form's permissions.

Field settings

For each field, you can configure for the detail view:

Setting	Description
Show	Toggle off if the field should not appear in the detail view.
Class name	Custom class name for the field — for CSS.
Field label	Custom label that replaces the field's default name in the detail view.

Subforms

If the selected form has subforms, you can choose to display them in the widget.

1. Open the Subforms section in the list settings.
2. Toggle on the subforms you want to show.
3. Click an enabled subform to open its settings.

You can configure the same settings for a subform as you can for the main form — Create, List view, Detail view, and any subforms of the subform.

Example

Scenario: You are building a case-management applet and want a page where users can see their own cases, see all cases in their group, and create new cases.

1. Add a Tab Layout widget to the page.
2. Select the Case form.
3. Rename the first list to My cases.
4. Open List view → Filter and add a condition: field Created by, operator =, term logged-in user.
5. Add a new list and name it All cases.
6. In the All cases list, open Create and enable Create new content so users can create new cases directly from the tab.
7. Enable Search and Show filtering on both lists.

The page now shows two tabs — one with the user's own cases and one with all cases, where new cases can be created.

Tips

TIP

Use multiple lists instead of multiple widgets when you want to show the same form from different angles on the same page. It is faster to maintain and gives the user a more cohesive experience.

TIP

Use Display immediately when single content for forms where each user is only expected to have one response — for example a personal profile or an ongoing application. The user is then spared an extra step.

Common mistakes

WARNING

If the filter funnel is empty when the user opens it, check that the fields have Show in filter enabled and that Show filtering is on under Search.

WARNING

Delete in the widget is not enough on its own — the user must also have delete permission according to the form's permission settings for the action to actually run.

WARNING

Settings on a list only affect that list. If you duplicate a list and then change something on the original, the copy is not updated automatically — the copy is independent after duplication.