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

Boardlet

[!NOTE] This article is about the Boardlet Pattern. For more information about the boardlet component in the App Composer, please visit this page.

Overview

A Boardlet is the core unit of a dashboard. It aggregates and displays matching content, such as tables, diagrams, KPIs, or graphics. It can range from simple to complex depending on the use case. Boardlets are assembled by authorized users to compose a dashboard.

They exist in three variants: default, ghost and graphic. In addition, it has an optional header and footer.

Exemplary boardlet

Anatomy

Labeled anatomy

  • 1 - Boardlet Header Contains title, subtitle and overflow menu.
  • 2 - Title with Icon It should be as brief as possible while still being understandable for the user.
  • 3 - Subtitle It is an extension of the title that expands the information of the title.
  • 4 - Overflow Menu Actions or Navigation directly connected to the boardlet are listed here in a dropdown menu.
  • 5 - Boardlet Body Contains the content of the boardlet.
  • 6 - Boardlet Footer Contains action buttons related to the boardlet.

Every boardlet contains a Body where content may be placed. In addition, it can contain a Title, a Subtitle (not currently in the App Composer), an Overflow Menu, and a Footer.

Width and height are flexible but must align to the gid of the dashboard. It has now inner padding, except for the header.

Header

The Boardlet Header is one an optional part of the dashboard. It contains a title, subtitles and overflow menu. The header has mandatory padding at the sides with 24px and a padding of 20 px at the top.

Header with spacings

Title and Subtitle

The title is part of the Boardlet Header, which can be activated or deactivated during the boardlet creation. It ensures that the user has an immediate general understanding of the boardlets content when viewing the dashboard. The title is always aligned left. It can include an Icon on its left and right side. It uses a semibold font and should have a slightly larger font-size than following elements.

The Subtitle is an extension of the title, meaning it can't exist without it. The subtitles may expand the information about the header. It uses the same padding as the title while using a slightly smaller font size and regular font weight.

Overflow Menu

The Overflow Menu is part of the Boardlet Header, which can be activated or deactivated during the boardlet creation. On clicking the icon, it expands to a list of no more than 12 action items. All actions related to the boardlet that are not part of the footer can be stored here. It may also include Inline Navigation.

The action items always contain a title. They may contain an Icon to their left or right side. These actions can be used to control the content and the boardlet view. They should be ordered in a sensible manor.

Structure of the overflow menu with states

Body

The Boardlet Body contains the content of the boardlet. A list of content can be placed vertically or horizontally within the body. Additionally, it can be aligned vertically and horizontally. For more information on alignment, see the component page.

The body has neither padding nor grid. A grid may be added through the Grid Component.

Tabs

A boardlet can group its content into tabs. By doing so, the boardlet reduces visual clutter and gives the content a well-defined structure. The user can select a tab from a selection of 2 to 12 tabs. The boardlet body will only show the content of the selected tab. Tabs are currently part of the boradlet body.

Boardlet with tabs

A tab has three different states, selected, unselected and disabled.

  • Unselected tabs have a grayed-out background.
  • Selected tabs share the background color of the theme. In case the selected tab is between two unselected tabs, the selected tab has a shadow on the right and left.
  • Disabled tabs have a greyed-out background and text. These tabs can't be selected.

Different tab states

There are two types of tabs:

For more information on these variants, visit the linked component pages.

The Boardlet Footer is optional and can be activated or deactivated during the boardlet creation. It can only contain buttons. These buttons can be aligned vertically or horizontally.

Best Practices

Usage

A boardlet is a segment of a dashboard that is used to group together matching content and show it to the user. If the content within a boardlet is not connected, it should be separated into multiple boardlets.

A boardlet is somehow comparable with an app in the smartphone world. The functionality can be very simple or complex, depending on the use case. For examples what boardlet content could be:

  • Tables with information
  • Diagrams
  • KPI’s
  • Graphics

Title and Subtitles

The dashboard title should be concise and understandable. It should only be deactivated if the content is self-explanatory. When in doubt, show the title.

In the contrary subtitle should only be shown if the information can’t reliably be shown with the header.

Formatting inside the body

In the case the content consists of multiple components, a grid should be used. This ensures related components are visually grouped using white space.

Avoid scrolling inside a Boardlet. If the amount of content is too large, split it into multiple tabs. Exceptions include:

  • The content needs to be shown simultaneously.
  • The boardlet has a footer with buttons.
  • The scrolling only exists on smaller devices that are not regularly used.

Variations

Boardlet Styles

The boardlet has 3 basic styles: Default, Ghost and Graphic.

  • Default: The boardlet has a solid background with color depending on the theme. The boardlet body gains an 8px padding on the left, right and bottom.
  • Ghost: The boardlet has neither background color nor padding in the boardlet body.
  • Graphic: The boardlet has a solid background with the color depending on the theme. The boardlet body has no padding.

Boardlet Types

  • No labels