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
Everything in the Dashboard is highly customisable either at design-time through Dashboard Predefined Config or at run-time through the UI
The Dashboard contains the following elements:
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.
The Functions Menu can be hidden via the ShowFunctionsDropdown property of Dashboard State.
Tabs and Toolbars
Tabs are named collections of Toolbars either Function Toolbars or Custom created ones (see below).
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:
- Bulk Update
- Cell Summary
- Data Source
- Quick Search
- Smart Edit
- System Status
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.
This list can be set via the CustomButtons property of Dashboard State.
A group of 'shortcut' buttons which each open the popup associated with that Function.
This list can be set via the VisibleButtons property of Dashboard State.
A simple text search across all visible columns (using the Quick Search Function)
This can be hidden via the ShowQuickSearchInHeader property of Dashboard State.
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:
Each Custom Toolbar contains 2 div elements - one for each method of provding content
- Supply a list of Toolbar Buttons that users provide via the ToolbarButtons property
- Provide bespoke content which users will render on demand (when more than buttons are required)
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).
If you require just to display a few buttons in the Custom Toolbar then use this option
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.
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.
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).
This example uses React but Angular or any Framework can be used.
See Angular Demo App for an example of how to do this.
There are 3 visibility modes for the Dashboard:
This displays the Dashboard Header and also all the contents of the Toolbars in the currently selected Tab.
This is the default option for the Dashboard
There are 2 alternative ways of displaying the Toolbars in Expanded View:
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.
The Dashboard Header collapses to become the first Toolbar, and a dropdown displays a list of available Tabs.
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
See the Dashboard Inline Demo.
This shows just the Dashboard Header with the name of the instance and any buttons but no Toolbars.
To collapse / expand the Dashboard click on a Dashboard tab.
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).
Floating is only available if the CanFloat property is set to true in Predefined Config (the default value)
To float / dock the Dashboard double-click the Name in the Dashboard Header
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
There are 4 events which are fired by the Dashboard to cater for different scenarios:
|ToolbarVisibilityChanged||A toolbar comes in or out of view (useful for rendering Custom toolbars)|
|ToolbarButtonClicked||A button is clicked inside a Custom Toolbar|
|DashboardButtonClicked||A Custom Button is clicked in the Dashboard|
|CustomToolbarConfigured||The 'configure' button is clicked in a Custom Toolbar|
Managing the Dashboard
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
Dashboard has the following Entitlement Rules:
Full: Everything in the Dashboard is visible to the User
Hidden: The Dashboard is completely hidden
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.