Portal Community

Step-by-Step: Adding a Widget

1

Click "+ Add Widget"

In the top-right corner of the Personal Dashboard, click the + Add Widget button. A slide-in panel appears on the right side listing all available widget types with descriptions and preview thumbnails.

2

Select a Widget Type

Click the widget type you want to add. If the widget requires configuration (e.g., Metrics Tile needs a Grafana URL, Quick Launch needs shortcuts), a configuration form opens immediately below the widget type card.

3

Configure (if required)

Fill in the configuration form. For Metrics Tile: enter the Grafana panel URL. For Quick Launch: add shortcut labels and target workflows. For zero-config widgets (PendingTasksCount, RecentWorkflows): skip this step.

4

Click "Add to Dashboard"

The widget is added to the bottom of the grid. The layout is auto-saved to the backend. You can then drag it to your preferred position in Edit Mode.

Widget Picker Panel

The Widget Picker slide-in shows all available widget types organized in a list. Each entry shows:

Maximum Widgets

There is no hard maximum on the number of widgets — but best practice is 6-10 for a usable dashboard. The grid is scrollable if you add many widgets. Each widget type can be added multiple times (e.g., two Metrics Tiles showing different Grafana panels).

Duplicate Widgets

You can add the same widget type more than once. This is useful for Quick Launch (different shortcut sets for different workflow categories) and Metrics Tile (different KPI panels from the same or different Grafana dashboards).

Widget Configuration Form

Widgets that require configuration present their settings inline in the Widget Picker. Configuration is validated before the widget is added — you cannot add an invalid widget (e.g., a Metrics Tile without a Grafana URL).

// Widget configuration validation (client-side)
function validateWidgetConfig(type: string, config: unknown): ValidationResult {
  switch (type) {
    case 'MetricsTile':
      return { valid: !!(config as any).grafanaUrl, error: 'Grafana URL is required' };
    case 'QuickLaunch':
      return {
        valid: (config as any).shortcuts?.length > 0,
        error: 'Add at least one shortcut'
      };
    default:
      return { valid: true };
  }
}