Alarming
Here are the i4designer Alarming components for your new project created on the i4SCADA platform.
The i4designer Alarming category contains the Alarm viewer component designed to facilitate alarms monitoring tasks at run-time. More details can be found in the upcoming article.
Alarm viewer
Check out this article to learn more details about the i4designer Alarm viewer component and its properties.
The i4designer Alarm viewer component is an event notification and management extension that allows the user to view and act upon i4SCADA alarms, providing complex capabilities like alarm acknowledgement, processing, commenting, filtering and offline alarm viewing.
The Alarm viewer table provides a detailed alarm status representation, using color codes and textual hints. The active alarms can be filtered for both display and processing using the complex filtering criteria available in the contextual menu.

The Alarm viewer component
Category | Property | Description |
---|---|---|
Common | Name | The name of the component, visible in other Designer locations (such as Page explorer). ![]() |
Object ID | Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states. Example: Setpoint [OID] ![]() | |
Tooltip text | Optional tooltip text, that will be shown on mouseover at runtime. ![]() | |
Security | System authorization | The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. This property is named "System authorization" for projects created on i4SCADA platform. ![]() This property is named "Permissions" for projects created on i4connected platform. ![]() |
Project authorization | The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. This property is named "Project authorization" for projects created on i4SCADA platform. ![]() This property is named "Role" for projects created on i4connected platform. ![]() | |
Security access behavior | Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilise the component, at run-time. ![]() | |
Layout | Layout mode | Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center. ![]() |
Margin | Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin. The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor. ![]() The Margin editor can be opened by clicking the Open button. ![]() The components margins can be updated by setting the margin value and selecting the desired unit:
| |
Effects | Opacity | Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid). By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree. ![]() By clicking the Open button the view is extended to display the Opacity slider. ![]() |
Shadow color | Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid). ![]() | |
Shadow offset X | Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows. ![]() | |
Shadow offset Y | Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows. ![]() | |
Shadow size | Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows. ![]() | |
Miscellaneous | Group name | Sets the name of the Alarms Group. ![]() |
Configuration | Title text | Sets the text displayed by the component header. ![]() |
DateTime format | Selects the time and date format for the DateTime Signal values. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/. For example: DD.MM.YYYY hh:mm:ss ![]() | |
Alarms | Alarm groups | The Alarm Group that will be used as initial alarm filter. This filter will be applied automatically when running the component in the web browser. The Alarm groups filters are featured as an array list, accessible by clicking the Expand array list button. ![]() Further more, the following actions are available for each array item:
In order to add a new Array item, to the list of Alarm Group filters, the user can click the Add button Each array item allows the user with possibility to manually fill in the Alarm group name. ![]() |
Alarm status filter | Sets the alarm status that will be used as initial alarm filter. This filter will be applied automatically when running the extension in the web browser. The user can select the desired Alarm status filter from the drop-down list options. ![]() | |
Alarm types | The Alarm types filter that will be used as initial alarm filter. This filter will be applied automatically when running the component in the web browser. The Alarm types filters are featured as an array list, accessible by clicking the Expand array list button. ![]() Further more, the following actions are available for each array item:
In order to add a new Array item, to the list of Alarm Group filters, the user can click the Add button Each array item allows the user with possibility to manually fill in the Alarm type name. ![]() | |
Column filter | Sets the columns that will be used as initial alarm filters. The user can select the desired column filter selecting from the drop-down list options. ![]() | |
Column filter pattern | Defines the pattern for filtering the specified column. The asterisk could be used as placeholder. ![]() | |
Columns | Sets the columns displayed by the alarm viewer table. By default, the following columns are defined: Priority, Status Text, Group, Type and Text. The table columns are featured as an array list, accessible by clicking the Expand array list button. ![]() Further more, the following actions are available for each array item:
In order to add a new Array item, to the list of Alarm Group filters, the user can click the button Add Each array item allows the user with possibility to manually fill in the column name. ![]() | |
End offset | Selects the type of the end offset interval, allowing the user to chose between the drop-down list options: seconds, minutes, days, weeks, months and years. ![]() | |
End offset interval | Sets the numeric value for the end offset property, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value. ![]() | |
Online mode | Sets the alarm viewer component to display the online alarms, by setting the property to True. ![]() | |
Rolling time window | Boolean value that shows if the time window is rolling and it is not fixed, if the property is set to True. ![]() | |
Max alarm count | Sets the maximum number of alarms to be retrieved. ![]() | |
Maximum priority | Sets the maximum priority of the alarms to be displayed. This property acts like a priority filter. ![]() | |
Minimum priority | Sets the minimum priority of the alarms to be displayed. This property acts like a priority filter. ![]() | |
Start offset | Selects the type of the start offset interval, allowing the user to chose between the drop-down list options: seconds, minutes, days, weeks, months and years. ![]() | |
Start offset interval | Sets the numeric value for the start offset property, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value. ![]() | |
Update rate | Sets the update rate in mliseconds. This property will be taken into consideration only if the Online Mode is enabled. ![]() | |
Alarm sort order | Sets the order in which the alarms are displayed, selecting from the drop-down list options. ![]() | |
Palette | Acknowledged alarm background | Sets the background color of the alarms after they were acknowledged. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() |
Acknowledged alarm foreground | Sets the foreground color of the alarms after they were acknowledged. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Acknowledged and gone alarm background | Sets the background color of the alarms after they were acknowledged and gone. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Acknowledged and gone alarm foreground | Sets the foreground color of the alarms after they were acknowledged and gone. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Active alarm background | Sets the background color of the alarms after they were active. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Active alarm foreground | Sets the foreground color of the alarms after they were active. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Inactive alarm background | Sets the background color of the alarms after they were inactive. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Inactive alarm foreground | Sets the foreground color of the alarms after they were inactive. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. ![]() | |
Appearance | Page size | Sets the number of visible alarms on a single page, by manually filling in the desired value or by using the up / down arrows to increase or decrease the value. ![]() |
Show footer | Enables possibility to switch between showing and hiding the Alarm table footer. If property is set to True, the footer will be visible. ![]() | |
Show header | Enables possibility to switch between showing and hiding the Alarm table header. If property is set to True, the header will be visible. ![]() | |
Show index column | Enables display of the index column, as the first table column, if the property is set to true. ![]() | |
Transform | Width | Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value. The component width can also be adjusted directly on the design surface by means of mouse manipulation. ![]() |
Height | Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value. The component height can also be adjusted directly on the design surface by means of mouse manipulation. ![]() | |
Angle | Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value. The component angle can also be adjusted directly on the design surface by means of mouse manipulation. ![]() | |
Left | Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value. The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation. ![]() | |
Top | Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value. The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation. ![]() |