Description

A widget is a self-contained entity that is designed to work within a workspace.container element which holds a distinct set of content. They are used to organise elements into Layouts and Dashboards within the main workspace.

Image Added	Image Added
Image Added	Image Modified

Usage & Behavior

General guidelines

Structure

A Each widget consists of:

• Headera header, which includes:

  • Widget nameeither:

    • a widget title, with or without additional information

    . In some cases, this may be replaced by Tabs. See Internal Logic below.Widget

    • , or

    • Tabs (see below).

  • widget controls (optional), including Icon Buttons and /or an Action Menu.

• Content area.

Widget controls

• Includes only actions that are related to the widget (such as expand/collapse, maximize, delete, configure, etc.).

  • (see below).

  • a collapse/expand icon to the left of the title (optional - not to be used within customisable dashboards).

• 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.

Image Added

Image Added

Widget controls

• Only controls that relate to the widget 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).

...

Image Added

Image Added

Placement and Positioning

A widget can be placed anywhere on a page.

...

Content

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.

...

within 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

Image Removed

Image Added

Hover (only when draggable)

Image Removed

Hover- Draggable

Image Removed

A frame will be added as a visual indication for draggability

Active (relevant for draggable widgets only, while being dragged)

Image Removed

Disabled

TBD - graphic design

Error

-

Focused

-

Focused, Hover

-

Focused, Active

-

Focused, Disabled

-

Interaction

• (optional) Expand or collapse of a widget can be done by clicking a button in the action buttons area.
  The widget will be collapsed and expanded using an animation.
  

  Image Removed

Image Added
Active (only when draggable)	Image Added
Focused	Image Added

Edge Cases

State	Image
Empty state	Image Added
Loading…	Image Added
Loading error	Image Added

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
Image Added	Image Added

Drag and drop (customisable dashboards only)

• Hovering over the widget will

  change

  switch the widget to the hover

  -draggable

  state.

• Hovering over the header area (including the handle) will change the mouse cursor to a dragging state.

• The user can

  click-and-hold to

  drag the widget to a new location.

  (

See Dashboards and Drag and Drop for more information

...

.

...

...

A drag handle may also be presented on hover:

...

• (optional) Resize. Hovering over the boundaries of the widget can allow the user to resize it horizontally, vertically, or diagonally.

  • On hover:

    • The mouse cursor will change to drag horizontally, vertically, or diagonally.

    • The boundary line will be visually presented as resizable.

    • The hover and resize area should be at list 6 pixels wide.

  • Click-and-hold while changing the mouse location will resize the widget.

    Image Removed

Validations and errors

The content of the widget may have an empty state and a loading state.

See relevant pages for more info.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.

• When there are errors in the content area of a collapsed widget, an indicator will appear next to the widget title.

...

Transitions

Expand and collapse will be animated.

Best practices

Use:

• In dashboardsfor all content containers within the main workspace.

• When the entity should be configurable in size and locationin dashboards.

Don’t use:

• scroll within widgets, where possible. Instead:When

  • make sure the

  entity is not self-contained, and doesn’t stand on its own.As a single widget in a

  • 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 a long description text that will not be fully presented in various responsive states.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

• 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:

  • use Tooltips for parts which cannot be fully displayed, e.g. truncated headers and data labels.

  • reduce the amount of content shown, and include an option to show the full content in a larger space such as a Popup or separate page.

See Layout workspaces or Dashboards for guidance on the responsive behavior of widgets relative to one another.

Design

Code

...

• On dashboards, widgets will be placed on a grey background:

...

https://zpl.io/blr1x0v

Image Added

Code

...