AdapTable Version:

Framework:

Dashboard Modes

Summary

By default the Dashboard is visible and placed above AG Grid with Tabs expanded
However there are alternative Dashboard Modes available to suit different requirements:
- Inline
- Collapsed
- Floating
- Hidden

The default visibility settings for the Dashboard are:

Visible
Placed above AG Grid
Tabs display Toolbar contents horizontally
The first Tab is expanded

However there are 4 alternative options for displaying the Dashboard:

Inline Mode

The Dashboard Inline Mode presents the Tabs and Toolbars in a different way.

The Dashboard Header collapses to become the first Toolbar and a dropdown displays a list of available Tabs.

Note

This is usually used as a screen estate saving option as it takes up less space than the regular mode

If there is only one Tab provided, the dropdown is not be displayed.

Hint

This is a useful way to show only Toolbars without the User needing to know anything about Tabs

Caution

Unlike with other Modes which can be set at run-time, Inline can only be configured by developers at design-time

Dashboard: Inline Mode

Fork Fork

This example shows the Dashboard in Inline Mode
The tabs are displayed in a dropdown - with Search currently selected

Collapsed Mode

In Collapsed Mode, AdapTable displays only the Dashboard Header, Title, Buttons and Quick Search.

Note

The Toolbars are not visible and only appear when the name of the Tab is clicked

Dashboard; Collapsed Mode

Fork Fork

Here the Dashboard is Collapsed - so that only the names of the Tabs are visible at start-up
We have also set 2 other Dashboard Options properties:
- showQuickSearchInHeader is false which removes the Quick Search input
- canFloat is false which means that double-clicking the Dashboard does not put it in floating mode

Expand to see the Dashboard Options and Initial State

dashboardOptions: {
  showQuickSearchInHeader: false,
  canFloat: false,
},
initialState: {
  Dashboard: {
    IsCollapsed: true,
    Tabs: [
      {
        Name: 'Search',
        Toolbars: ['GridFilter', 'DataSet', 'QuickSearch'],
      },
      {
        Name: 'Edit',
        Toolbars: ['SmartEdit', 'BulkUpdate', 'DataChangeHistory'],
      },
      {
        Name: 'Notifications',
        Toolbars: ['Alert', 'SystemStatus'],
      },
    ],
  },
},

Try It Out

Click a Tab Header to expand the Dashboard and then click the open Tab to collapse it again

Floating Mode

Floating Mode render a much narrower Dashboard Header with just the Title displayed.

This control displays on top of AG Grid cells

Hint

For this reason, Floating Mode can be very useful space saving feature

The floating Dashboard can be dragged to any position by clicking on the Name.

When it does this, the mouse will change to a cross indicating it can be dragged.

Note

Double-clicking the Dashboard (when in floating mode) will restore it to the default docked mode.

The canFloat property of Dashboard Options can be set to false to prevent Floating.

canFloat

Default: true

Boolean

Whether the Dashboard can be floated

The Dashboard offers a floating mode.

In this scenario, the Dashboard shrinks to display just the Title, and it can be dragged around the screen.

The property defaults to true so change it to false if you dont want the Dashboard to be floated.

// Don't allow the Dashboard to be floated
const adaptableOptions: AdaptableOptions = {
    dashboardOptions: {
      canFloat: false
    }
}

Dashboard: Floating Mode

Fork Fork

This demo shows the Dashboard in Floating Mode

Try It Out

Double-click the Title in the Dashboard to dock it, and then double-click again to put it back into floating mode

Hidden Mode

The Dashboard can be set to be hidden so it is not visible to users.

Note

The Dashboard is, however, still instantiated by AdapTable
It can, therefore, be made visible by users via the Column Menu, Context Menu, Tool Panel or Settings Panel

Hint

To ensure the Dashboard can never be visible set its Entitlement to Hidden

Dashboard: Hiding

Fork Fork

In this demo the Dashboard is set to Hidden and cannot be seen
However it is initilaised - which means it can be made visible through using the Menus the Tool Panel

Try It Out

Make the Dashboard visible again by selecting Dashboard / Show from the Column or Context menus

Switching Dashboard Modes

Run-time users are able to switch easily between the different Dashboard Modes.

This can be done in multiple ways, including:

Manually in the UI, where users can:
- Switch between Tabs by clicking the name of a non-active tab
- Collapse / Expand the Dashboard by clicking on the active tab
- Float / Dock the Dashboard by double-clicking the Title in the Dashboard Header
A Dashboard Menu Item in both Column Menu and Context Menu containing 4 sub menu items:
- Configure - opens the Dashboard section of the Settings Panel
- Collapse / Expand
- Float / Dock
- Hide / Show
In the Dashboard Tool Panel which contains 3 checkboxes:
- Collapse
- Float
- Hidden

Hint

These 3 checkboxes are also available in the Dashboard section of the Settings Panel

Configuring Dashboard Modes

Each Dashboard Mode can be configured at design-time using Dashboard Initial State:

Inline Mode - set via IsInline property

Note
This setting cannot be subsequently overridden in the UI
Collapsed / Expanded View - set via IsCollapsed property
Floating / Dock View - set via IsFloating property

Caution
The Dashboard can only be floated if canFloat property is set to true in Dashboard Options
Hidden / Visible - set via IsHidden property

Hint
Users cannot subsequently make the Dashboard visible if there is an Entitlement set of hidden

PreviousDashboard Buttons NextConfiguring Dashboard

Framework: