Dashboard

The Dashboard - usually placed above the Grid - is designed to provide quick access to commonly required AdapTable functionalty.

It contains buttons, tabs, toolbars and Quick Search and more and isfully configurable both at design-time (through Predefined Config) and at run-time through config screens.

It comprises 2 sections:

  • Dashboard Header: contains the Home Dropdown, Function Buttons and Quick Search
  • Dashboard Tabs: named groups of Toolbars
important

Everything in the Dashboard is highly customisable either at design-time through Dashboard Predefined Config or at run-time through the UI

tip

As well as those provided by AdapTable you can create Custom Toolbars and Custom Buttons

Contents

The Dashboard contains the following elements:

Functions Menu

A dropdown on the left hand side of the Dashboard Header that shows a list of all AdapTable Functions to which the user is has an Entitlement. Clicking a menu entry will open the popup associated with that Function.

tip

The Functions Menu can be hidden via the ShowFunctionsDropdown property of Dashboard State.

const demoConfig: PredefinedConfig = {
Dashboard: {
ShowFunctionsDropdown: false,
}
};

Tabs and Toolbars

Tabs are named collections of Toolbars either Function Toolbars or Custom created ones (see below).

note

If no Tabs are present in Predefined Config, AdapTable will create a default one called 'Toolbars'.

This will contain the Query, Layout, Export & Filter Toolbars (assuming the user's Entitlements allow).

Function Toolbars are essentially collections of controls which provide easy and quick access a single Function (e.g. the 'Export' Toolbar contains a dropdown showing all Reports together with buttons to add / edit / delete them).

AdapTable currently provides these Function Toolbars:

const demoConfig: PredefinedConfig = {
Dashboard: {
Tabs: [
{
Name: 'Search',
Toolbars: ['QuickSearch', 'DataSource', 'Query'],
},
{
Name: 'Edit',
Toolbars: ['BulkUpdate','SmartEdit'],
},
{
Name: 'Grid',
Toolbars: ['Layout', 'CellSummary', 'SystemStatus']
},
],
}
};

Custom Buttons

A group of buttons of type ToolbarButton which will appear in the Dashboard Header.

When a Custom button is clicked, AdapTable will fire the DashboardButtonClicked Event providing details of the button in question.

note

This list can be set via the CustomButtons property of Dashboard State.

const demoConfig: PredefinedConfig = {
CustomButtons: [
{
Name: 'ChangeView',
Caption: 'Click to toggle the View ',
ButtonStyle: {
Variant: 'raised',
one: 'info',
},
},
{
Name: 'clear',
Caption: 'Clear',
Icon: {
height: 20,
src: '../../thumbusup.png',
},
}
],
};
adaptableApi.eventApi.on(
'DashboardButtonClicked',
(dashboardButtonClickedEventArgs: DashboardButtonClickedEventArgs) => {
const dashboardButtonClickedInfo: DashboardButtonClickedInfo = dashboardButtonClickedEventArgs.data[0].id;
// do stuff
}
);

Function Buttons

A group of 'shortcut' buttons which each open the popup associated with that Function.

note

This list can be set via the VisibleButtons property of Dashboard State.

const demoConfig: PredefinedConfig = {
Dashboard: {
VisibleButtons: ['BulkUpdate', 'CellValidation', 'ConditionalStyle', 'PercentBar'],
}
};

Quick Search

A simple text search across all visible columns (using the Quick Search Function)

tip

This can be hidden via the ShowQuickSearchInHeader property of Dashboard State.

const demoConfig: PredefinedConfig = {
Dashboard: {
ShowQuickSearchInHeader: false,
}
};

Custom Toolbars

In addition to the Toolbars shipped by AdapTable, users can create their own Custom Toolbars at Design-Time.

Once created, they are treated as full toolbars and can be placed in any Tab as required.

Custom Toolbars have a few optional properties of interest:

  • Title - if provided this is displayed at the bottom of the Toolbar

  • ShowConfigureButton - if true, then a Configure button is displayd in the toolbar which, when clicked, will trigger the CustomToolbarConfigured Event.

There are 2 ways to provide content to a Custom Toolbar:

rmation

Each Custom Toolbar contains 2 div elements - one for each method of provding content

  1. Supply a list of Toolbar Buttons that users provide via the ToolbarButtons property
  2. Provide bespoke content which users will render on demand (when more than buttons are required)
    tip

    Typically you will listen to the ToolbarVisibilityChanged and then render your content as required.

Providing Toolbar Buttons

In this option, simply provide a list of buttons that should be displayed, and AdapTable will automatically render them (in the order they are provided).

tip

If you require just to display a few buttons in the Custom Toolbar then use this option

note

A Toolbar Button has a mandatory Name property, and optional Caption, ButtonStyle and Icon properties.

When a Toolbar Button is clicked the ToolbarButtonClicked Event will fire providing details of the button clicked so you can react as necessary.

Custom Toolbar Buttons Example

In this example we provide 2 Toolbars; the 1st contains 2 Toolbar Buttons (each with an Icon) and the 2nd contains 1 Toolbar Button.

export default {
Dashboard: {
CustomToolbars: [
{
Name: 'Toolbar1',
Title: 'First Toolbar',
ShowConfigureButton: true,
ToolbarButtons: [
{
Name: 'btnSuccess',
Caption: 'Congrats',
ButtonStyle: {
Variant: 'text',
Tone: 'success',
},
Icon: {
height: 20,
src: '../../thumbusup.png',
},
},
{
Name: 'btnRefresh',
Caption: 'Refresh Grid',
ButtonStyle: {
Variant: 'raised',
Tone: 'accent',
},
Icon: {
height: 20,
src: '../../refresh.png',
},
},
],
},
{
Name: 'Toolbar2',
Title: 'Second Toolbar',
ToolbarButtons: [
{
Name: 'btnWarning',
Caption: 'Be Careful',
ButtonStyle: {
Variant: 'text',
Tone: 'error',
},
},
],
},
],
},
} as PredefinedConfig;
adaptableApi.eventApi.on('ToolbarButtonClicked', toolbarButtonClickedEventArgs) => {
const eventInfo: ToolbarButtonClickedInfo = toolbarButtonClickedEventArgs.data[0].id;
const toolbarButton = eventInfo.toolbarButton;
// respond as appropriate depending on which button was clicked
});

Rendering Bespoke Content

If you require to display more than just a few buttons in the Custom Toolbar, there is an alternative which allows you to provide full custom rendering.

When a Toolbar's visibility changes, AdapTable will fire the ToolbarVisibilityChanged Event which provides the name of relevant toolbar (and the Tab in which it is contained) and its visibility status.

tip

AdapTable provides the dashboardApi getCustomToolbarContentsDiv method that returns the Div in which you should render the contents.

Custom Toolbar Rendering Example

We listen to the ToolbarVisibilityChanged Event and if the 'myToolbar' becomes visible then we render the content in the 'CustomToolbarContents' div (using React).

note

This example uses React but Angular or any Framework can be used.

See Angular Demo App for an example of how to do this.

adaptableApi.eventApi.on('ToolbarVisibilityChanged', toolbarVisibilityChangedEventArgs => {
const toolbarVisibilityChangedInfo: ToolbarVisibilityChangedInfo =
toolbarVisibilityChangedEventArgs.data[0].id;
if (
toolbarVisibilityChangedInfo.toolbar === 'myToolbar' &&
toolbarVisibilityChangedInfo.visibility === 'Visible'
) {
const toolbarContents: any = (
<div style={{ display: 'flex' }}>
<button
className="ab-SimpleButton ab-SimpleButton--variant-outlined"
onClick={onNewTradeClicked}
style={{ marginRight: '3px' }}
>
Create New Trade
</button>
<select className="ab-Dropdown" style={{ marginRight: '3px' }}>
<option>Book 1</option>
<option>Book 2</option>
<option>Book 3</option>
</select>
</div>
);
ReactDOM.render(
toolbarContents,
adaptableApi.dashboardApi.getCustomToolbarContentsDiv('myToolbar')
);
}
});
function onNewTradeClicked() {
// do what is required when button is clicked...
}

Visiblity Modes

There are 3 visibility modes for the Dashboard:

Expanded View

This displays the Dashboard Header and also all the contents of the Toolbars in the currently selected Tab.

note

This is the default option for the Dashboard

There are 2 alternative ways of displaying the Toolbars in Expanded View:

Default Mode

Tab names are shown in a line across the Dashboard Header which appears horizontally across the top.

Clicking on each Tab will display the associated toolbars.

const demoConfig: PredefinedConfig = {
Dashboard: {
IsInline: false
}
};

Inline Mode

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

tip

If there is only one Tab then the dropdown will not be displayed; this is a useful way just to show Toolbars without the User seeing the Tab

const demoConfig: PredefinedConfig = {
Dashboard: {
IsInline: true,
}
};

See the Dashboard Inline Demo.

Collapsed View

This shows just the Dashboard Header with the name of the instance and any buttons but no Toolbars.

tip

To collapse / expand the Dashboard click on a Dashboard tab.

const demoConfig: PredefinedConfig = {
Dashboard: {
IsCollapsed: true
}
};

Floating View

This shows just the Dashboard name in reduced width and it can be dragged to any position by clicking on the Name (the mouse will change to a cross).

note

Floating is only available if the CanFloat property is set to true in Predefined Config (the default value)

const demoConfig: PredefinedConfig = {
Dashboard: {
CanFloat: true,
IsFloating: true,
}
};
tip

To float / dock the Dashboard double-click the Name in the Dashboard Header

Predefined Config

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

export default {
Dashboard: {
IsInline: true,
VisibleButtons: ['GridInfo', 'SystemStatus', 'CellValidation', 'PercentBar'],
CustomToolbars: [
{
Name: 'appToolbar',
Title: 'Trades',
},
],
Tabs: [
{
Name: 'Search',
Toolbars: ['QuickSearch', 'DataSource', 'Query'],
},
{
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;

Events

There are 4 events which are fired by the Dashboard to cater for different scenarios:

EventWhen Fired
ToolbarVisibilityChangedA toolbar comes in or out of view (useful for rendering Custom toolbars)
ToolbarButtonClickedA button is clicked inside a Custom Toolbar
DashboardButtonClickedA Custom Button is clicked in the Dashboard
CustomToolbarConfiguredThe 'configure' button is clicked in a Custom Toolbar

Managing the Dashboard

To Do

  • Popup - Enables the creation and editing of Tabs and Toolbars and the management of Function Buttons.

  • Tool Panel - Facilitates changing the Dashboard Visibility Mode

  • Column Menu - Facilitates changing the Dashboard Visibility Mode

Entitlements

Dashboard has the following Entitlement Rules:

  • Full: Everything in the Dashboard is visible to the User

  • Hidden: The Dashboard is completely hidden

  • ReadOnly: N/A

FAQ

Is there a limit to the amount of Function buttons that I can show?

No, you can choose to show as many as you want?

Can I hide the Home dropdown?

Yes, via the ShowFunctionsDropdown property of Dashboard State

Can I add my own content to the Dashboard?

Yes, Dashboard state includes the 'Custom Toolbars' collection precisely for this purpose.

Why do I see a tab called 'Toolbars'?

This is added automatically by AdapTable when you first upgrade to v6.1 (released March 2020). It creates a new Tab which contains the default set of Toolbars.

This Tab can be later replaced either in the UI, or in Predefined Config by setting a Revision Number.

Is there a way to see just the Toolbars without creating a Tab?

Not in the standard Expanded mode. However if you set the Inline Mode and you only have one Tab, the Tab selector dropdown will be hidden.

Further Information