Skip to main content

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 Alarm Groups

The following article is the first part of the tutorial that will guide you through the process of accessing the alarming web services using HTML and Javascript. By following the next steps, you will be able to create an HTML page and the required scripts that will access the alarming web services, pull the alarm groups information and display it in the HTML page.

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

The following guide will be separated in three steps:

  • Creating the file structure and adding it to the IIS

  • Creating the HTML structure

  • Adding the Javascript functionality

Creating the file structure and adding it to the IIS

  1. Go to C:\inetpub\wwwroot and create a new folder. Name the new folder HTMLAlarming.

  2. Download the helpers.js, jquery.ajaxdotnet.3.js, jquery-1.5.1.min.js, json2.min.js and knockout-2.0.0.js from here:

  3. Inside the HTMLAlarming folder, create a folder named Scripts and place the helpers.js, jquery.ajaxdotnet.3.js, jquery-1.5.1.min.js, json2.min.js and knockout-2.0.0.js inside.

  4. Using Notepad or any other text editor, create a new blank HTML page called Index.html and place it in the HTMLAlarming folder.

The HTMLAlarming folder structure inside IIS's wwwroot folder

Creating the HTML structure

Inside the new Index.html page, we need to create the standard HTML structure and to link the scrips from the Scrips folder:

  1. Declare the HTML doctype and add the default HTML structure:

    <!DOCTYPE html>
<html>
<head>
</head>
<body>    
</body>
</html>

  2. Inside the <head> of the HTML, declare the meta charset:

    <head>
    <meta charset="utf-8" /> 
</head>

  3. Link the scripts from the Scripts folder after the meta declaration:

    <head>
    <meta charset="utf-8" />
    
    <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>    
    <script src="Scripts/json2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ajaxdotnet.3.js" type="text/javascript"></script>    
    <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>    
    <script src="Scripts/helpers.js" type="text/javascript"></script>   	
</head>

    Now that the HTML structure is defined, we need to create the HTML body elements that will display the data from the alarming web services. To make this guide easy to follow, we will start small, displaying first the alarm groups.

  4. Inside the HTML body, add title and a three column table structure. The first column will display the ID, the second column will display the SymbolicTextName and the third will display the SymbolicTextTranslation:

    <h1>Alarm groups</h1>
<table>	
    <thead>
        <tr>
            <th>ID</th>
            <th>SymbolicTextName </th>
            <th>SymbolicTextTranslation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td/>
            <td/>
            <td/>
        <tr>
    </tbody>
</table>

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

    <h1>Alarm groups</h1>
<table>	
    <thead>
        <tr>
            <th>ID</th>
            <th>SymbolicTextName </th>
            <th>SymbolicTextTranslation</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: alarmGroups">
        <tr>
            <td data-bind="text:ID"/>
            <td data-bind="text:SymbolicTextName"/>
            <td data-bind="text:SymbolicTextTranslation"/>
        <tr>
    </tbody>
</table>

    The above data-binding will create a row in the table with the corresponding data for each item in the alarmGroups array. The row will have three cells, displaying the corresponding properties of the alarm group item (ID, SymbolicTextName, SymbolicTextTranslation).

Adding the Javascript functionality

In order to get the data from the alarming web service, we need to add the Javascript functionality that will execute the required functions.

  1. In the head of the HTML page, declare a new local script. We will place the Javascript code inside these script tags:

    <head>
	<meta charset="utf-8" />
	
	<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>    
       <script src="Scripts/json2.min.js" type="text/javascript"></script>
       <script src="Scripts/jquery.ajaxdotnet.3.js" type="text/javascript"></script>    
       <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>    
       <script src="Scripts/helpers.js" type="text/javascript"></script>

	<script type="text/javascript">
	</script>   	
</head>

  2. To retrieve data from the alarming web services, we need to make a call to the GetAlarmGroups method from the AlarmsService web service. This web service call will be wrapped inside a getAlarmGroups function:

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

  3. Next, add the initialization function. This function will act like a constructor in our code:

    $(document).ready(function(){
});

  4. In order to display the results, a viewModel has to be defined inside our initialization function. In this case, the viewModel will contain a single property – the alarmGroups array:

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

    If more information needs to be pulled from the web service, it can be added to the viewModel. This implementation is based on the MVVM (Model-View-ViewModel) pattern which allows decoupling between the data (Model), the view (HTML) by using a view model that makes the data suitable for being displayed in the view using a declarative model.

    More information on this can be found here: http://knockoutjs.com/documentation/introduction.html

  5. If the web service call is successful, the retrieved data will be pushed item by item in the viewModel.alarmGroups array. If an error occurs when calling the web service, an alert will be shown:

    getAlarmGroups({
		languageID: 7
	},function(result){
		viewModel.alarmGroups.removeAll();
		$.each(result, function(index,item){
			viewModel.alarmGroups.push(item);
		});				
	},function(){
	alert("Error");
	});

    where the values for the languageID filer are:

    • 7: German ;

    • 9: English .

  6. Finally, we need to apply the data bindings done in the HTML table on the viewModel:

    ko.applyBindings(viewModel);

    When the call to ko.applyBindings() is made, the data from the viewModel is connected to the defined views. This mechanism is known as “data binding”.

    The complete script should 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();
				}
			}
		);
}

$(document).ready(function(){
	var viewModel = {
		alarmGroups : ko.observableArray(),
	};
	
	getAlarmGroups({
				languageID: 7
			},function(result){
				viewModel.alarmGroups.removeAll();
				$.each(result, function(index,item){
					viewModel.alarmGroups.push(item);
				});				
			},function(){
				alert("Error");
			});
	
	ko.applyBindings(viewModel);		
});
</script>

    Run the HTML page from IIS Manager.

Continue to Accessing alarming web services using HTML and Javascript: Displaying the Online Alarms

In this section: