...
A widget is a container element designed to work within a which holds a distinct set of content. They are used to organise elements into Layouts and Dashboards within the main workspace.
 |  |
 |  |
Usage & Behavior
General guidelines
Structure
A Each widget consists of:
Headera header, which includes:
Widget either:
a widget title, with or without additional information
, or
Tabs (see below).
Widget widget controls (optional), including Icon Buttons and /or an Action Menu (see below).
A a collapse/expand icon to the left of the title (optional - not to be used within customisable dashboards).
Content the content area.
Widget Title
The widget name will be aligned to the left.
Additional information (if exists) will be aligned to the widget name, separated by a line separator.
Where space is constrained, the widget name and the additional information will be truncated. In this case, the full information (both name and additional information) will be presented in a Tooltip on hover.
 | |
Widget controls
Includes only actions that are related Only controls that relate to the widget (such as expand/collapse, maximize, delete, configure, etc.). itself may appear in the header area. These include:
maximize, such as into a Popup or separate page.
expand/collapse (not to be used within customisable dashboards).
add, remove, and resize (only in customisable dashboards).
configuration.
Content-related actions will be presented in a toolbar within the content area.
The action area should All widget controls (except for expand/collapse) are aligned to the right of the header area, and may include up to 3 elements, including:
Icon Buttons, usually used for primary actions.
an Action Menu, usually used for secondary actions. Where there are no primary actions, all actions widget controls may be presented in the actions one action menu (without any icon buttons).
...
Different content types can be gathered under a single widget , using Tabs. In this case:
The tabs replaces replace the widget title ( and the any additional information, if exists).
The action buttons any widget controls refer to the widget as a whole (and not to each tab individually).
...
A widget can be placed anywhere on a page.
Internal Logic
Widget layout configurations, such as size and location, will persist per user on future sessionswithin the main workspace.
For standard pages, see Layouts for guidance on how to arrange widgets within the workspace.
For data overview pages, see Dashboards.
States
State | Image |
|---|---|
Regular |  |
Hover (only when draggable) |  |
Active (only when draggable) |  |
Focused |  |
...
State | Image |
|---|---|
Empty state |  |
Loading… |  |
Loading error |  |
Interaction
Expand/Collapse
Clicking the expand/collapse
...
icon
...
will show or hide the widget content using an animation. In this case the workspace layout may be changed.
Note: expand/collapse may not be used for widgets within a customisable Dashboard.
Expanded | Collapsed |
|---|---|
|  |
Drag and drop (
...
customisable dashboards only)
...
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 Dashboards and Drag and Drop for more information
...
.
Note: widgets not within a customisable dashboard cannot be moved.
...
Maximize
Widgets may include a maximize option to show the content in a larger space, such as a Popup or separate page.
Validations and errors
Widgets has no special validations.
In case When there are errors in the content area and the widget is collapsed of a collapsed widget, an indicator will appear next to the widget title:.
...
Transitions
Expand and collapse will be animated.
Best practices
Use:
As a container within a for all content containers within the main workspace.
In dashboardsin dashboards.
Don’t use:
scroll within widgets, where possible. Instead:
make sure the allocated space 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.
General
Widget title and additional information should be short and informative. Avoid presenting long text that will not be fully presented in various responsive states.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
On dashboards, widgets will be placed on a grey background:
...
.
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).
The layout of the content within each widget should fluidly respond to its width. This may include changing text, graphics, table, and spacing sizes.
Where possible, avoid using internal scroll within widgets, either vertical or horizontal.
Where widget size is limited:
See Layout workspaces or Dashboards for guidance on the responsive behavior of widgets relative to one another.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...