AdapTable Version:

Framework:

Configuring the Dashboard

Summary

The Dashboard is extremely configurable - both for run-time and design-time users
Each element can be precisely set to meet the requirements of each time and user

Because the Dashboard is so personal to each AdapTable instance it is fully flexible and configurable.

Design Time Configuration

Design-time developers can configure all the properties in the Dashboard to meet their precise requirements.

Dashboard Configuration is achieved through a mixture of Initial Adaptable State and Adaptable Options as follows:

Dashboard Feature	Provided
Tabs and (System) Module Toolbars	Dashboard Initial State
Pinned Toolbars	Dashboard Initial State
Custom Toolbars	Dashboard Initial State & Dashboard Options
Module Buttons	Dashboard Initial State
Custom Buttons	Dashboard Options
Buttons Location	Dashboard Options
Dashboard Modes	Dashboard Initial State
Dashboard Header Text	Dashboard Initial State
Application Icon	User Interface Options
Quick Search Input	Dashboard Options

Find Out More

Tabs, Toolbars, Buttons and Dashboard Modes are discussed in other pages in this section
We will look at each of the other 4 options below

Developer Guide

Configuring the Dashboard at Design Time

There are a number of different, optional, properties than can be provided in Dashboard Initial State and Dashboard Options:

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'AdapTable Dashboard',
  dashboardOptions: {
    showQuickSearchInHeader: false,
    buttonsLocation: 'left',
    customDashboardButtons: [
      {
        label: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        )=> {
          return 'Set Dark Theme'
        },
        onClick: (
            button: AdaptableButton<DashboardButtonContext>,
            context: DashboardButtonContext
        )=> {
          context.adaptableApi.themeApi.loadDarkTheme()
        },
        buttonStyle: { tone: 'accent', variant: 'raised' },
      },
    ],
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Show Current Time',
            onClick: (button: AdaptableButton<CustomToolbarButtonContext>, context: CustomToolbarButtonContext) => {
              context.adaptableApi.alertApi.showAlertInfo('Current Time', new Date().toTimeString());
            },
            buttonStyle: { tone: 'info', variant: 'text' },
          },
        ],
      },
    ],
  },
  userInterfaceOptions: {
    applicationIcon: {
      src: 'https://img.icons8.com/color/100px/bungalow',
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Search',
          Toolbars: ['ColumnFilter', 'DataSet', 'QuickSearch'],
        },
        {
          Name: 'Custom Tab',
          Toolbars: ['DataChangeHistory', 'ButtonToolbar'],
        },
      ],
      ModuleButtons: ['FormatColumn', 'Shortcut' ],
      IsCollapsed: true,
      ActiveTabIndex: 1,
      DashboardTitle: "CRM Monitor",
      PinnedToolbars: ["Query"]
    },
  },
};

Configure Dashboard Buttons

By default only the SettingsPanel Module Button is displayed.

In Initial Adaptable State:

Use ModuleButtons to add more Module Buttons if needed
Or provide empty array to show no module buttons

In Dashboard Options:

Provide any Custom Dashboard Buttons that should be displayed
Set whether buttons appear on right (default) or left

Configure Tabs and Toolbars

By default no Tabs are displayed.

In Initial Adaptable State:

Provide list of Module and Custom Toolbars organised by Tabs
Specify any Pinned Toolbars
Each Toolbar should appear in only one Tab
TabIndex property sets which Tab opens when Application starts

In Dashboard Options:

Define any Custom Toolbars which are available

Set Dashboard View or Mode

You can change how the Dashboard will appear by configuring the Initial State
You can set one of the View Properties:
- IsCollapsed - only header of Dashboard is visible
- IsFloating - Dashboard floats and snaps back on double-click (or provide FloatingPosition coordinate)
- IsHidden - Dashboard is invisible
Set IsInline to true for Dashboard to appear differently.

Provide a Dashboard Title

Use DashboardTitle to give Dashboard a bespoke name. If unsupplied, adaptableId value in Base Options is used.

Display the Application Icon

Provide an Icon for the Application - by using the applicationIcon property in User Interface Options

Set Quick Search Input Visiiblity

Set showQuickSearchInHeader in Dashboard Options to false if you wish to hide the Quick Search Input (visible by default)

Buttons Location

By default any Module (or Custom) Buttons are displayed on the right of the Dashboard - next to the Quick Search Input.

Alternatively the buttonsLocation property of Dashboard Options can be used to render them on the left.

Quick Search Input

The Quick Search Input performs a simple text search across all visible columns in AG Grid.

This is done using the Quick Search Module.

The Input is visible by default but by can be hidden by setting the showQuickSearchInHeader property of Dashboard Options to false.

showQuickSearchInHeader

Default: true

Boolean

Shows Quick Search textbox in the Dashboard Header

By default AdapTable will display a Quick Search input box in the Dashboard.

In Default mode this is in the top left corner; in Inline Mode it is in the left box.

Note

The Quick Search Entitlement takes precedence over this property
If that is set to Hidden the input will not display, irrespective of the value of this property

// Don't show the Quick Search Header in the Dashboard
const adaptableOptions: AdaptableOptions = {
  dashboardOptions: {
    showQuickSearchInHeader: false,
  },
};

Dashboard Header Text

The Dashboard's Header Text is set via the set via DashboardTitle property in Dashboard Initial State.

Hint

If not explicitly provided, the value of the adaptableId property in Adaptable Options is used

Application Icon

If an Application Icon is provided, AdapTable displays it in the Dashboard (as well as in Toast Notifications).

Note

Application Icons are of the common Adaptable Icon object type
They are provided via the applicationIcon property in User Interface Options

Dashboard: Configuring

Fork Fork

This example shows some ways of configuring the AdapTable Dashboard including:
- setting showQuickSearchInHeader to false in Dashboard Options to hide the Quick Search Input
- providing an Application Icon in User Interface Options
- configuring the buttonsLocation Dashboard Options so that Buttons are displayed on the Left
- setting the Dashboard Title explicitly in in Dashboard Initial State

Expand to see the Dashboard configuration provided

dashboardOptions: {
  showQuickSearchInHeader: false,
  buttonsLocation: 'left',
},
userInterfaceOptions: {
  applicationIcon: {
    src: 'https://img.icons8.com/color/100px/bungalow',
  },
},
initialState: {
  Dashboard: {
    DashboardTitle: 'Configuring the Dashboard',
    ModuleButtons: [
      'FormatColumn',
      'DataChangeHistory',
      'CalculatedColumn',
      'Shortcut',
    ],
  },
},

Run Time Configuration

Run Time users are able to re-configure their Dashboard if needed.

Note

This is, of course, dependent on the run-time user having the correct Entitlements

In particular they can use the Dashboard section of the Settings Panel to:

Create / Edit / Delete Tabs
Decide which Toolbars are visible and placed into which Tab
Manage Pinned Toolbars
Configure the order and visiblity of Module (but not Custom) Dashboard Buttons
Switch between Dashboard Modes

Caution

Run-time users cannot create Custom Toolbars or Custom Dashboard Buttons
They can set visibility and Tab placement of Custom Toolbars, but not Custom Dashboard Buttons

Switching Dashboard Modes

AdapTable allows run-time to switch between the available Dashboard modes in multiple ways, including:

Manually in the UI - users can Collapse / Expand the Dashboard by clicking on the active Tab, or Float / Dock the Dashboard by double-clicking the Title in the Dashboard Header
A Dashboard Menu Item in both Column and Context Menus enables all Dashboard Modes to be selected
A Dashboard Tool Panel in the AdapTable Tool Panel contains Collapse, Float and Hidden checkboxes

UI Step by Step Guide

Configuring the Dashboard using Settings Panel

CSS Configuration

Everything in AdapTable is fully themable using CSS Variables.

This allows developer complete control over the look and feel of the Application - including the Dashboard.

Dashboard: Stacking Toolbars

Fork Fork

By default all Toolbars (in the Active Tab) are shown in a long horizontal row.
This means scrolling to the right is required if the Toolbars take up more space than the grid or enclosing window.
However, as this demo illustrates, it can be easily 'fixed' by setting one of the many CSS Variables made available by AdapTable.

Expand to see the CSS

Toolbars can be wrapped by setting the --ab-dashboard-wrap CSS Variable to wrap (default is nowrap):

--ab-dashboard-wrap: wrap

A relevant CSS Variable we have also set here is --ab-dashboard-gap-size which controls the gap between Toolbars:

--ab-dashboard-gap-size: 2px

PreviousDashboard Modes NextTechnical Reference

Framework: