Edit

Share via

Pivot control

  • Article

A control used to provide navigation.

Note

Full documentation and source code found in the GitHub code components repository.

Pivot control.

Description

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and rely on text headers to articulate the different sections of content.

This code component provides a wrapper around the Fluent UI Pivot control for use in canvas apps and custom pages.

Properties

Key properties

Property Description
RenderType The type of control to render as.
SelectedKey The key to select. This will be updated via the OnChange event when the user interacts with the control.
Items The action items to render

Items properties

Each item uses the following schema to visualize data in the component.

Name Description
ItemDisplayName The Display Name of the nav item
ItemKey The key to use to indicate which item is selected, and when adding sub items. The keys must be unique.
ItemEnabled Set to false if the option is disabled
ItemVisible Set to false if the option is not visible
ItemChecked Set to true if the option is checked (e.g. split buttons in a command bar)
ItemIconName The Fluent UI icon to use (see Fluent UI icons)
ItemCount Show an item count on a Pivot item link.

Example:

Table(
  {
      ItemKey: "tabFile",
      ItemDisplayName: "File"
  },
  {
      ItemKey: "tabHome",
      ItemDisplayName: "Home"
  },
  {
      ItemKey: "tabView",
      ItemDisplayName: "View"
  },
  {
      ItemKey: "tabAction",
      ItemDisplayName: "Action"
  }
)

Style properties

Property Description
Theme Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps. See theming for guidance on how to configure.
RenderSize The pivot control can be rendered in two sizes (large/normal)
AccessibilityLabel Screen reader aria-label

Event properties

Property Description
InputEvent An event to send to the control. E.g. SetFocus. See below.

Behavior

Supports SetFocus as an InputEvent.

Configure tab behavior

Coordinate tab pages by associating the Visible property of dependent components in your app (for example, a container that represents a page) with the value of Pivot1.Selected.ItemKey.

Visible property of a dependent control that's displayed when the tabFile itemKey is selected:

Pivot1.Selected.ItemKey = "tabFile"

Limitations

This code component can only be used in canvas apps and custom pages.

See more limitation notes in the design challenges section of the GitHub documentation.