Flexible dashboard¶

Usage¶

Flexible dashboards offers a personalized experience by enabling users to tailor the dashboards content itself.

Users can enter the edit mode to add, move and remove widgets, as well as restoring the dashboard to its default settings.

When to use¶

• Use it when there is a large amount of widgets that users can choose from.
• Use it if the application is used by a diverse group of users with different needs and goals.
• Use it if users may need to prioritize certain types of information over others based on their current tasks or goals.
• Be mindful about its use. Providing too many customization options can overwhelm users and make the dashboard more difficult to use.

Design¶

Default mode¶

In default mode, the dashboard displays a pre-defined set of widgets, providing users with a view of the data and insights based on their chosen configuration.

1. Title (optional), 2. Dashboard options (optional), 3. Content area 4. Edit mode button

The dashboard options area on top of the widgets can be used for actions such as filtering, which affect the whole dashboard.

Edit mode¶

In edit mode, users can customize the dashboard to fit their specific needs. The dashboard options area is replaced by editing options that allow users to add widgets and perform other actions.

1. Title (optional), 2. Editing options (optional), 3. Content area, 4. Save and cancel button

Add widget¶

1. Select Add widget to open the widget library.
2. Select the desired widget.
3. Click Add. The library will be closed and the new widget will be added at the bottom of the page.

Resize¶

Users can use the resize handler at the bottom right corner and drag horizontally to change the width, vertically to change the height, or diagonally to change both dimensions. A light blue box appears to indicate the area a widget will snap to, once the user releases the resize handle.

Move¶

Users can select a widget within the content area and drag it to the desired location. As with resizing, a light blue box appears to indicate where the widget will be positioned upon letting it go.

Code¶

The flexible dashboards are based on gridstack.js.

See README for details about including to your app.

Direct Link to dashboard demo.

SiFlexibleDashboardComponent API Documentation¶

The component implements a dashboard with adding, removing and resizing widgets. It consists and connects a toolbar, a grid with widgets, and a widget catalog.

Input Properties¶

Output Properties¶

SiGridComponent API Documentation¶

The grid component is the actual component on which the widget instances are placed and visualized. You can think of a headless dashboard, without a title, toolbar or edit buttons.

Input Properties¶

Output Properties¶

Attributes and Methods¶

Custom header¶

Like the dashboard, the flexible dashboard supports a custom header, e.g. with a description or page actions. Project it using the header attribute and follow the page header guidelines. The custom header replaces the heading in the dashboard view. While adding or editing widgets, the respective title is shown instead.

<si-flexible-dashboard [dashboardId]="dashboardId" [widgetCatalog]="widgetCatalog">
  <div class="si-layout-header" header>
    <h2 class="si-layout-title si-layout-top-element">Dashboard</h2>
    <p class="si-layout-subtitle">Description</p>
  </div>
</si-flexible-dashboard>

Persistence of dashboard configuration¶

SiWidgetCatalogComponent API Documentation¶

Default widget catalog implementation to show all available widgets that can be added to a dashboard. It consists of a list view, that lists all available widgets and after selection, a host in which the widget specific editor is loaded. Applications can either stay with the default catalog or implement their own by extending this class.

Input Properties¶

Output Properties¶

Attributes and Methods¶

Name	Type	Default	Description
ngOnDestroy() ¶	() => void		A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
(readonly) widgetList ¶	WritableSignal<Widget[]>	[]	Property to provide the available widgets to the catalog. The flexible dashboard creates the catalog by Angular's createComponent() method and sets the available widgets to this attribute.
widgetCatalog ¶	Widget[]	[]	Property to provide the available widgets to the catalog. The flexible dashboard creates the catalog by Angular's createComponent() method and sets the available widgets to this attribute. Deprecated: This property will be removed in v52. Use the signal widgetList instead.

SiWidgetInstanceEditorDialogComponent API Documentation¶

The Dialog component is utilized when editing a widget instance within a dashboard. It dynamically loads and creates the associated widget editor and incorporates it into its content. The dialog component is accountable for interacting with the dashboard and offers options for saving changes or terminating the editing process.

Input Properties¶

Name	Type	Default	Description
widget ¶	Widget		Input for the widget definition. It is required to retrieve the component factory to instantiate the widget editor.
widgetConfig ¶	WidgetConfig		Input for the widget instance configuration. It is used to populate the widget editor.

Output Properties¶

Attributes and Methods¶

Widget renderer¶

The SiWidgetRendererComponent is a presentational (dumb) component that renders a single widget instance from a WidgetConfig, without the surrounding dashboard or grid infrastructure. It takes the exact Widget definition to render and delegates the actual rendering to the widget host.

Use it to display an individual widget outside of a flexible dashboard, for example in kiosk mode or within a custom layout such as a carousel. The component is a self-contained widget cell that can be placed anywhere a single widget needs to be shown.

It requires two inputs: the widgetConfig describing the widget instance to render and the matching widget definition. The widget must match the config's widgetId.

<!-- Render a single widget instance -->
<si-widget-renderer [widgetConfig]="widgetConfig" [widget]="widget" />

SiWidgetRendererComponent API Documentation¶

A presentational (dumb) component that renders a single widget instance from a WidgetConfig using the provided Widget definition. It delegates the actual rendering to the SiWidgetHostComponent .

Intended Usage

This component renders an individual widget outside of a dashboard or grid, without requiring manual host wiring. It is a self-contained widget cell that can be placed anywhere a single widget needs to be shown, for example in kiosk mode or within a custom layout such as a carousel.

Example

<!-- Render a single widget instance -->
<si-widget-renderer [widgetConfig]="widgetConfig" [widget]="widget" />

Input Properties¶

Name	Type	Default	Description
widget ¶	Widget		The Widget definition used to render the given widgetConfig . It must match the config's widgetId .
widgetConfig ¶	WidgetConfig		The configuration of the widget instance to render.

Security considerations¶

Widgets can be loaded via Module Federation, Native Federation or as web components from a URL. The loaded code is executed in your application. Only register widget factories that point to trusted sources.

Types Documentation¶