WEBfactory 2010

Accessing the Alarming Web Services using HTML and Javascript

Abstract

Check out this article and learn more details on how to access the alarming web services using HTML and Javascript.

Retrieving the Online Alarms

The following article continues the guide on Accessing the Alarming Web Services using HTML and Javascript started in the previous topic. In this second part of the tutorial, we will set up the HTML and Javascript code to display the online alarms, by calling the GetOnlineAlarms method of the AlarmsService web service.

The example HTML and Javascript files that will be created and/or used in the following guide are available for download here:

In order to be able to follow this guide, the Displaying the Alarm Groups guide should be completed first. The following steps are based on the HTML/Javascript files and code from the previous guide.

The following guide will be separated in two steps:

  • Creating the Javascript functionality

  • Creating the HTML structure to display the data

Creating the Javascript functionality

A more complex example is getting data for online alarms using the filter items. The procedure is similar with the one used to retrieve the alarm groups.

  1. 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.

  2. Next, add the onlineAlarms array definition to the viewModel:

    var viewModel = {
    	alarmGroups : ko.observableArray(),
    	onlineAlarms: ko.observableArray()
    };
    
  3. 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:

    Filter 

    Values

    LanguageID

    9: English;

      7: German.

    AlarmGroups

    [AlarmGroup1, AlarmGroup1]: the array of alarm groups.

    AlarmTypes

    [AlarmType1, AlarmType1]: the array of alarm types.

    MinimumPriority

    int: the minimum priority number.

    MaximumPriority

    int: the maximum priority number.

    SortOrder

    the ServerSortOrder:

    2: DateDescending;

      4: PriorityDescending.

    MaxRowCount

    int: the number of rows to be loaded from the server at once.

    AlarmStatusFilter

    0: ActiveOrNotAcknowledged;

    2: NotAcknowledged;

    4: Active;

    8: Gone;

      16: All.

    StartTime

    The start of the time interval in which the desired alarms have appeared.

    EndTime

    The end of the time interval in which the desired alarms have appeared.

    Column

    Column type filter:

    0: None,

    1: Text,

    2: SignalName,

    3: OpcItem,

    4: Name,

    5: HttpLink,

    6: HelpCause,

    7: HelpEffect,

    8: HelpRepair,

    9: GeneralComment,

    10: OccurrenceComment,

    11: AcknowledgeComment,

    12: NavigationSource,

    13: NavigationTarget,

       14 - 45: ExtendedProperty1 ... ExtendedProperty32.

    ColumnFilter

    string: the name of the column.

    FilterAlarmGroupsByUser

    true: displays the alarms from the alarm group to which the user is assigned;

      false: displays all the alarms.

    UserName

    string: user name for FilterAlarmGroupsByUser.

IMPORTANT: because there is no standard DateTimeOffset format for JavaScript, whenever the web service requires data of this type the toMsJson() extension method must be used. The following example shows how to pass the current date and time as a DateTimeOffset value:

DateTime: new Date().toMsJson()

The complete script (that will get both the alarm groups and the online alarms) will look like this:

<script type="text/javascript">
function getAlarmGroups(arguments, successCallback, errorCallback){
	$.ajaxDotNet("/_SERVICES/WebServices/WCF/AlarmsService.svc/js/GetAlarmGroups",
			{
				data: arguments,
				success: function (data) {
					successCallback(data.d);                        
				},
				error: function () {
					errorCallback();
				}
			}
		);
}

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

$(document).ready(function(){
	var viewModel = {
		alarmGroups : ko.observableArray(),
		onlineAlarms: ko.observableArray()
	};
	
	getAlarmGroups({
				languageID: 7
			},function(result){
				viewModel.alarmGroups.removeAll();
				$.each(result, function(index,item){
					viewModel.alarmGroups.push(item);
				});				
			},function(){
				alert("Error");
			});
	
	getOnlineAlarms({
				filter : {
                    LanguageID : 7,
                    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");
			});
	
	ko.applyBindings(viewModel);		
});
</script>   	
Creating the HTML structure to display the data

In order to display the data, we need to create an HTML table and use data-binding to place the data into the table.

  1. 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>
    
  2. 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>

Run the HTML page from IIS Manager.

The HTML displays the alarm groups and online alarms