(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dashboard

Overview

The dashboard is the foundational layout shell that other parts of the interface plug into. Within applications, it defines a specialized space for information visualization and control, giving users a structured interface to access key insights and functionalities. Content is laid out on a responsive 16-column 9-rows grid with fixed spacing to maintain rhythm.

Within Atomic Design, the Dashboard sits at the template level and composes organisms into reusable layouts. These layouts can adapt by breakpoint or format, while the underlying structure remains consistent across views. The Dashboard offers two themes: Astronaut (light) and Tokyo at Night (dark).

Anatomy

A standard Edge.One Dashboard includes three organisms: Header, Content area, and the Notification Panel and Navigation Panel.

Optional components include Floating Sidebar (depricated), Overlay, Global Notification, Toast Notification (in progress), and Modal Notification.

Header

The Header provides access to global actions and is adapted per device to preserve clarity on smaller screens. The layout is consistent across applications.

Content of the header consists of Global Navigation. It may include the product logo, icons, and menus. In addition, App Developers can activate or deactivate a breadcrumb navigation and date picker within the header. All elements have a fixed distance of 2 rem to each other.

Content Area

All content within the content area must follow either the Landscape Grid or the Portrait Grid.

• The landscape grid may only be used on screens where the width is the longer side. For all landscape breakpoints, content must conform to the 16-column/9-line grid.
• The portrait grid may only be used on screens where the height is the longer side. For portrait breakpoints, the content must conform to the 9-column/16-line grid.

Within the grid, the content is not positioned freely. Start content blocks, for example, boardlets, at the top-left and place them along the grid. Grid cells should generally all be filled within a finished dashboard. Nested content, for example content nested in boardlets, may scroll within their own area.

Breakpoints

The grid defines six breakpoints that control columns, header layout, margins, gutters, and icon sizes. On smaller viewports, compress or stack headings and labels to preserve readability. Use this set of standard breakpoints to maintain layout integrity across screen sizes.

Navigation

This section will only give a brief overview. For more information on navigation within and between dashboards, please visit Navigation.

Navigation Panel

The Navigation Panel sits in the left sidebar and contains navigation components only. These include internal dashboards and approved third-party links. Using fixed navigation molecules keeps the sidebar consistent across applications. The content of the 1st level and 2nd level can vary.

Dismissing Left Sidebar

There are several possible ways to exit the basic left Sidebar.

• x: Clicking the close x icon in the upper left will close the Sidebar.
• Esc: Press ESC on the keyboard
• Click: Click into the non-sidebar content

There are only one possible way to exit the anchored left Sidebar.

• x: Clicking the close x icon in the upper left will close the Sidebar.

Floating Sidebar

[!WARNING] This component of teh pattern is likely depricated. Please do not include it in the designs.

Notifications

This will be a general overview. For more information, go to Notification.

Notification Panel

The Notification Panel is located within the right sidebar. It hosts only communication organisms. It can be opended with the "notification" action icon in the header. Similar to the navigation panel, it can be anchored or closed with the respecticve actions on the top-right side.

The Notification Panel has two tabs: unread and all.

• Unread - This tab displays all notification the user has not interacted with. This is the default tab.
• All - This tab shows all information the user has recieved so far.

Notifications are ordered and grouped by their date of appearance, regardless of the active tab. Selecting a notification opens a detail panel to the left with basic information about the notification.

Global Notifications

Global Notifications appear as a bar at the top of the dashboard as a pop-up. They disappear after a set amount of time or if the user clicks the "close" button, if one is present.

Global Notifications give feedback on major user actions, for example saving a change inside a table. They appear at the end of a process and usually have an impact on the system, like changing data. They are always tied to user interaction or the inability for a user to perform an action.

Global Notifications have four states, determined by importance. The content can vary by use case.

• Error Notification — Colored blue; signals critical errors.
• Warning Notification — Colored orange; announces problems that may result in errors.
• Success Notification — Colored green; signals a successful process.
• System Notification — Colored blue; reports system information.

Inline Notification

For more information on the component of the same name: Inline Notification

The Inline Notification organism consists of three molecules and one atom: Notification Indicator, Notification, Actionbar, and a Container with shadow. It appears directly below the header and animates downward when it enters. Users dismiss the notification with the close icon.

Like Global Notifications, Inline Notifications have four states, determined by importance. The content can vary by use case.

• Error Notification — Colored blue; signals critical errors.
• Warning Notification — Colored orange; announces problems that may result in errors.
• Success Notification — Colored green; signals a successful process.
• System Notification — Colored blue; reports system information.

Toast Notification

A Toast Notification appears in the top-right corner of a dashboard as an overlay. Only one toast notification is shown at a time. Each toast notification includes a notification indicator, a title, a notification, the time of the notification, and a close icon. Toasts may also include links or content actions.

Toast Notifications share the four states of Inline Notifications: Error, Warning, Success, and System Notification. In addition, the System Notification has one variant—the Progress Notification.

State is shown by:

• The notification indicator/icon.
• An outline at the bottom of the container with the state color.
• For Error, Warning, and Success notifications, an additional icon in the header to the left of the Notification icon.
• For Progress notifications, a circular progress indicator in the header to the left of the Notification icon and a progress bar in the container.

Modal Notifications

Modal Notifications are a special type of Dialog, the Passive Modal.

Dialog

Dialogs are placed on to of an Overlay to focus the users attention. The width of the Dialog is based on breakpoints inside the window, while the height is adaptive to the content of the Dialog. It is important that the Dialog does not become too long. In such a case, separate the interaction into partial interactions with the help of a sidebar.

Basic and Progress Dialog

A Dialog is used when the system requires the user to enter data or perform tasks. The body of the dialogue is variable and can be freely edited. More on this topic in the Dialog pattern.

Modal

The Modal is best suited for information modules. The dimensions of the Modl depend on the content. More on this topic in the Dialog pattern.

Best Practices

Usage

When designing a dashboard, use one of the documented dashboard floorplans. If none fits, contact UX to propose a new floorplan. It will be reviewed and if appropriate, added to the list of floorplans below.

Use the same patterns for similar processes within an application. It ensures a cohesive user experience and predictability for the User.

Content

Order content by the reading order of the users. In the western world, this would be left-to-right, top-to-bottom. Start with more general or abstract information into detail as you move further right and down.

Navigation

Place primary navigation in the left sidebar. Navigation within a task, for example "next" within a multi step process, can be placed within the content area in the form of actions.

For more information, please visit Navigation.

Title

Keep the dashboard titles consise.

Dashboard Patterns Library

Dashboard patterns inside Inspire are strategically crafted interfaces that cater to various user needs and interactions. From the central hub of the Home Dashboard to the detailed exploration in Application Overview, each pattern serves a unique purpose, providing users with intuitive navigation, comprehensive insights, and customisation capabilities.

These patterns collectively form a harmonious ecosystem, ensuring consistency, accessibility, and flexibility throughout the design system.

Home Dashboard

It acts as the epicentre of your application development experience, providing an instant snapshot of essential metrics and insights. Users gain immediate visibility into the performance and status of existing applications, streamlining decision-making and project management.

Application Library

The library rovides a clear overview of all active items in the application. A table lists each item, and a left-hand panel surfaces key metrics. Users can monitor status, edit items, or open a detailed view.

Application Overview

It opens from the Library to focus on a single item. A right-hand details panel shows detailed information on the item. Users can review changes, adjust settings, or navigate to deeper views.

Task Management Dashboard - Kanban View

This dashboard functions as an overview of tasks with key metrics within the application. Tasks are grouped by applycation relevant attributed for clarity. The progress of each task is clearly displayed. Users gain an insight on the status of tasks, potential problems and the overall status of teh process.

Content Editor

Two toolbars frame the content preview and provide editing controls. Users can edit the content here, then use the top toggle to switch between editing and previewing the result.