OSCAR e-form Tutorial

The purpose of this page is to give you a quick "copy and paste" tool to make your own e-forms. If you want to learn more advanced stuff, check out online tutorials such as W3 Schools. I refer back to this site often for my e-forms.

Basics

Here's the basic skeleton of a webpage:


<html>
<head>
<title> </title>

</head>
<body>

</body>
</html>

Copy and paste this into a text editor such as notepad in Windows.

Save the file as "filename.html". Make sure you select "all files" under the "save as type".

Everything is enclosed between an "opening tag" that look like <tag> and a "closing tag" that looks like </tag>.

The <html></html> tells the browser that it's an html file, aka a webpage.

The <head></head> contains extra information that is useful for displaying the page

You can put in a title between the <title></title>, and it'll show up in the title bar

All the code inside the <body></body> are the actual contents that you get to see in the browser.

Make sure you don't overlap different opening and closing tags. For example,
<tag1> <tag2></tag2> </tag1> is ok, but
<tag1> <tag2> </tag1> </tag2> is not ok.

Inserting the image file

Now, it's time to put in the image file:


<div style="position: absolute; left: 10px; top: 10px;" >
	<img src="${oscar_image_path}imagename.png" width="750">
</div >
<!-- You can remove ${oscar_image_path} as you develop the form, but make sure you put it back before uploading to OSCAR otherwise the image wouldn't show. -->
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in Windows, but not in OSCAR because it's based on a Linux platform -->

Copy the above and paste between the <body> and </body>

Make sure you put the image file and the html file in the same folder while you're editing the form

Temporarily delete the ${oscar_image_path} inside the <img> tag if you're editing the file locally. You'll need to put it back in after you upload it onto OSCAR.

Note: I find that having an image with a width of 750 pixels fits a letter-sized paper the best (I set the print margins in firefox to "0"). I usually prepare the image file so that it's 1500 pixels wide, so that it scales down by 50% in the browser.

Inserting the form element

<form method="post" action="" name="FormName">
<!--  put all the form inputs here-->


<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
	<tr>
		<td>
			Subject: <input name="subject" size="40" type="text">
			<input value="Submit" name="SubmitButton" type="submit">
			<input value="Reset" name="ResetButton" type="reset">
			<input value="Print" name="PrintButton" type="button" onclick="window.print()">
		</td>
	</tr>
</table>
</div>
</form>

Copy the above and paste between the <body> and </body>

You can customize the position of the submit buttons by changing the numbers in blue

Install the tools to help with placement of the input boxes

<!-- SCRIPT GIVES THE MOUSE COORDINATES - Hold SHIFT and click two points for distance between -->
<script type="text/javascript" language="javascript">
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
document.onclick = captureposition;
var capX = 0;
var capY = 0;
var sy = 0;
var sx = 0;

function getMousePosition(e) {
var _x;
var _y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
  document.title = _x + " " + _y;
  return true;
}
function captureposition(e) {

  if (e.shiftKey) {
     if ((capX == 0) && (capY == 0)) {
        capX = e.pageX;
        capY = e.pageY;
     } else {
        var diffX = e.pageX-capX;
        var diffY = e.pageY-capY;
        if (Math.abs(diffX) > Math.abs(diffY)) {
            alert('X-coordinate distance: ' + diffX + 'px');
        } else {
            alert('Y-coordinate distance: ' + diffY + 'px');
        }
        capX = 0;
        capY = 0;
     }
   }
}
</script>
<!-- ----------End coordinate script--------------------------------------------------------- -->

Copy above and paste between <head></head>

This script will give you the mouse coordinates in the titlebar, so you can find out where to put the input boxes

I simply delete the above script when I'm done with putting in the input boxes.

The Inputs:

Rules:

Single-line text input:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;">
</div>

Copy above and paste under the <!-- put all the form inputs here--> inside the <form></form>.

Move your mouse to the top left corner of the form input box and note the x and y coordinate. Substitute these numbers into the "left: Xpx" and the "top: Ypx;".

Move your mouse to the left edge of the form input box, press-and-hold the shift key, click on the left edge then click on the right edge of the input box. A pop-up box will come up showing you the width of the box. Input this number into the "width: Wpx;".

Multi-line text input:

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;"></textarea>
</div>

Again, you'll have to customize the "left:", "top:", "width:", and "height:" numbers to the form.

Checkboxes

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="CheckboxName" type="checkbox">
</div>

The actual X and Y coordinates of the checkboxes are somehow about 4 pixels less than the indicated numbers

Radio Buttons

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="RadioName" type="radio" value="value1">
</div>
<div style="position: absolute; left: 100px; top: 110px;">
        <input name="RadioName" type="radio" value="value2">
</div>

The actual X and Y coordinates of the checkboxes are somehow about 4 pixels less than the indicated numbers

Auto-populating input fields from the OSCAR database

A list of database info that you can auto-populate into e-forms can be found on the DBAPtypes.html file found on the the OSCAR website.

To use these, just put the oscarDB=xxxx inside the input tag. I usually put it right before the closing ">".

For Example, the following will auto-populate the textarea with the clinic label. 

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;" oscarDB=clinic_label></textarea>
</div>

Please note that you DON'T need the quotes around the DBAPtype.

Currently, the "oscarDB=provider_name" doesn't seem to be working properly yet.

Some of the things you'll need to do to make the form print properly

You probably don't want to print out some of the things on the screen such as the border around the input boxes and the submit/print buttons at the bottom.

To take these away:

1. Copy the following and paste it into the between the <head> and </head>

<style type="text/css" media="print">
<!-- CSS Script that removes the whole division when printing -->
.DoNotPrint {
	display: none;
}
<!-- CSS Script that removes textarea and textbox borders when printing -->
.noborder {
	border : 0px;
	background: transparent;
	scrollbar-3dlight-color: transparent;
	scrollbar-3dlight-color: transparent;
	scrollbar-arrow-color: transparent;
	scrollbar-base-color: transparent;
	scrollbar-darkshadow-color: transparent;
	scrollbar-face-color: transparent;
	scrollbar-highlight-color: transparent;
	scrollbar-shadow-color: transparent;
	scrollbar-track-color: transparent;
	background: transparent;
	overflow: hidden;
}
</style>

2. To remove a whole division (i.e. everything between a <DIV> and </DIV>) when printing, add class="DoNotPrint" as an attribute in the opening tag of <div>. For example:

<form method="post" action="" name="FormName">
<!--  put all the form inputs under here-->


<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
	<tr>
		<td>
			Subject: <input name="subject" size="40" type="text">
			<input value="Submit" name="SubmitButton" type="submit">
			<input value="Reset" name="ResetButton" type="reset">
			<input value="Print" name="PrintButton" type="button" onclick="window.print()">
			<input value="Print and Submit" name="PrintSubmitButton" type="button" onClick="window.print(); document.FormName.submit()">
			</td>
	</tr>
</table>
</div>
</form>

3. To remove the outline of an input box when printing, add class="noborder" as an attribute in the <input>. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;">
</div>

Pre-filling an input box with your customized value

Single-line text input:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;" value="Substitute your pre-filled text here" >
</div>

Multi-line text input:

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;"> Substitute your pre-filled text here </textarea>
</div>

Checkboxes

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="CheckboxName" type="checkbox" checked>
</div>

Radio Buttons

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="RadioName" type="radio" value="value1" checked >
</div>
<div style="position: absolute; left: 100px; top: 110px;">
        <input name="RadioName" type="radio" value="value2">
</div>

Pre-checking the gender checkboxes in some forms

This one is a bit tricky, you'll have to do a few different things

1. Put the following in between <head> and </head> 
<!-- Pre-checking Gender script -->
<script type="text/javascript" language="javascript">
function checkGender(){
	if (document.getElementById('PatientGender').value == 'M'){
		document.getElementById('Male').checked = true;
	}else if (document.getElementById('PatientGender').value == 'F'){
		document.getElementById('Female').checked = true;
	}
}
</script>

2. Put onload="checkGender();" within the opening <body> tag

<body onload="checkGender();">

3. Put the following with the other input boxes within the <form></form>

<div style="position:absolute; left:100px; top: 100px;">
	<input name="Male" id="Male" type="checkbox" class="noborder">
</div>
<div style="position:absolute; left:110px; top: 100px;">
	<input name="Female" id="Female" type="checkbox" class="noborder">
</div>
<input name="PatientGender" id="PatientGender" type="hidden" oscarDB=sex >

To maximize the e-form window when it opens

Put the following between the <head> and </head>

<!-- ---Script to maximize window on loading --->
<script language="JavaScript">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<!----------End maximizing window script------------------------------------------------------->

Customizing fonts in the input fields

Put the following between the <head></head>

<style type="text/css">
.style1 {
		font-family: arial, sans-serif;
		font-size: 12px;
		font-weight: normal;
	}
</style>

For more styling, check out the css fonts page at W3schools.com

Insert class="style1" as an attribute into the <tag> that you want to customize the text. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="style1" style="width: 100px;">
</div>

If you want to apply multiple styles to the same element, just separate the classes by a space. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder style1" style="width: 100px;">
</div>

Uploading it onto the server

Almost done! Make sure you save the file first.

Upload your e-form image file onto OSCAR first:

  1. Click on "Admin"
  2. Under "E-Forms", click on "Upload an Image"
  3. Browse to your file, and click "Upload"

Now upload your html file.

  1. Under "E-forms", click on "Upload a Form"
  2. Type in the "Form name", and "Additional Information"
  3. Under "Filename", browse to you e-form file
  4. Click on "Upload"

Once the file is uploaded, make sure you add the ${oscar_image_path} back into the <img> tag

<div style="position: absolute; left: 10px; top: 10px;" >
	<img src="${oscar_image_path}imagename.png" width="750">
</div >
<!-- You can remove ${oscar_image_path} as you develop the form, but make sure you put it back before uploading to OSCAR otherwise the image wouldn't show. -->
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in Windows, but not in OSCAR because it's based on a Linux platform -->

That's it! Now you can make your own e-form for your office!

Just a few reminders:

Prepared by Shelter Lee for the BC OSCAR user group meeting on April 11, 2008