• Public
  • Public/Protected
  • All

The Predefined Configuration for the Dashboard function

The Dashboard is the area above the grid which contains buttons, tabs, toolbars and Quick Search.

Note: In v.6.1 (March 2020) the Dashboard has been signficantly updated and improved with some previous properties now deprecated.

The Dashboard comprises 2 sections:

  • Dashboard Header: contains the Home Dropdown, Function Buttons and Quick Search

  • Dashboard Tabs: named groups of Toolbars

You use Dashboard State to set these Tabs and Function Toolbars.

You also use Dashboard State to define 2 sets of bespoke items in your Dashboard:

  • Custom Toolbars that you can then include in your Dashboard Tabs.

  • Custom Buttons that will alongside the Function buttons in the top left corner of the Dashboard.

    Further AdapTable Help Resources

Demo Site | API | ReadMe

Dashboard Predefined Config Example

export default {
Dashboard: {
  VisibleButtons: ['GridInfo', 'SystemStatus', 'BulkUpdate'],
  CustomToolbars: [
           Name: 'appToolbar',
           Title: 'Trades',
           ShowFunctionsDropdown: true,
  Tabs: [
           Name: 'Search',
           Toolbars: ['QuickSearch', 'DataSource', 'AdvancedSearch'],
           Name: 'Edit',
           Toolbars: ['BulkUpdate','SmartEdit'],
           Name: 'Grid',
           Toolbars: ['Layout', 'CellSummary', 'SystemStatus', 'appToolbar']
 CustomButtons: [
       Name: 'cb1',
       Caption: 'First',
        ButtonStyle: {
         Variant: 'text',
         Tone: 'success',
      Name: 'cb2',
      Caption: 'Second',
       ButtonStyle: {
         Variant: 'raised',
         Tone: 'accent',
} as PredefinedConfig;

In this example we have:

  • created 3 Dashboard Tabs ('Search', 'Edit' and 'Grid') each with their own Toolbars

  • created a Custom Toolbar ('appToolbar') and put it in the 'Grid' Tab (and we set it display the Configure button)

  • set 3 Function Buttons to be visible

Custom Toolbars

Dashboard State can be supplied with custom toolbars that users can leverage in order to populate them with their own content.

Each Custom Toolbar contains 2 divs (to cater for 2 different scenarios):

  • a div for you to render any content that you want; its your responsibilty to make sure that the div is populated and uses the correct styles.

  • a div which will display any buttons that you provide via the ToolbarButtons property of the Application state (see below).

See Custom Toolbar for full documentation and code examples.




Optional ActiveTab

ActiveTab: number

The index of the Active Tab (in the Tabs collection)

Optional AvailableToolbars

AvailableToolbars: AdaptableDashboardToolbars

Depracated Property; instead any toolbar for an 'entitled' Function is available

Optional CanFloat

CanFloat: boolean

Whether or not the Dashboard can be floated.

If set to true (the default) then double-clicking the Dasbhoard will put it in float mode.

If set to false then double-clicking is disabled and the floating menu options are removed.

Default Value: True

Optional CustomButtons

CustomButtons: ToolbarButton[]

Buttons set by the User at design-time to appear in the top corner of the Dashboard - next to the Visible Function Buttons

These buttons - if provided - are always present and cannot be removed at design time.

When a button is clicked the DashboardButtonClicked event is fired.

Optional CustomToolbars

CustomToolbars: CustomToolbar[]

Toolbars provided by the User

Each Custom toolbar contains a Name (to identify it) and a Title.

It can optionally also contain a Glyph and an array of ToolbarButton.

Optional DashboardVisibility

DashboardVisibility: "Minimised" | "Visible" | "Hidden"

Depracated Property; instead use the IsCollapsed and IsFloating properties

Optional FloatingPosition

FloatingPosition: AdaptableCoordinate

The position of the Dashboard when in 'floating mode'.

This property is set by AdapTable and stored so the Dashboard will be in the same position when the grid next starts.

Optional HomeToolbarTitle

HomeToolbarTitle: string

The 'title' to display in the the Dashboard Header

If no value is provided then it will display the value of the 'adaptableId' property in Adaptable Options

Note: It is called HomeToolbarTitle for backward compatibiility

Default Value: the adaptableId property in Adaptable Options

Optional IsCollapsed

IsCollapsed: boolean

Whether or not the Dashboard is collapsed.

If the Dashboard is collapsed then only the header is visible but not the contents of any tabs.

Default Value: False

Optional IsFloating

IsFloating: boolean

Whether or not the Dashboard is floating.

If the Dashboard is floating then it will appear anywhere you drag it to (in minmised form).

Double-click the Dashboard header to revert it to its default position above the grid.

Default Value: False

Optional IsInline

IsInline: boolean

An alternative way of showing the Dashboard in 'Expanded' view.

Instead of a Header and Body it has the headers section to the left of the Toolbars. (Similar to how it was pre Version 6.1)

Default Value: False

Optional MinimisedHomeToolbarButtonStyle

MinimisedHomeToolbarButtonStyle: ButtonStyle

Depracated Property

Optional Revision

Revision: number

The 'version' number of the Item.

Used for when developers want to update one section in Predefined Config while keeping others unchanged.

If the Revision number in Predefined Config is greater than the one stored in the User's state, then the section in Predefined Config will be used, and will replace the State.

If the Revision number in Predefined Config is not greater than the one stored in the User's state, then it is ignored as its already been passed into the User's state (and potentially superseded).

See Adaptable State Guide for more information.

Note: This is the only property in ConfigState - the base class for all Adaptable State objects.

Optional ShowColumnsDropdown

ShowColumnsDropdown: boolean

Depracated Property; instead select columns through the Column Chooser

Optional ShowFunctionsDropdown

ShowFunctionsDropdown: boolean

Whether to show the Home dropdown in the Dashboard Header.

If 'true' (the default) then the dropdown will be visible as the first item (with a 'house' icon).

Clicking the button will open a dropdown listing all the Functions that your Entitlements allows.

Selecting a menu item in the dropdown will open the associated popup for that Function.

Default Value: true

Optional ShowGridInfoButton

ShowGridInfoButton: boolean

Depracated Property; instead please make sure that 'GridInfo' is included in Visible Buttons collection

Optional ShowQuickSearchInHeader

ShowQuickSearchInHeader: boolean

Whether to show the Quick Search textbox in the Dashboard Header.

If 'true' (the default) then the textbox will be visible.

Default Value: true

Optional ShowSystemStatusButton

ShowSystemStatusButton: boolean

Depracated Property; instead please make sure that 'SystemStatus' is included in the Visible Buttons collection

Optional ShowToolbarsDropdown

ShowToolbarsDropdown: boolean

Depracated Property; instead select toolbars and tabs through configuring the Dashboard

Optional Tabs

Tabs: DashboardTab[]

A tab is a named group of Toolbars.

You can create as many tabs as you want, but please ensure that each Toolbar is only in one tab.

Optional VisibleButtons

VisibleButtons: AdaptableFunctionButtons

Which Function Buttons should be visible in the Dasbhoard Header when the application loads.

Each button is connected to a Function in AdapTable and opens the relevant popup screen.

Default Value: 'SystemStatus', 'GridInfo', ColumnChooser', 'ConditionalStyle'

Optional VisibleToolbars

VisibleToolbars: AdaptableDashboardToolbars | string[]

Depracated Property; instead create Tabs which include a Toolbars property

Note: in 6.1 any VisibleToolbars will be automatically added to a new Tab (which can then be edited by you)

Generated using TypeDoc