Pivot Item Group

This text is AI-generated

This documentation was written with the help of AI and has not been fully reviewed. If something is wrong, unclear or missing, please let us know. Use the feedback form, and say which section it concerns.

The Pivot Item Group is a row of text or icon items of which one is selected, marked with a line: a light-weight way to switch between the sections of a view. It is found in the Input - OpenBridge section of the Perspective Component Palette as Pivot Item Group.

The Pivot Item Group is one of the input components. How values are written back, disabling and the behavior in the Designer are shared by all of them and are described in Input Components — Common Features. This page covers what is specific to the Pivot Item Group.

A Pivot Item Group dropped from the palette has no items and draws nothing. The blue frame is the component’s box:

The Pivot Item Group only holds the selection. It does not show any content itself: bind the content to selectedValue (see Example 1). For tabs with a background, badges and close buttons, use the Tab Row.

Items

items is the list of items, in the order they are shown. Each item is as wide as its content.

Each item is an object:

Name	Description	Property Type
value	What is written to selectedValue when the item is selected. Must be unique.	value
label	Text of the item. Only shown when hasLabel is true.	value
hasLabel	Show the label. Default true.	value
hasLeadingIcon	Show the icon before the label. Default false.	value
icon	Icon of the item, chosen with the icon picker. Only shown when hasLeadingIcon is true.	object
disabled	The operator cannot select this item. Default false. See Disabled.	value

hasLabel and hasLeadingIcon give three kinds of item. Use the same kind for all items of a group:

Item
Label
Icon and label
Icon

The icon is an icon picker: it has a path, for example openbridge/home. See Icons.

Note: Keep the icon property on every item, also on items that do not show an icon. If an item has no icon property, the whole component fails to draw.

Properties

Name	Description	Property Type
items	The items. Empty by default.	array

---

Selection

selectedValue holds the value of the selected item. When the operator clicks an item that is not selected, the component writes that item’s value to selectedValue and then fires onChange. A click on the item that is already selected does nothing.

If selectedValue is empty or does not match any item, no item is selected:

Set selectedValue on a new component, so that a section is selected when the view opens. Bind it bidirectionally to keep a tag or a view property in step with it. See Values.

Note: The value is written as text. An item with the number 1 as value writes the text "1" to selectedValue. Use text values to avoid surprises in comparisons.

Properties

Name	Description	Property Type
selectedValue	The value of the selected item. Written when the operator selects an item. Empty by default.	value

---

Direction

direction lays the items out in a row or in a column. The blue frame in the images is the component’s box:

direction
horizontal (default)
vertical

In a row the selected item has a line under it; in a column the line is on its left, and the items fill the width of the component. Each item is 48 px high.

Properties

Name	Description	Property Type
direction	horizontal or vertical. Default horizontal.	value

---

Disabled

Set disabled to true to disable the whole group, or disabled on an item to disable only that one. A disabled item is dimmed and cannot be selected; selectedValue is not written and the event does not fire.

Disabled
The component
One item (Tanks)

See Disabled.

---

Common Properties

These work in the same way on every input component, and are described in Input Components — Common Features:

• Disabled — disabled.
• Appearance — style. The colours follow the palette of the session:

Component Events

Unlike most input components, the Pivot Item Group does not have onActionPerformed. Its event is onChange:

Event	Description	Event Object
onChange	Fired when the operator selects another item, after selectedValue is written.	selectedValue: the value of the item, as text.

def runAction(self, event):
  system.perspective.print(event.selectedValue)

Examples

Example 1 — Sections of a View

1. Drop a Pivot Item Group at the top of the view and make it 360 px wide.

2. Set items:

   [
     {
       "value": "overview",
       "label": "Overview",
       "hasLabel": true,
       "hasLeadingIcon": false,
       "icon": {"path": "openbridge/home"},
       "disabled": false
     },
     {
       "value": "power",
       "label": "Power",
       "hasLabel": true,
       "hasLeadingIcon": false,
       "icon": {"path": "openbridge/generator"},
       "disabled": false
     },
     {
       "value": "tanks",
       "label": "Tanks",
       "hasLabel": true,
       "hasLeadingIcon": false,
       "icon": {"path": "openbridge/tank"},
       "disabled": false
     }
   ]

3. Set selectedValue to overview.

4. Add a container for each section below it, and bind the position.display (or meta.visible) of each to an expression such as {../PivotItemGroup.props.selectedValue} = 'power'.