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¶

Name	Type	Default	Description
addWidgetInstance(...) ¶	(widgetInstanceConfig: Omit<WidgetConfig, "id">) => void		Adds a new widget instance configuration to the dashboard grid. It is not persisted yet and is added to the transient widget instances. Parameters widgetInstanceConfig: Omit<WidgetConfig, "id">  The new widget configuration.
cancel() ¶	() => void		Cancel current changes and restore last saved state.
edit() ¶	() => void		Set dashboard grid in editable mode to modify widget instances.
editWidgetInstance(...) ¶	(widgetInstanceConfig: WidgetConfig) => void		Opens the provided widget configuration in the related editor or emits on widgetInstanceEdit , if emitWidgetInstanceEditEvents is true. Parameters widgetInstanceConfig: WidgetConfig  The config of the widget instance to edit.
(readonly) gridConfig ¶	InputSignal<(undefined | GridConfig)>	inject(SI_DASHBOARD_CONFIGURATION)?.grid	Configuration options for a grid instance. Default is the optional value from the SI_DASHBOARD_CONFIGURATION .
(readonly) gridStackWrapper ¶	Signal<SiGridstackWrapperComponent>	viewChild.required(SiGridstackWrapperComponent)
(readonly) isLoading ¶	BehaviorSubject<boolean>	...	Indication for load and save operations.
removeWidgetInstance(...) ¶	(widgetInstanceId: string) => void		Removes a widget instance from the visible widgets and puts it in the markedForRemoval array. Parameters widgetInstanceId: string  The id of the widget instance to be removed.
save() ¶	() => void		Persists the current widget instances to the widget storage and changes the editable and isModified modes.
updateWidgetInstance(...) ¶	(editedWidgetConfig: WidgetConfig) => void		Updates the visible widgets with an updated configuration. Will update the user interface and emit on isModified . Parameters editedWidgetConfig: WidgetConfig  The config of the widget instance that was updated.
loadingService ¶	SiLoadingService	inject(SiLoadingService)	Service used to indicate load and save indication. Deprecated: Use isLoading instead.

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¶

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¶

Types Documentation¶