...
...
...
...
...
...
...
...
...
...
...
...
| Table of Contents |
|---|
Description
A widget dashboard is a flexible workspace which allows the user to choose what is shown by managing individual Widgets.
...
The widget dashboard is placed within the Main Workspace of the page layout. It may fill the entire workspace, or one section of the workspace.
Types
Are there any distinct dashboard types?
Layout
Width
The widget dashboard should use a consistent grid of 12 horizontal divisions.
Widgets can be displayed in the sizes below. These are optional: not all sizes need to be offered.
XXS : 1/6 width, 2 divisions
XS : 1/4 width, 3 divisions
S : 1/3 width, 4 divisions
M : 1/2 width, 6 divisions
L : 2/3 width, 8 divisions
XL : 3/4 width, 9 divisions
XXL : full width, 12 divisions
...
All widgets within the same row 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.
...
New widgets may be added either:
from a menu, in which case it can optionally be added as the first or last widget, or
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.
ADD DESIGN IMAGE
Widget sizes
The user should be able to set the size for each individual widget 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.
...
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. Where widgets no longer fit onto the same row, they will wrap onto a new row underneath. This may happen when:
the size of a widget in the row is changed.
a new widget is added to an existing row.
the size of the dashboard is changed.
The user will be able to change the order of the widgets using controls and/or drag-and-drop.
Internal logic
Dashboard layouts, including the size and location of each widget, will persist per user on future sessions.
Interaction
Drag and drop (optional):
Hovering over the widget will switch the widget to the hover state.
Hovering over the header area (including the handle) will change the mouse cursor to a dragging state.
The user can drag the widget to a new location. (See Drag and Drop for more information).
...
Best practices
Use:
for flexible workspaces which can be entirely managed by the user.
Don’t use:
expand/collapse with for dashboard widgets.
anything other than Widgets within the dashboard.
for a static layout layouts → use Workspace Sections instead.
...