Skip to main content

WEBfactory 2010

Accessing Logging Web Services using HTML and Javascript

Abstract

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

The following article will guide you through the process of accessing the logging 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 logging web services, pull the signal values 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 example will not use Data Binding for displaying the data in the HTML table structure. The data will be written to the HTML table using Javascript.

This method is an alternative for the Data Binding method used in the Accessing the Alarming Web Services using HTML and Javascript tutorials.

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

  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 HTMLDataTable 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 HTMLDataTable folder.

The HTMLDataTable 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 element that will display the data from the logging web services.

  4. Inside the HTML body, add title and a five column table structure. The first column will display the Entries Date, the second column will display the Edited Value, the third column will display the Edited Value2, the fourth column will display the Value and the fifth will display the Value2:

    <h1>Data Table</h1>
	<table>	
		<thead>
			<tr>
				<th>EntriesDate</th>
				<th>EditedValue</th>
				<th>EditedValue2</th>
				<th>Value</th>
				<th>Value2</th>
			</tr>
		</thead>
		<tbody >
			<tr>
				<td />
				<td />
				<td />
				<td />
				<td />
			<tr>
		</tbody>
	</table>

  5. To be able to access the HTML table using the Javascript functions and place data into it, we need to associate the table to a class by declaring the class="logValues" in the <table> tag:

    <h1>Data Table</h1>
	<table class="logValues">	
		<thead>
			<tr>
				<th>EntriesDate</th>
				<th>EditedValue</th>
				<th>EditedValue2</th>
				<th>Value</th>
				<th>Value2</th>
			</tr>
		</thead>
		<tbody >
			<tr>
				<td />
				<td />
				<td />
				<td />
				<td />
			<tr>
		</tbody>
	</table>
Adding the Javascript functionality

In order to get the data from the logging 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 logging web services, we need to make a call to the GetLogValuesmethod from the SignalService web service. This web service call will be wrapped inside the getLogValuesfunction:

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

    The getLogValues function has a success callback and an error callback. If the function fails in retrieving the values, the error callback will be triggered. Else, the values will be passed to the HTML table.

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

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

  4. The getLogValues function defined above will require additional filters in order to get the data properly from the web service:

    getLogValues({
	filter:{
		LogIDs: ["299F590C-A740-4B7C-A762-802E3F208FA5"],
		StartDate : {
			DateTime: new Date(1900,0,0).toMsJson(),
			OffsetMinutes: 0
		},
		EndDate : {
			DateTime: new Date().toMsJson(),
			OffsetMinutes: 0
		},
		MaxResults: 5,
		SortOrder: 1
	}
}

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

    • LogfIDs - Array of the GUIDs: the log ID associated with the signal

    • StartDate - The start of the time interval in which the log values are retrieved.

    • EndDate - The end of the time interval in which the log values are retrieved

    • MaxResults - int: the maximum number of results to be displayed.

    • SortOrder - 0: date ascending / 1: date descending.

  5. The values are written in the HTML table using Javascript:

    function(result){
		
	for(var i = 0; i<result.length;++i){
		var item = result[i];
		var cells = "";
		cells += "<td>"+item.EntriesDate+"</td>";
		cells += "<td>"+item.Values[0].EditedValue+"</td>";
		cells += "<td>"+item.Values[0].EditedValue2+"</td>";
		cells += "<td>"+item.Values[0].Value+"</td>";
		cells += "<td>"+item.Values[0].Value2+"</td>";
		$(".logValues tbody").append("<tr>"+cells+"</tr>");
	};
				
},

  6. If the getLogValues method fails to retrieve the correct data, an alert will be displayed:

    function(){
                alert("Error");
}

    The complete script should look like this:

    <script type="text/javascript">
function getLogValues(arguments, successCallback, errorCallback){
	$.ajaxDotNet("/_SERVICES/WebServices/WCF/SignalsService.svc/js/GetLogValues",
			{
				data: arguments,
				success: function (data) {
					successCallback(data.d);                        
				},
				error: function () {
					errorCallback();
				}
			}
		);
}
	
$(document).ready(function(){
		
	getLogValues({
		filter:{
			LogIDs: ["299F590C-A740-4B7C-A762-802E3F208FA5"],
			StartDate : {
				DateTime: new Date(1900,0,0).toMsJson(),
				OffsetMinutes: 0
			},
			EndDate : {
				DateTime: new Date().toMsJson(),
				OffsetMinutes: 0
			},
			MaxResults: 5,
			SortOrder: 4
		}
	},function(result){
			
		for(var i = 0; i<result.length;++i){
			var item = result[i];
			var cells = "";
			cells += "<td>"+item.EntriesDate+"</td>";
			cells += "<td>"+item.Values[0].EditedValue+"</td>";
			cells += "<td>"+item.Values[0].EditedValue2+"</td>";
			cells += "<td>"+item.Values[0].Value+"</td>";
			cells += "<td>"+item.Values[0].Value2+"</td>";
			$(".logValues tbody").append("<tr>"+cells+"</tr>");
		};
					
	},
	function(){
		alert("Error");
	});
});
</script>

    Run the HTML page from IIS Manager.

The HTML displaying the signal values logs

Continue to Signal-related Javascript functions

In this section: