- Getting Started
- Demo apps
- How To
- Notifications
- Using VB Expressions
- Designing your App
- Designing your app with Autopilot
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Log Message
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Value
- Rule: Start Process
- Rule: Reset Values
- Rule: Upload File to Storage Bucket
- Rule: Download File From Storage Bucket
- Rule: Create Entity Record
- Rule: Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Rule: Trigger workflow
- Rule: Submit Action
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Leveraging Media in your app
- Leveraging Actions in your app
- Leveraging Connections in your apps
- Apps in Studio Web
- Application Lifecycle Management (ALM)
- UiPath First-Party Apps
- Basic Troubleshooting Guide
Apps User Guide
When you add the Tab control, it displays three tabs by default (Tab 1, Tab 2, Tab 3). Expanding each tab within the control exposes the following properties:
- Tab name - The display name of the tab.
- Page source - The Apps page to import within this tab.
- Hidden- If true, hides the control at runtime.
- Disabled - If true, disables the control at runtime.
The following properties apply to the entire Tab control.
-
Add new tab - Add new tab to your data by clicking the plus "+" icon.
-
Active tab index - Navigate to a specific tab using this property. The index starts at 0. For example, if you have four consecutive tabs named "Tab1", "Tab2", "Tab3", and "Tab4", then "Tab1" has the index
0, "Tab2" has the index1, "Tab3" has the index2, and "Tab4" has the index3. -
Hidden- If true, hides the control at runtime.
-
Disabled - If true, disables the control at runtime.
-
Control Alignment - By default, it is set to Stretch. A different alignment can be set.
Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal). -
Style - The size of tabs and the color for an active tab.
-
Border - The border for the control. Border Thickness, Color, and Radius can be configured.
-
Font - The font attributes for the tab text, such as font family, size, or color. By default, the control inherits the font family of the immediate parent container which is indicated by the keyword "Inherited".
-
Margin - The margin of the control. By default, a margin of 4px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.
-
Size - The width and height of the control. By default, the size is set to
auto. To set minimum or maximum values, click the three dot icon (...). If the size of the control is smaller than the options, a scroll bar is displayed.
For improved accessibility, you can use the following keyboard shortcuts in the tabs list from the General tab in the configuration panel:
- Up and Down arrow keys to change the selected tab.
- Alt+Up arrow key to move the selected tab up.
- Alt+Down arrow key to move the selected tab down.
This example shows how to navigate to the next tab of a Tabs control.
- For "Tab 2", in the Page source field, reference the previously added page which has the "Tab 2-> Next" button. Your app should look like in the following
image:
- Select the Tabs control, and assign the variable
var_tab_indexto the Active tab index field.
