Description

A widget is a self-contained entity that is designed to work within a certain 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 Added

Usage & Behavior

General guidelines

Structure

1. Header:

   1. Widget name with/out additional information

   2. Actions

2. Content area

Placement and Positioning

• A widget can be placed anywhere in a page.
  Its location in comparison to other widgets will determine the possible expansion directions (when relevant).

• In dashboards, the widgets should be visually distinct from one another and from other elements on screen. The background of such spaces should support that, for example:
  

  Image Removed

Content

...

Widget name is aligned left.

...

Each widget consists of:

• a header, which includes:

  • either:

    • a widget title, with or without additional information, or

    • Tabs (see below).

  • widget controls (optional), including Icon Buttons and an Action Menu (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. It should be short and informative. Avoid presenting a long description that will not be presented to its full under various responsive states. When

• Where space is constrained, the widget name and the additional information will be truncated. The In this case, the full information (both name + infoand additional information) will be presented in tooltipa Tooltip on hover.

  Action buttons:

  Includes only actions that are widget-related and NOT content-related (e.g. expand/collapse widget, maximize widget, delete widget, configure widget, etc.).

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

  only

  .

• Actions are presented in hover

• Up to 3 action buttons may be presented. The actions may include (1)

  All widget controls (except for expand/collapse) are aligned to the right of the header area, and may include up to 3 elements, including:

  Tabbed Widget: multiple

  • Icon Buttons, usually being used for primary actions (2) .

  • an Action Menu, usually being used for secondary actions.
    All actions Where there are no primary actions, all widget controls may be presented in the actions one action menu (without any icon buttons), especially when there are no primary actions:

    Image Removed

Internal Logic

• • .

Tabbed Widgets

• Different content types can be gathered under a single widget , using tabs Tabs.

  Image Removed

  The

  In this case:

  • tabs replace the widget header title and the any additional informationThe action button .

  • any widget controls refer to the widget as a hole (all 3 tabs together)

  Configuration: widget configurations, such as location change or resizing, should be saved per user for future sessions

  • whole (and not to each tab individually).

Image Added

Image Added

Placement and Positioning

A widget can be placed anywhere 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

...

Hover over the widget will change the widget to ‘hover-draggable’ state.

...

State	Image
Regular

Image Removed

Image Added

Hover

Image Removed

Hover- Draggable

Image RemovedA frame will be added as a visual indication for draggability

(only when draggable)	Image Added
Active (

relevant for draggable widgets only, while being dragged

only when draggable)

Image Removed

Image Added

Disabled

TBD - graphic design

Error

-

Focused

-

Focused Hover

-

Focused Active

-

Focused Disabled

-

Interaction

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

  Image Removed

(optional) drag:

...

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

  click-and-hold to

  drag the widget to a new location

  (see

  .

See Dashboards and Drag and Drop for more

...

A drag handle may also be presented in hover:

...

• (optional) resize: hovering over the boundaries of the widget will allow to resize it horizontally/ vertically/ diagonally.

  Image Removed

  • In hover:

    • The mouse cursor will change to drag horizontally/vertically/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.

Validations and errors

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

See relevant pages for more info.

Transitions

Expand collapse will be in animationinformation.

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 dashboards

• When the entity should be configurable in size and locationfor all content containers within the main workspace.

• in dashboards.

Don’t use:

• When the entity is not self-contained and doesn’t stand by it’s own

• As a single widget in a page

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

Accessibility compliance

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

...

https://zpl.io/blr1x0v

Image Added

Code

...