Widgets

This page introduces the different widget types available.

Adding Widgets

Several types of widgets can be added to the project Wiki page by clicking on the (Add Widget) icon:

After clicking on the desired widget, the widget editor overlay is opened where the widgets can be customized. To finalize a widget and have it displayed on the Dashboard, click [Save].

Widget Types

Report Visualization

Report Visualization Widgets show the actual result of the reports.

Supported chart types:

• Pie
• Area
• Bar (simple, multi and stacked)
• Table
• Gauge
• Speedometer

The Report Visualization Widgets have a common Editor format:

Some fields are not shown for the different chart types.

The most important fields of the Editor:

Field Name	Features
Data Source	The chart visualizes the result of this source report. Some chart types have special requirements regarding the data source. For example, for a Multi Bar Chart only Reports that are grouped by at least two fields can be used. Reports that cannot be used for the selected chart type are disabled in the list. Hints under the fields inform the user about the exact reason.
Grouping Field	The Report Visualization Widgets accept only grouped Reports as data sources. In this field, the grouping field to be used on the visualization can be selected.
Aggregation Function	If the report is aggregated by multiple functions (sum, avg, etc.), the aggregated value to be shown on the visualization can be selected in this field.
Display unit	High values can be rounded to hundreds, thousands, millions or billions to make the chart more straightforward.
Ordering	Defines in which order the values are shown on the chart. The ordering can be changed on both axes: When ordering by Group name, the labels on the horizontal axis are in their natural order. When ordering by values, the labels are ordered by their corresponding value on the vertical axis.
Horizontal/Vertical Axis label	The labels shown under the horizontal and beside the vertical axis.
No Group Text	When grouping a Report by a field, it may happen that some matching items have no values in the related field. By default, the label for these values in the charts is No Group. The default label can be changed in this field.
Chart Colors	A comma-separated list of colors (either RGB codes ( #fff ) or color names). These colors override the default colors in the chart, that is, the first chart segment is painted with the first color provided, the second segment with the second color. and so on. In case more chart segments are available than the number of colors provided, the same color will be used in the chart multiple times.
Show Values	When checked, the actual values are shown above the chart segments.
Value Label	Specifies what information the values on charts reflect to. It works together with the previous option. Possible values:
Show Legend	When checked, the widget adds a legend (an explanation of the chart colors) below the chart.

CBQL Table

codebeamer displays work items that are based on various cbQL tables.

Chart

Chart widgets unify the previously standalone report visualization widgets, making it possible to change the chart types after creating the widgets. The configuration options for each widget types remained the same.

Table

The Table widget displays the result of reports in tabular form.

Further options available on the editor overlay:

• Columns - select the columns of the report to shown in the table.
• Column order - change the order of the columns with drag and drop.
• Order by - select the column used for ordering.
• Sort - the direction of the ordering (ascending or descending)
• Page size - the maximum number of items shown in the table. If there are more rows then the table is pageable.

Project

Activity Stream

Provides an aggregated view of all recently performed activities within a project.

Configuration screen	Preview screen

See Activity Stream Plugin for further details.

Item Count By Field

Displays the distribution of items by Status field values within the actual project.

Configuration screen	Preview screen

See Issue Count by Field plugin for details and parameters.

Item Count Trends

Displays the number of created items compared to the resolved items.

See Issue Count Trend Plugin for further details.

My Open Tracker Items

Displays a summary of unresolved work items submitted by, assigned to or supervised by the current user.

Configuration screen	Preview screen

See My Open Tracker Items Plugin for further details.

My Reviews

Displays the list of reviews assigned to the current user.

See My Reviews Plugin for further details.

Project Activity Trends

Shows the number of activities performed over time for the selected project in the specified reporting period, with the specified details.

See Project Activity Trends Plugin for further details.

Project List

Displays the list of projects accessible by the current user.

Configuration screen	Preview screen

See Project List Plugin for further details.

Review List

Displays the latest review result of each item in a report result.

See Review List Plugin for further details.

Risk Matrix Diagram

Shows the number of Requirements, User Stories or Risk Items according to the probability and severity of the relevant risk.

Configuration screen	Preview screen

See Risk Matrix Diagram Plugin for further details.

Traceability Report

Since Codebeamer release HUSKY, the Traceability Browser widget has been renamed to Traceability Report widget with no change in its general operation.

The Traceability Report widget displays a traceability report according to the provided settings. Clicking the Show Source Traceability Report link opens the relevant Traceability Report page.

See also: Reports

Tracker Class Diagram

Displays a tracker configuration diagram.

See Tracker Class Diagram Plugin for further details.

Tracker History Audit Trail

Shows the tracker configuration change history of tracker items within the selected project.

See Tracker History Audit Trail Plugin for further details.

Tracker List

Displays all trackers of the selected project, along with statistics.

Configuration screen	Preview screen

See Tracker List Plugin for further details.

Tracker State Transition

Displays a workflow diagram of a tracker.

Agile

Burn Down Chart

Displays the open work items of a release of sprint.

Configuration screen	Preview screen

See Burn Down Chart Plugin for further details.

Burn Up Chart

Displays the number of closed items compared to the total number of items over time.

See Burn Up Chart Plugin for further details.

Current Velocity

Shows the velocity of the last working day within a release or sprint.

Configuration screen	Preview screen

The Data Source affects the way the values are displayed:

• Number of Items - Current velocity is based on the number of items of the relevant release.
• Story points - Current velocity is based on the story point values of items of the relevant release.
• Both - Current velocity is calculated and displayed for both types.

See Current Velocity Plugin for further details.

Release Activity Trends

Displays the list of available releases and sprints of the relevant project with the number of work items (optional) and a burn down chart per release or sprint.

Configuration screen	Preview screen

See Release Activity Trends Plugin for further details.

Release Gantt Chart

Displays the selected release and the related sprints, or, the selected sprint and the related sub-sprints, and referencing releases, if any.

Releases that do not have any planned start and release dates are displayed with fictitious schedules.

Configuration screen	Preview screen

See Release Gantt Chart Plugin for further details.

Release Stats

Shows statistics about a release for which the Release Dashboard page is used as database.

Configuration screen	Preview screen

See Release Stats Plugin for further details.

Remaining Time

Displays the number of days remaining until the planned release date.

Configuration screen	Preview screen

See Remaining Time Plugin for further details.

Sprint Break Down

Shows the status distribution of all issues in a Release or Sprint.

Configuration screen	Preview screen

See Sprint Break Down Plugin for further details.

Velocity Trends

Displays the changing velocity of a Release or a Sprint.

Configuration screen	Preview screen

See Velocity Trends Plugin for further details.

Test

Requirements Coverage

Shows the test or other work item coverage of the requirements.

The following two tracker types can be set, but only one at a time:

• Referring Tracker - Requirement type trackers to cover.
• Coverage Tracker - Specific trackers to compute coverage with.
• Referring Tracker type - Specific tracker type to compute coverage with.

See Requirement Coverage Plugin for further details.

Test Cases By Last Run Result

Displays the results of the latest run test cases in a pie chart.

Configuration screen	Preview screen

See Test Cases By Last Run Results Plugin for further details.

Test Runs By Assignee

Shows all test runs within a project or test run tracker. Consists of a single bar for each user who have executed test runs, and another bar for the test runs that have no assignees.The bars show the distribution of the results of the runs performed by a given user.

Configuration screen	Preview screen

See Test Runs by Assignee Plugin for further details.

Test Runs By Configuration

Displays all or only the selected test runs of a project based on the results, grouped by Test Configurations.

Configuration screen	Preview screen

See Test Runs by Configuration Plugin for further details.

Test Runs By Test Set

Shows the distribution of the test run results of the selected test set.

Configuration screen	Preview screen

See Test Runs by Test Set Plugin for further details.

Personal

My Current Items

Displays the list of items (except for the ones in Resolved or Closed statuses) assigned to the current user. The items are set in a descending order by priority and last modification date.

Configuration screen	Preview screen

See My Current Items Plugin for further details.

My Subscriptions

Displays the entities the current user has subscribed to.

See My Subscriptions Plugin for further details.

User Profile

Displays the user profile information of the current user.

Configuration screen	Preview screen

See User Profile Plugin for further details.

Other

Wiki Markup

Wraps a wiki markup into a widget and makes it reusable on dashboards.

Besides the widgets available by default, custom widgets can also be developed. For details, see Widget Development Documentation, or click on the Create your own Widget link on the top right corner of the Add Widget overlay.

Further Options

Once a widget is created, further options are available by clicking on the context menu of the widget:

Widgets can be:

• Edited
• Refreshed
• Copied
• Cut
• Deleted
• Pinned
• Unpinned
• Aligned (pinned widgets)

Aligning Pinned Widgets

Dashboard in codebeamer supports exactly one full-length widget on top of the dashboard. Depending on the size of the widget, the following alignment options can be selected:

Stretching

Stretching is the default value. It should be selected for all Widgets which benefit from taking up all available space (for example, Table and Release Gantt Chart Widgets).

Left

Displays the widget on the left side of the screen. All of the following options only make sense if the widget has a fixed width.

Center

Aligns the widget to the center of the screen.

Right

Displays the widget on the right side of the screen.

Deprecated Widgets

Area Chart

With this widget type, time series can be visualized. The editor accepts only Reports grouped by a date field. The chart connects the points with straight lines (even when a date is missing between two consecutive points).

Configuration screen	Preview screen

Bar Chart

This widget has three different modes:

• Simple - a traditional bar chart; one bar for each group.
• Stacked - this mode accepts only reports that are grouped by exactly two fields.
• Multi - this mode accepts only reports that are grouped by exactly two fields. The for each group, the widget shows multiple bars: one for each subgroup.

Configuration screen	Preview screen

Gauge Chart

Displays a range of values.

• The range is divided into four areas.
• The colored area indicates the actual value.
• The color depends on the size of separated areas.

Configuration screen	Preview screen

Special fields on the Editor overlay:

• Value - select which group value form the query result is to be shown on the chart.
• Minimum - the minimum value.
• Breakpoint 1 - the first separator on the range.
• Breakpoint 2 - the second separator on the range.
• Breakpoint 3 - the third separator on the range.
• Maximum - the maximum value.

The following number fields must be in an ascending order:

1. Minimum
2. Breakpoint 1
3. Breakpoint2
4. Breakpoint3
5. Maximum

Speedometer Chart

• Displays a range of values.
• The range is divided into three areas indicated with different colors.
• The actual value is shown by a pointer.

Configuration screen	Preview screen

Special fields on the Editor overlay:

• Value - select which group value from the query result is to be shown on the chart.
• Minimum - the minimum value.
• Breakpoint 1 - the first separator on the range.
• Breakpoint 2 - the second separator on the range.
• Maximum - the maximum value.

The The above listed number fields must be in an ascending order:

1. Minimum
2. Breakpoint 1
3. Breakpoint2
4. Maximum

Troubleshooting

In case several widgets are added to a dashboard, some of the widgets might not get loaded.

To avoid such issues, the affected widgets must add data-deferred="true" to an HTML element rendered by the widget.

When all actions finished, affected widgets must trigger the renderfinished custom event to inform the application about this fact.
Example: $(CSS_SELECTOR).trigger("renderfinished").

See also: Wiki, Widget Development Documentation