WEBfactory 2010

In the <script> section of the HTML head, execute the getOnlineAlarms function (after the getAlarmGroups function):

function getOnlineAlarms(arguments, successCallback, errorCallback){
	$.ajaxDotNet("/_SERVICES/WebServices/WCF/AlarmsService.svc/js/GetOnlineAlarms",
			{
				data: arguments,
				success: function (data) {
					successCallback(data.d);                        
				},
				error: function () {
					errorCallback();
				}
			}
		);
}

The above function wraps the call to the GetOnlineAlarms method of the AlarmsService web service.

Next, add the onlineAlarms array definition to the viewModel:

var viewModel = {
	alarmGroups : ko.observableArray(),
	onlineAlarms: ko.observableArray()
};

The getOnlineAlarms function called above will require additional filters in order to get the data properly form the web service. The function will write the Alarms list from the received data to the table and display and error message if it fails in writing the Alarms list from the result. Define these filters inside the initialization function:

getOnlineAlarms({
			filter : {
				LanguageID : 9,
				AlarmGroups : [],
				AlarmTypes: [],
				MinimumPriority: 0,
				MaximumPriority: 1,
				SortOrder: 4,
				MaxRowCount: 10,
				AlarmStatusFilter : 0,
				StartTime : {
					DateTime: new Date(1900,0,0).toMsJson(),
					OffsetMinutes: 0
				},
				EndTime : {
					DateTime: new Date().toMsJson(),
					OffsetMinutes: 0
				},
				Column : 0,
				ColumnFilter : null,
				FilterAlarmGroupsByUser : false,
				UserName : null
			}

		},function(result){
			viewModel.onlineAlarms.removeAll();
			$.each(result.Alarms, function(index,item){
				viewModel.onlineAlarms.push(item);
			});		
			
		},function(){
			alert("Error");
		});
 

where the filters values are selected according to the following list:

Add a thirty columns HTML table inside the body of the HTML, under the Alarm groups table. Add a title to the table. Each column will represent a property of the online alarms (Example: AlarmLogID, DateOn, DateOff, etc.):

<h1>Online alarms</h1>
<table>	
	<thead>
		<tr>
			<th>AlarmLogID</th>
			<th>DateOn</th>
			<th>DateOff</th>
			<th>DateAck</th>
			<th>SysTime</th>
			<th>AlarmID</th>
			<th>AlarmTag</th>
			<th>SignalName</th>
			<th>SignalAliasName</th>
			<th>Priority</th>
			<th>AckText</th>
			<th>AlarmLinkURL</th>
			<th>AlarmSymbolicText</th>
			<th>AlarmSymbolicTextTranslation</th>
			<th>AlarmGroupSymbolicText</th>
			<th>AlarmGroupSymbolicTextTranslation</th>
			<th>AlarmTypeSymbolicText</th>
			<th>AlarmTypeSymbolicTextTranslation</th>
			<th>AckUserName</th>
			<th>AlarmComment</th>
			<th>OccurrenceComment</th>
			<th>Status</th>
			<th>ExtendedProperty1</th>
			<th>HelpCause</th>
			<th>HelpEffect</th>
			<th>HelpRepair</th>
			<th>OccurrenceCount</th>
			<th>NavigationSource</th>
			<th>NavigationTarget</th>
			<th>OPCQuality</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td/>
			<td/>
			<td/>
			<td/>				
			<td/>
			<td/>
			<td/>				
			<td/>
			<td/>
			<td/>				
			<td/>				
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
			<td/>
		<tr>
	</tbody>
</table>

To display the data in the HTML page, an HTML element from the view will be bound to the configured view model (in our example below, the tbody element):

<table>	
	<thead>
		<tr>
			<th>AlarmLogID</th>
			<th>DateOn</th>
			<th>DateOff</th>
			<th>DateAck</th>
			<th>SysTime</th>
			<th>AlarmID</th>
			<th>AlarmTag</th>
			<th>SignalName</th>
			<th>SignalAliasName</th>
			<th>Priority</th>
			<th>AckText</th>
			<th>AlarmLinkURL</th>
			<th>AlarmSymbolicText</th>
			<th>AlarmSymbolicTextTranslation</th>
			<th>AlarmGroupSymbolicText</th>
			<th>AlarmGroupSymbolicTextTranslation</th>
			<th>AlarmTypeSymbolicText</th>
			<th>AlarmTypeSymbolicTextTranslation</th>
			<th>AckUserName</th>
			<th>AlarmComment</th>
			<th>OccurrenceComment</th>
			<th>Status</th>
			<th>ExtendedProperty1</th>
			<th>HelpCause</th>
			<th>HelpEffect</th>
			<th>HelpRepair</th>
			<th>OccurrenceCount</th>
			<th>NavigationSource</th>
			<th>NavigationTarget</th>
			<th>OPCQuality</th>
		</tr>
	</thead>
	<tbody data-bind="foreach: onlineAlarms" >
		<tr>
			<td data-bind="text:AlarmLogID"/>
			<td data-bind="text:DateOn"/>
			<td data-bind="text:DateOff"/>
			<td data-bind="text:DateAck"/>				
			<td data-bind="text:SysTime"/>
			<td data-bind="text:AlarmID"/>
			<td data-bind="text:AlarmTag"/>				
			<td data-bind="text:SignalName"/>
			<td data-bind="text:SignalAliasName"/>
			<td data-bind="text:Priority"/>				
			<td data-bind="text:AckText"/>				
			<td data-bind="text:AlarmLinkURL"/>
			<td data-bind="text:AlarmSymbolicText"/>
			<td data-bind="text:AlarmSymbolicTextTranslation"/>
			<td data-bind="text:AlarmGroupSymbolicText"/>
			<td data-bind="text:AlarmGroupSymbolicTextTranslation"/>
			<td data-bind="text:AlarmTypeSymbolicText"/>
			<td data-bind="text:AlarmTypeSymbolicTextTranslation"/>
			<td data-bind="text:AckUserName"/>
			<td data-bind="text:AlarmComment"/>
			<td data-bind="text:OccurrenceComment"/>
			<td data-bind="text:Status"/>
			<td data-bind="text:ExtendedProperty1"/>
			<td data-bind="text:HelpCause"/>
			<td data-bind="text:HelpEffect"/>
			<td data-bind="text:HelpRepair"/>
			<td data-bind="text:OccurrenceCount"/>
			<td data-bind="text:NavigationSource"/>
			<td data-bind="text:NavigationTarget"/>
			<td data-bind="text:OPCQuality"/>
		<tr>
	</tbody>
</table>