Tab Container

Last modified: September 3, 2024

Introduction

Tab containers are used to show information categorized into tabs. This can be very useful if the amount of information that has to be displayed is larger than the amount of space on the screen.

Tab Container

Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Tab container properties consist of the following sections:

Properties:

Styling:

Properties

General

Define Default Tab

Define default tab defines whether a specific tab page should be shown by default. If set to Yes, an additional Default tab page property will be shown to set the default tab. If set to No, the first tab will be shown. Note that the Attribute property may override this behavior if configured.

Default: No

Attribute

The Attribute property can be used to set the active tab index (1-based) programmatically when the tab container is inside a data context. The selected attribute must be of type integer. The active tab will automatically change when the value of the attribute changes to a valid tab index.

On Change

The On change action can be used to run an action when the user selects a tab page.

Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Styling

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Tab Page

A tab container contains one or more tab pages where you place widgets. For example, a tab page can contain a grid of orders.

Tab Page-Specific Properties

Show badge

Show badge indicates whether a badge is shown next to the tab page caption. If set to Yes, an additional Badge property will be available to set its content dynamically.

Refresh on Show

Refresh on show indicates whether the contents of the tab page should be refreshed when the tab page is shown. Set this property to No if you know that nothing will affect the information on the tab page.

Default: Yes

Best Practices

Standalone (#standalone)

You can use a tab container as a standalone widget for greater ease. This means there is no need to place it within a container or other wrapper widgets, as doing so may disrupt the display of content.

Usage with Scroll Container

Avoid nesting tab containers inside of scroll container. It may break the way tab page content is displayed, and furthermore will disable rendering optimizations inside the tab view.

Read More