Alarm Event
The live active-alarm list, with state, a severity accent, filtering and acknowledgement. Place it on the alarm screen as the main list, or scoped to one area beside the equipment it belongs to.
Reach for it when you need:
- The primary list on a dedicated alarm screen
- A per-area alarm panel embedded next to a line overview
Component name: AlarmEvent · Category: Alarm
In the palette: Live active alarms with state, severity accent, filtering, and acknowledge
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
maxRows | number | 0 | Maximum rows to show (0 = no cap). |
footer | object | {"enabled":true} | Show the totals footer (events + per-priority counts). |
↳ footer.enabled | boolean | true | — |
sort | enum | priority | priority = ISA priority-ranked (unacked first); time = newest first. Options: priority · time. |
columns | object | {"state":true,"tag":true,"value":true,"description":false,"r… (truncated) | Show / hide columns. |
↳ columns.state | boolean | true | — |
↳ columns.tag | boolean | true | — |
↳ columns.value | boolean | true | — |
↳ columns.description | boolean | false | — |
↳ columns.raised | boolean | true | — |
table | object | {"reorder":true,"resize":true} | Column interactions: reorder (drag headers) and resize (drag dividers). |
↳ table.reorder | boolean | true | — |
↳ table.resize | boolean | true | — |
filters | object | {"enabled":true,"search":"","priority":"","state":""} | enabled = show the search/filter bar. The values (bindable) override the controls; blank = user-controlled. |
↳ filters.enabled | boolean | true | — |
↳ filters.search | string | "" | — |
↳ filters.priority | enum | "" | Options: `` · critical · high · medium · low. |
↳ filters.state | enum | "" | Options: `` · UNACK · ACK · RTNUN. |
priorityColors | object | {"critical":"#d32f2f","high":"#f57c00","medium":"#fbc02d","l… (truncated) | Per-priority colours (ISA-18.2 default: red/orange/yellow/blue). Shared live across all alarm widgets — change once, applies everywhere. |
↳ priorityColors.critical | color | #d32f2f | — |
↳ priorityColors.high | color | #f57c00 | — |
↳ priorityColors.medium | color | #fbc02d | — |
↳ priorityColors.low | color | #1976d2 | — |
dateFormat | string | dd MMM yyyy HH:mm:ss | date-fns pattern, e.g. dd MMM yyyy HH:mm:ss, dd/MM/yy HH:mm, yyyy-MM-dd. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Suppressed alarms are marked rather than hidden, so an operator can always see what has been silenced and why. Acknowledgement requires the Acknowledge alarms permission, or the equivalent runtime role for an operator in LiveView.
A toolbar that fits narrow spaces Changed in 1.0.8
When the widget is narrow — in a small grid cell, a sidebar or on a phone — its toolbar shrinks to fit rather than spilling over. It goes by the widget's own width, not the screen's, so a small widget on a large monitor shrinks too. Below about 560 px the Priority and State filters get narrower. Below about 400 px they become one Filters button, with a small number showing how many filters are on, so a filter you cannot see is still obvious. When rows are selected, the buttons along the bottom — Suppress and Acknowledge on the Events tab, Return to service on the Suppressed tab — move to a second line if they do not fit, and at the narrowest show only an icon and the number of selected rows. Hover one for its full name. Nothing is taken away: every control is still there, and a shortened control keeps its full name for screen readers.