Dashboard Technical Reference
Summary
- The Dashboard can be accessed at run-time through 2 events:
- Dashboard Changed - which fires when anything changes in the Dashboard
- Custom Toolbar Configured - which allows a custom toolbar to be updated
- Dashboard State and Dashboard Options provide design-time configuration Options
- Dashboard API provides run-time access to the Dashboard
Dashboard State
The Dashboard State section contains Dashboard properties that are editable at run-time:
| Property | Type | Description | Default |
|---|---|---|---|
| ActiveTabIndex | number | Index of Active Tab (in Tabs collection) | |
| DashboardTitle | string | Title displayed in Dashboard Header | adaptableId in Adaptable Options |
| FloatingPosition | AdaptableCoordinate | Position of Dashboard when in Floating mode | |
| IsCollapsed | boolean | Is Dashboard collapsed; if true, header is visible (but not Tabs' contents) | false |
| IsFloating | boolean | Is Dashboard floating; if true, appears in draggable, minmised form (double-click to revert to default position) | false |
| IsHidden | boolean | Whether Dashboard is completely hidden - can be made visible again in Column Menu and Tool Panel | false |
| ModuleButtons | AdaptableModuleButtons | Buttons which open the Settings Panel screen for associated AdapTable Module | ['SettingsPanel'] |
| PinnedToolbars | AdaptableDashboardToolbars | string[] | Toolbars displayed above Grid (and not in Tab) | |
| Tabs | DashboardTab[] | Named group of Toolbars | Empty Array |
Dasboard Options
The Dashboard Options section contains some Dashboard configuration properties:
| Property | Type | Description | Default |
|---|---|---|---|
| buttonsLocation | DashboardButtonsLocation | Where in Dashboard to display Module and Custom Buttons | 'right' |
| canFloat | boolean | Whether the Dashboard can be floated; if true (the default), double-clicking Dashboard puts it in float mode | true |
| customDashboardButtons | AdaptableButton<DashboardButtonContext>[] | Custom Adaptable Buttons to appear in Dashboard | |
| customToolbars | CustomToolbar[] | Toolbars provided by Users which contain custom content | |
| showQuickSearchInHeader | boolean | Shows Quick Search input in Dashboard Header | true |
Dashboard API
The Dashboard API section provides access to all elements and configuration options in the Dashboard:
| Method | Returns | Description |
|---|---|---|
| collapseDashboard() | void | Collapses Dashboard so only Dashboard Header is visible (and not Toolbars' contents) |
| dockDashboard() | void | Docks Dashboard so it 'snaps back' into its customary position above the grid |
| expandDashboard() | void | Expands Dashboard so Toolbars in Active Tab are fully visible |
| floatDashboard() | void | Floats Dashboard so only Dashboard Header is visible (in reduced size); can be dragged to a new location |
| getActiveTab() | DashboardTab | undefined | Returns current Active Tab (if there is one) |
| getActiveTabIndex() | number | undefined | Returns current Active Tab index (if there is one) |
| getCurrentToolbars() | AdaptableDashboardToolbars | string[] | Retrieves all Toolbars in Active Tab |
| getCustomDashboardButtonByLabel(buttonLabel) | AdaptableButton<DashboardButtonContext> | undefined | Retrieves first Custom Button with given Label |
| getCustomDashboardButtons() | AdaptableButton<DashboardButtonContext>[] | Retrieves all Custom Buttons |
| getCustomToolbarByName(customToolbarName) | CustomToolbar | Returns Custom Toolbar with the given name |
| getCustomToolbarHTMLElement(customToolbarName) | HTMLElement | null | Returns the HTML Element for the given Custom Toolbar. This should only be used in Vanilla AdapTable for toolbars created via a render function. |
| getCustomToolbars() | CustomToolbar[] | Retrieves all Custom Toolbars |
| getDashboardState() | DashboardState | Retrieves Dashboard section from Adaptable State |
| getModuleButtons() | AdaptableModuleButtons | Retrieves the Module Buttons in the Dashboard |
| getPinnedToolbars() | AdaptableDashboardToolbars | string[] | Retrieves pinned toolbars |
| getTabByName(tabName) | DashboardTab | Retrieves the Tab from State that matches inputted name |
| getTabs() | DashboardTab[] | Retrieves the Tabs in the Dashboard |
| hideDashboard() | void | Hides the Dashboard so cannot be seen |
| isDashboardCollapsed() | boolean | Is Dashboard Collapsed |
| isDashboardDocked() | boolean | Is Dashboard Docked |
| isDashboardExpanded() | boolean | Is Dashboard Expanded |
| isDashboardFloating() | boolean | Is Dashboard Floating |
| isDashboardHidden() | boolean | Is Dashboard Hidden |
| isDashboardVisible() | boolean | Is Dashboard Visible |
| isToolbarVisible(toolbar) | boolean | Checks if a given Toolbar is visible |
| openDashboardSettingsPanel() | void | Opens Settings Panel with Dashboard section selected and visible |
| refreshDashboard() | void | Refreshes entire Dashboard, including Toolbars and Buttons; particularly relevant for AdapTable built-in elements, as framework components are dependent on the framework specific change detection mechanisms |
| resetCustomToolbarFormData(customToolbarName) | void | Resets the data of a Custom Toolbar's toolbarForm back to the defaultValues declared on its fields - clearing any user input without unmounting / re-mounting the toolbar. |
| setActiveTab(tabName) | void | Sets Active Tab in Dashboard |
| setActiveTabIndex(tabIndex) | void | Sets Active Tab in Dashboard |
| setCustomToolbarHTMLContent(customToolbarName, htmlContent) | void | Renders the given HTML string in the given Custom Toolbar. This should only be used in Vanilla AdapTable for toolbars created via a render function! |
| setDashboardTitle(title) | void | Sets title of Dashboard Header |
| setModuleButtons(moduleButtons) | void | Sets which Module Buttons are visible |
| setPinnedToolbars(toolbars) | void | Sets pinned toolbars |
| setTabs(Tabs) | void | Updates the Tabs in the Dashboard |
| showDashboard() | void | Makes the Dashboard visible |
AdapTable Events
There are 2 Adaptable Events which are fired by AdapTable related to the Dashboard:
Dashboard Changed Event
The Dashboard Changed Event fires when anything has changed in the Dashboard.
The DashboardChangedInfo object which is provided, includes the trigger for the Change and new and old versions of Dashboard State.
| Property | Description |
|---|---|
| actionName | What caused Dashboard State to change |
| newDashboardState | Current Dashboard State |
| oldDashboardState | Previous Dashboard State |
| isToolbarStateChangedToHidden(toolbarName) | Check if given Toolbar was just changed to hidden state |
| isToolbarStateChangedToVisible(toolbarName) | Check if given Toolbar was just changed to visible state |
Custom Toolbar Configured Event
The Custom Toolbar Configured Event fires when the Configure button has been clicked in a Custom Toolbar.
The CustomToolbarConfiguredInfo simply provides the particular Custom Toolbar where the button was clicked:
| Property | Type | Description |
|---|---|---|
| customToolbar | CustomToolbar | Custom Toolbar in which the 'Configure' button has been clicked |
| adaptableContext | any | Custom application Context provided in AdaptableOptions.adaptableContext |
Events Subscription
Subscribing to the Events is done the same as with all Adaptable Events:
api.eventApi.on('DashboardChanged', (eventInfo: DashboardChangedInfo) => {
});
api.eventApi.on('CustomToolbarConfigured', (eventInfo: CustomToolbarConfiguredInfo) => {
});