App Components — Overview

This text is AI-generated — we need your feedback

This documentation was written with the help of AI and has not been fully reviewed. If something is wrong, unclear or missing, please tell us: open the feedback form, say which section it concerns and what you expected to read. The same link is at the bottom of every page.

The app components are the building blocks of an application, as opposed to the instruments and controls shown inside it. They are found in the App - OpenBridge section of the Perspective Component Palette.

Unlike the automation buttons or the input components, the app components have little in common with each other: each has its own properties and its own page. This page shows how they fit together.

Kind	Components	What they are for
Application frame	Top Bar, Navigation Bar, App Bar, Integration Bar	The header and the navigation shared by every page.
Content	Card, Tabbed Card, Modal	Surfaces that group the content of a page or a popup.
Controls	Pagination, Badge, Fleet Button, Integration Button	Small controls that belong to the application rather than a device.

The Frame of an Application

An OpenBridge application has a header at the top and a navigation menu that opens from the left. Both are docked views that are shared by all pages, so they stay in place while the operator moves between pages:

1. A top dock with a view that contains a Top Bar.
2. A left dock with a view that contains a Navigation Bar, opened and closed with the navigation button of the Top Bar.
3. The pages, each an ordinary view whose content is grouped in Cards.

See Top Bar in a Shared Dock for the dock settings, and Navigation Menu for how the Top Bar opens the dock.

What the Components Have in Common

• The OpenBridge palette. The colours follow the palette of the session (bright, day, dusk or night), which the operator selects in the Brilliance Menu of the Top Bar.
• Navigation is by page. Components that navigate — the Navigation Bar, the Top Bar — go to a page of the project by its URL, for example /propulsion, as configured in Page Configuration. They show the item of the current page as selected.
• Preview Mode. In the Designer the components react to the mouse only in Preview Mode, and navigating does nothing there, because the Designer shows a view and not a page. Test navigation in a session.