| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Customizable dashboards Dashboards are flexible workspaces that allow workspaces which include multiple standalone interfaces contained within individual Widgets.
Dashboards may be static or customisable by the user.
...
Types
Type | Usage | Example |
|---|---|---|
Static dashboard | The layout is fixed. The user may not add, remove, or rearrange widgets. | |
Customisable dashboard | Allows the user to choose what is shown and how it is displayed by managing individual |
...
widgets. |
...
Structure
A customisable dashboard consists of:
the dashboard container
individual Widgets
Should we include information on a header area? For example, on a stats dashboard the header area may contain a date/time selector which affects all widgets.
A customisable dashboard also includes:
a menu for adding new widgets
Placement and Positioning
The widget dashboard is Dashboards are placed within the Main Workspace of the page layout. It They may fill the entire workspace or a part of the workspace.
Default state
By default, the a customisable dashboard may either be:
empty, or
include a set of pre-defined widgets. The user may optionally choose between a set of default templates.
Content
...
General layout
The dashboard should have a light grey background, to emphasise the separation between widgets.
The spacing between each widget will be consistent and static across the dashboard.
Static dashboard layout
The dashboard may be separated into as many rows and columns as appropriate, depending on the space needed by each widget.
Are there any other distinct rules for static dashboards?
Customisable dashboard layout
Width
The widget dashboard should use a consistent grid of 12 columns.
Widgets can be displayed in the sizes below. (Not all sizes must be offered for every dashboard).
XXS : 1/6 width (2 columns) (half height)
XS : 1/4 width (3 columns)
S : 1/3 width (4 columns)
M : 1/2 width (6 columns)
L : 2/3 width (8 columns)
XL : 3/4 width (9 columns)
XXL : full width (12 columns)
Sizes are optional; a dashboard may offer only a subset of these options.
...
Height
All rows should be the same fixed height.
Two half-height widgets may be stacked on top of one another within a single row.
The height of full-width widgets may respond to the widget content, or (optionally) be adjusted by the user.
or
All widgets on the same row should be the same height.
The height of each row may be adjusted by:
using drag-and-drop (Optional), or
automatically responding to the widget content. All widgets will adjust to the same height as the tallest widget. (Optional).
Columns
Additional columns (up to 2?) may be added to the dashboard for full-height widgets only.
Order or columns may be changed by the user. (← → controls?)
These columns have an independent vertical scroll, i.e. do not scroll with the main dashboard.
Examples
https://documentation.sisense.com/docs/customizing-the-dashboard-layout
...
Spacing
The spacing between each widget will be consistent and static across the dashboard.
...
Internal logic
Is there any logic for static dashboards?
Customisable dashboard logic
Dashboard layouts, including the size and location of each widget, will persist per user/group on future sessions.
Widget ordering
Widgets will have a defined order, from left to right, top row to bottom row.
Stacked half-height widgets will be ordered with the top widget first.
The widgets should remain in the same order when changes are made to the dashboard, such as adding a new widget or resizing the dashboard.
Where widgets no longer fit onto the same row, they will wrap onto a new row underneath. This may happen when:
the width of a widget in the row is changed.
a new widget is added to an existing row.
the size of the dashboard is changed.
Widget order | When a new widget is added |
|---|---|
 |  |
Interaction
...
Each widget may include an option to show the content in a larger space such as a Popup or separate page.
The entire dashboard area may have a master vertical scroll, if there are more widget rows than can be shown. The dashboard will not have a horizontal scroll.
Where possible, static dashboards should not have a vertical scroll.
Customisable dashboard interactions
Creating the dashboard
New widgets will be added:
from a menu, in which case it can optionally be added as the first or last widget, and
(optionally) using Drag and Drop, in which case the widget will be added to the chosen position on the dashboard.
A set of default dashboards, populated with useful widgets, may be offered for easy set up.
The user will be able to change the order of the widgets using controls and/or drag-and-drop.
...
Create dummy visual
Widget sizing
The size of each individual widget can be set both before and after it is added to the dashboard.
Each widget will have a default size, depending on its content.
Particular sizes may be prohibited for individual widget types. For example, it may not be appropriate to create an XS widget containing a large chart or table.
Transitions
Customisable dashboard transitions
A transition effect should be used when moving widgets using drag and drop.
Should there be a transition effect on the whole dashboard when a new widget is added?
Best practices
Use:
where a workspace has multiple unique interfaces contained within Widgets.
customisable dashboards for flexible workspaces which can be entirely managed by the user.
...
scroll within widgets, where possible. Instead:
limit the size choices make sure the sizing is appropriate for widgets which contain a lot of data.
limit the content shown, and include an option to show the full content in a larger space such as a Popup or separate page.
.
anything other than Widgets within the dashboarddashboards.
a dashboard for static layouts where the sections are not standalone interfaces → use Workspace Sections instead.
expand/collapse for customisable dashboard widgets.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).
For more information, including recommended breakpoints, see the general /wiki/spaces/UserExp/pages/1893074841.
Guidelines
As the width of the dashboard changes, so will the widths of the individual widgets. Each one should continue to take up the same proportion of the available width, according to the 12 column grid.
The widget heights will not respond relative to widget width as the dashboard is narrowed.
The dashboard should have additional breakpoints, for example:
a minimum-width breakpoint, below which all widgets will be shown at full width, regardless of their selected original size.
additional breakpoints where the proportion of the dashboard width that each widget size uses should automatically increase. This may result in additional rows, and vertical scroll.
For example, in a customisable dashboard, S widgets may each increase to 1/2 width (6 columns) at a certain point.
The originally-selected spacing between widgets may also be reduced at each breakpoint.
The original sizes for widgets should always be retained, so the original layout can be restored if the dashboard width is increased above a breakpoint again.The spacing between widgets may also be reduced at each breakpoint.
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You >> | <<Screen with 200 width>> |
Code
...