The Advanced Alarm Acknowledge Table shows the current and historical alarms in the station in a responsive table which updates in real-time. Unlike our other Alarm table, this widget highlights rows with 3 configurable priority levels. Additionally, historical alarms can be viewed by using the filter dropdown, which consists Open Alarms, Today, Last 24 Hours, Yesterday, This Week, Last Week, Last 7 Days, Month-To-Date, Last Month, Year-To-Date, and Last Year. You can also show the alarms in a ticker style.
The station operator can quickly acknowledge alarms in a user-friendly interface and use colors to distinguish priorities. Column names , filter drop down values, and the calendars can be changed to support multiple languages.
The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Also check out the Alarm View Template.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Restart BOTH station and Workbench.
1. Copy the advancedAlarmAcknowledgeTable-ux.jar file to your modules directory.
NOTE: The insightsDataProvider-rt.jar provides some of the advanced functions of the table like changing the priority.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.
The widget has a few configurable properties that can be used to modify look, feel, and functionality. Change the properties as required. All you need to do is set the console recipient property.
Table Date Format Examples:
| Language | Code |
| Afrikaans | af |
| Arabic | ar |
| Algerian Arabic Translation | ar-DZ |
| Azerbaijani | az |
| Belarusian | be |
| Bulgarian | bg |
| Bosnian | bs |
| Catalan | ca |
| Czech | cs |
| Cymraeg Welsh/UK | cy |
| Danish | da |
| German | de |
| Greek | el |
| English/Australia | au |
| English | gb |
| English - New Zealand | nz |
| Esperanto | eo |
| Spanish | es |
| Estonian | et |
| Karrikas | eu |
| Persian (Farsi) | fa |
| Finnish | fi |
| Faroese | fo |
| French | fr |
| French - Canadian | fr-CA |
| Hebrew | he |
| Hindi | hi |
| Croatian | hr |
| Italian | it |
| Japanese | ja |
| Korean | ko |
| Polish | pl |
| Portuguese | pt |
| Russian | ru |
| Swedish | sv |
| Chinese | zh-CN |
Additional languages available upon request.
1. In normal mode, select the columns you want to appear for the ticker.
2. Then, change the show ticker property to true.
You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:
C:/../station/shared/demo1.html
1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:
<script type="text/javascript">
var require = {
paths: {
"nmodule": "/module",
"baja": "/module/bajaScript/rc/plugin/baja",
"bajaScript": "/module/bajaScript/rc",
"bajaux": "/module/bajaux/rc",
"lex": "/module/js/rc/lex/lexplugin",
"css": "/module/js/com/tridium/js/ext/require/css",
"jquery": "/module/js/rc/jquery/jquery-2.1.1",
"Handlebars": "/module/js/rc/handlebars/handlebars-v2.0.0", // For N4.4 or higher use /module/js/rc/jquery/jquery-3.2.0.min
"Promise": "/module/js/rc/bluebird/bluebird",
// these are runtime dependencies
"hbs": "/module/js/rc/require-handlebars-plugin/hbs", // For N4.4 or higher use /module/js/rc/handlebars/handlebars.min-v4.0.6
"i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
"json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
"underscore": "/module/js/rc/underscore/underscore",
},
hbs: {
disableI18n: true
}
}
</script>
<script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
<script>
require(['/module/advancedAlarmAcknowledgeTable/rc/advancedAlarmAcknowledgeTableWidget.run.js'], function (app) {
app.initialiseAdvancedAlarmAcknowledgeTable({
ackedBellColor: '#ffc107',
ackIconColor: '#1e88e5',
alarmText: 'Alarm(s)',
backgroundColor: '',
bql: "alarmClass = 'defaultAlarmClass'", // e.g. where alarmClass = 'defaultAlarmClass' (case sensitive)
clearedBellColor: '#28a745',
calendarLanguage: '', // default is English. See product sheet for options
dateFormat: 'mm/dd/yy',
dateWidth: '4.75em',
divId: '#widget',
consoleRecipient: 'station:|slot:/Services/AlarmService/ConsoleRecipient', // set this to any console recipient within the station
containerStyle: 'ack-table-responsive', // set this to '' to allow the table to inherit page styling
columnNames: 'Time Stamp,Uuid,Source State,Ack State,Ack Required,Source,Alarm Class,Priority,Normal Time,Ack Time,User,Message Text,Alarm Transition,Last Update,Instructions,Action',
enableSound: false,
filterNames: 'Open Alarms,Today,Last 24 Hours,Yesterday,This Week,Last Week,Last 7 Days,Month-To-Date,Last Month,Year-To-Date,Last Year',
fontColor: '#ffffff',
forceNoteOnAck: true,
overflowX: 'hidden', // set to visible or hidden show scroll bars
overflowY: 'hidden', // set to visible or hidden show scroll bars
highlightOnPriority: false, // row will be highlighted on priority
highlightOnAlarmState: true, // row will be highlighted on alarm state acked,unacked,cleared. Use the ackedBellColor, clearedBellColor, unAckedBellColor for colours
highPriorityColor: '#dc3545',
mediumPriorityColor: '#ffc107',
lowPriorityColor: '#007bff',
highPriorityMax: '255',
highPriorityMin: '100',
mediumPriorityMax: '99',
mediumPriorityMin: '50',
lowPriorityMax: '49',
lowPriorityMin: '1',
maxResults: 100,
showFilters: false, // shows state filters
showRefreshButton: true,
showTicker: false,
soundFile: 'module://advancedAlarmAcknowledgeTable/rc/sounds/smallBeep.wav',
soundRepeatInterval: '30', // In seconds
sourceText: 'Source(s)',
tableId: 'table1', // When you have more than 1 alarm table on your PX Page, set each alarm table to have a unique table name.
tableStyle: 'ack-table', // set this to '' to allow the table to inherit page styling
tableDateFormat: 'd-MMM-yy hh:mm:ss TT', // e.g. dddd h:mmtt d MMM yyyy, M/d/y, HH:mm:ss, hh:mm:ss TT, yy/M/d, ddd MMM d \a\t h:mm TT
tickerLogoFile: '/ord/file:%5Elogo-white-rect-70.png', // file in stations shared directory e.g. /ord/file:%5Evb-logo-sm.png
tickerSpeed: 200, // smaller the number the faster
tickerLogoColor: '#808080',
toText: 'to',
unAckedBellColor: '#dc3545',
});
});
</script>
</head>
<!--html to go here-->
<div id="widget1" style="width:300px;height:300px;"></div>
<!--Rest of your html below...-->
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
