Fleet Button
The Fleet Button is a large button that stands for a whole fleet. It shows the name and status of the fleet, a few key figures and the number of alerts, and the operator clicks it to choose the fleet. It is found in the App - OpenBridge section of the Perspective Component Palette as Fleet Button.

From top to bottom:
- Name and status —
fleetNameandstatus. See Name and Status. - Readouts — a row of values with labels. See Readouts.
- Alerts — a topic and the number of alarms, warnings and cautions. See Alerts.
The Fleet Button is one of three components for a system that integrates several vessels:
- The Fleet Button stands for the fleet as a whole.
- The Integration Button stands for one vessel, or one system.
- The Integration Bar is the header of such a system, where the operator chooses between the fleet and its vessels.
A typical fleet page has one Fleet Button followed by an Integration Button per
vessel, and a click on either sets selectedVessel of the Integration Bar. See
Example 1. See
App Components — Overview for the other app components.
A Fleet Button dropped from the palette has no name and no readouts, and shows only the alert row:

Name and Status
Section titled “Name and Status”fleetName is the name of the fleet, and status a line of text under it.
| Name | ![]() |
| Name and status | ![]() |
Properties
Section titled “Properties”| Name | Description | Property Type |
|---|---|---|
| fleetName | Name of the fleet. Empty by default. | value |
| status | Text under the name. Empty by default. | value |
Readouts
Section titled “Readouts”readouts is a list of values shown side by side. Each readout is an object:
| Name | Description | Property Type |
|---|---|---|
| label | Text under the value. | value |
| value | The value: a number or a text. | value |
| unit | Unit shown after the value. | value |
The readouts share the width of the button:
| Readouts | |
|---|---|
| 1 | ![]() |
| 2 | ![]() |
| 3 | ![]() |
The button shows the value as it is. To control the number of decimals, format
the value in the binding, for example with the expression
numberFormat({[default]Fleet/AvgSpeed}, "#,##0.0").
Properties
Section titled “Properties”| Name | Description | Property Type |
|---|---|---|
| readouts | The readouts. Empty by default. | array |
Alerts
Section titled “Alerts”With showAlerts the button has an alert row at the bottom. It shows the text in
alertTopic, an icon, and one badge for each count in alerts that is not zero:
alarms, warnings and cautions.
| Alarms, warnings and cautions | |
| Warnings only | ![]() |
All counts 0 |
![]() |
showAlerts false |
![]() |
When all counts are zero the row is dimmed and shows No alerts.
alertTopicIcon is the icon before the topic. A new Fleet Button has the
placeholder icon; choose another, or clear alertTopicIcon.path for a row
without an icon:
| Placeholder (default) | |
| An alert icon | |
| No icon | ![]() |
The Fleet Button does not count alarms itself. Bind each count to an expression or a tag that holds the number.
Properties
Section titled “Properties”| Name | Description | Property Type |
|---|---|---|
| showAlerts | Show the alert row. Default true. |
value |
| alertTopic | Text of the alert row. Empty by default. | value |
| alertTopicIcon | Icon before the text, chosen with the icon picker. | object |
| alerts | The alert counts. See below. | object |
alerts sub-properties:
| Name | Description | Property Type |
|---|---|---|
| alarm | Number of alarms. Default 0. |
value |
| warning | Number of warnings. Default 0. |
value |
| caution | Number of cautions. Default 0. |
value |
Selected
Section titled “Selected”Set selected to true to show the button as the chosen one:
| selected | |
|---|---|
false (default) |
![]() |
true |
![]() |
A click on the button does not change selected. It fires
onActionPerformed, and your script or binding decides what is selected. Bind
selected to the property that holds the choice, as in
Example 1.
Properties
Section titled “Properties”| Name | Description | Property Type |
|---|---|---|
| selected | Show the button as selected. Default false. |
value |
The button is as wide as the component’s box (the blue frame) and as high as its content, from the top of the box. With two rows of text, readouts and the alert row it is 167 px high:

Properties
Section titled “Properties”Properties not covered in the sections above:
| Name | Description | Property Type |
|---|---|---|
| style | Standard Perspective style object. | object |
Component Events
Section titled “Component Events”| Event | Description | Event Object |
|---|---|---|
| onActionPerformed | Fired when the operator clicks the button. | — |
Examples
Section titled “Examples”Example 1 — Fleet Button that Selects the Fleet
Section titled “Example 1 — Fleet Button that Selects the Fleet”The session has a custom property vessel that holds the chosen vessel, and is
empty when the fleet is chosen. selectedVessel of the
Integration Bar is bound bidirectionally to it.
-
Drop a Fleet Button into the view, 320 × 167.
-
Set
fleetNametoCoastal Fleet, and bindstatus, the values inreadoutsand the counts inalertsto the tags of the fleet. -
Bind
selectedto the expression{session.custom.vessel} = "". -
Add a script to
onActionPerformed:self.session.custom.vessel = ''
Below it, add one Integration Button per vessel that sets the property to its vessel in the same way.
Found an error or something unclear?
Tell us what is wrong, confusing or missing on this page.
Built on the OpenBridge Design System










