Glossary of terms in iTwin.js UI

Backstage

The main navigation menu of the application used to switch between frontstages, open overlays, or launch custom commands. You can use BackstageComposer to set up a backstage that displays an overlay menu along the left edge of the application.

Content

The main area of the application display. Typically, the content is a visual rendering of the iModel but it can be any React component. The content can use multiple areas organized in grid to display more than one aspect at the same time.

Dialog

A temporary interruptive UI element that overlays the application until a required action is taken by the user. You can use Dialog to display a custom dialog.

Navigation Aid

An interactive UI element that facilitates the navigation of Viewport content. A default navigation is displayed based on the active view type. Alternatively, you can use navigationAid prop of a ViewToolWidgetComposer to display a custom component.

Frontstage

Layout configuration that defines a page tailored to a specific task in an application. You can register a FrontstageProvider to define a custom frontstage.

Status Bar

A dedicated area in the user interface that displays information about the current state of the application. You can use StatusBarComposer to display a status bar as a footer at the bottom of the application.

Stage Panel

An interactive UI element that contains up to two panel sections and is displayed on one of the sides of the application.

Stage Panel Section

A dedicated area within a stage panel that can contain multiple widgets.

Toolbar

An interactive UI element that offers quick access to tools and actions that are commonly performed within the application. You can use ToolbarComposer to display a toolbar for a specific usage and orientation.

Tool Settings

A dedicated area in the user interface that displays properties or information related to the active tool.

UI Items Provider

A mechanism for providing UI elements such as widgets, backstage, toolbar or status bar items to the application. You can register a UiItemsProvider to provide additional items.

Widget

An interactive UI element for a custom content of an application that allows the user to view and/or modify data relevant to their current context. The content of the Widget is just a React component, but additional metadata such as label or icon can be provided to customize or initialize the widget. Multiple widgets can be grouped and displayed in one of the widget containers.

Docked - when a widget is docked to a stage panel sections on the side of the page.

Floating - when a widget is displayed in a dialog-like component of the page.

Popout - when a widget is displayed in a separate popup window.