Skip to content

Tabbed Content

The TabbedContent widget creates a tabbed interface, allowing users to switch between different content sections. It acts as a container widget, holding other widgets within its individual tabs.

Tab Pages

Each tab within the TabbedContent widget is called a tab page. Tab pages can contain any other widgets. The appearance and visibility of tab pages can be dynamically controlled using formatting rules and validation rules..

Fit Height

By default, the height of the tabbed content widget is set to the height of the tallest tab page. If you want to ensure that all tabs have the same height, set the FitHeight property to True.

Active Tab Selection

The ActiveTabXPath property specifies an XPath expression that determines the currently active tab. This expression should evaluate to the zero-based index of the tab to be activated. When a user selects a tab, the index of that tab is written to the data model element specified by ActiveTabXPath.

XML Fields

  • XPath establishes the data context for the tab container and its child tabs.
  • Mode selects Horizontal or Vertical tab placement. FitHeight controls whether tabs use a common fixed height.
  • Tabs/Tab contains each page. A tab's XPath establishes its local context, Label/Content supplies the tab title, Controls contains its widgets, and Rules controls conditional behavior.
  • ActiveTabXPath is a child element that stores the selected tab's zero-based index. Leave it empty when the form does not need to persist the selected tab.
  • The outer Rules element applies to the tab container as a whole.

TabbedContent is a layout container. It writes only the selected index when ActiveTabXPath is configured; child widgets write their own data.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<TabbedContent Mode="Horizontal" FitHeight="False" XPath="">
    <Rules/>
    <Tabs>
        <Tab XPath="">
            <Rules>
                <FormattingRule Hidden="True">
                    <Condition>
                        <Content><![CDATA[return $Xml.Equals('MyField','OPEN')]]></Content>
                    </Condition>
                </FormattingRule>
            </Rules>
            <Label>
                <Content><![CDATA[Tab1]]></Content>
            </Label>
            <Controls>
                <Html>
                    <Content><![CDATA[<h1>Tab 1</h1>]]></Content>
                </Html>
            </Controls>
        </Tab>
        <Tab XPath="">
            <Rules>
                <ValidationRule>
                    <Condition>
                        <Content><![CDATA[return true;]]></Content>
                    </Condition>
                    <Label>
                        <Content><![CDATA[invalid]]></Content>
                    </Label>
                </ValidationRule>
            </Rules>
            <Label>
                <Content><![CDATA[Always Invalid]]></Content>
            </Label>
            <Controls>
                <Html>
                    <Content><![CDATA[<h1>Tab 2</h1>]]></Content>
                </Html>
            </Controls>
        </Tab>
    </Tabs>
    <ActiveTabXPath><![CDATA[Fields/ActiveTab]]></ActiveTabXPath>
</TabbedContent>