18-Aug-03 (Created: 18-Aug-03) | More in 'Howto'

How to use Javascript to format display fields in Aspire

Introduction

Sometimes the output from a database column may further needs to be formatted before displaying on a html page. This can be done using one of the following

1. As a function inside the database
2. Using Java on the JSP page
3. Using Javascript on the html page
4. Using XSLT functions if you are using XSLT

This document focuses on using javascript to accomplish such a need. The example shows how to convert a date field from one format to another. The general principles involved in this solution are

1. Plan out the formatting required
2. Write a javscript function
3. Place the javascript funtion in a library if it is reusable
4. Include the library in the page
5. Invoke the javascript function from the body part of the html using the inline  tags. These tags behave differently in the body part (as opposed to their behavior in the head section)
6. The input value is passed to this function as an argument
7. You will have to use "document.write" to see the output from the javascript function

What follows are examples of creating the function and using the function. It is left to the user to place the function in a library and including the library instead of the body of the function.

Example javascript for formating from one date format to another

((script))

//Input date format: 
// yyyymmdd
// 012345678
//output date format: mm/dd/yy

function getDisplayDate(inputDateValue)
{
	year = inputDateValue.substr(2,2);
	month = inputDateValue.substr(4,2);
	day = inputDateValue.substr(6,2);
	
	return month + "/" + day + "/" + year;
}


//Use this function as a short cut to directly write to the document
function writeDisplayDate(inputDateValue)
{
	document.write(getDisplayDate(inputDateValue));
}

((/script))

Small html segment that uses the above function

((body))
Some text
Date goes here ((script))writeDisplayDate("{{date_column}}")((/script))
((/body))