Dashboards

​

Create a dashboard in the app

1. Open Dashboards and select Manage. Use Add dashboard (+) in the search field.
2. Enter a name (3–60 characters), an optional description (up to 1000 characters), and choose Global and Default only when their visibility or default behavior is intended. Select Save. The new dashboard opens empty.
3. Select Unlock, then Widgets. Search the library, use a widget’s Add button or drag it onto the grid. Drag insertion previews how existing widgets will move.
4. Select Configure on the new widget. Its tab opens in the widget panel; set the source and any controls listed below. Move or resize the widget while the grid is unlocked. A newly added widget waits for configuration before its content becomes interactive.
5. Select the dashboard Save button to persist the complete layout and current built-in grid filters and sort. Select Lock to return to the operator view. Locking alone does not save edits.

​

Complete widget library

​

Configure a widget

​

Preserve an operator view

• failed Jobs for one settlement category;
• Endpoint latency and Trace evidence for a customer-facing API;
• pending Webhooks for one external integration;
• a restricted Storage folder for an operations team.

​

Custom widgets: inline or reusable code

const ids = Array.isArray(api.input()?.templateIds) ? api.input().templateIds : [];
if (!ids.length) {
  return [[{ type: 'TEXT', value: 'Select Job template IDs in widget Inputs.' }]];
}

const page = await api.getInstanceData('Jobs', {
  take: 100,
  sort: ['-scheduledFor'],
  fields: ['jobTemplateId', 'status', 'scheduledFor'],
  filter: { jobTemplateId: { in: ids } }
});
const jobs = Array.isArray(page?.data) ? page.data : [];
const dailyCounts = new Map();
for (const job of jobs) {
  const day = String(job.scheduledFor ?? '').slice(0, 10); // UTC date from ISO timestamp.
  if (!/^\d{4}-\d{2}-\d{2}$/.test(day)) continue;
  const entry = dailyCounts.get(day) ?? { day, runs: 0, failed: 0 };
  entry.runs += 1;
  if (job.status === 'ERROR') entry.failed += 1;
  dailyCounts.set(day, entry);
}
const daily = [...dailyCounts.values()].sort((a, b) => a.day.localeCompare(b.day));
const scope = jobs.length === 100 ? 'Latest 100 runs; totals may be partial' : 'All returned runs';
return [
  [{ type: 'TEXT', value: `## Job runs by UTC day\n${scope}`, width: 100 }],
  [
    { type: 'CHART', width: 55, data: daily, options: {
      series: [
        { type: 'bar', xKey: 'day', yKey: 'runs', yName: 'Runs' },
        { type: 'bar', xKey: 'day', yKey: 'failed', yName: 'Errors' }
      ]
    } },
    { type: 'TABLE', width: 40, data: daily, definition: [
      { field: 'day', headerName: 'UTC day', type: 'DATE' },
      { field: 'runs', headerName: 'Runs', type: 'NUMBER' },
      { field: 'failed', headerName: 'Errors', type: 'NUMBER' }
    ] },
    { type: 'EMPTY', width: 5 }
  ]
];

​

Refresh and source of truth

​

Real use case: order operations

• an Endpoint performance panel filtered to checkout routes;
• a Database Data panel showing orders stuck in PROCESSING;
• Job History filtered to reconciliation failures;
• Webhooks filtered by warehouse correlation metadata;
• a custom widget summarizing balances, orders, and unsettled transactions.

​

Failure semantics

• Widget error means its inline code, Component, or result contract failed; inspect widget input and execution evidence.
• Empty widget can be an intentional EMPTY result; distinguish it from loading and failure.
• Stale grid requires a source/API check; moving or re-saving the panel does not refresh authoritative data.
• Reload discards unsaved layout changes and reloads the saved preference.
• Concurrent edit is protected by dashboard versioning; reload before overwriting a newer preference.

​

Production checklist

• Give each dashboard one operational purpose.
• Expose decisions and exceptions, not raw volume alone.
• Keep filters, time range, and environment clear.
• Pin consequential reusable widgets to reviewed Component revisions; review inline code before sharing a dashboard.
• Set refresh intervals according to source cost and freshness needs.
• Test with an operator’s actual roles and ACLs.
• Link panels to underlying Job, resource, or Trace evidence.
• Lock and save the final layout.