eForm From Scratch/Tweaking eForm Programming Tips
The purpose of this article is to give you a “copy and paste” tool to make your own eForms the advanced manual method (the easier and method is to use OSCAR’s built-in eForm generator). W3 Schools. will provide more documentation. For advanced features see https://oscargalaxy.org/knowledge-base/eform-magic-examples/
Basics
eForms are programmed using html and javascript. There are countless online resources for ways to tweak your eForms.
The basic skeleton of a webpage is as below:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>Copy and paste the above into a code editor such as Visual Studio Code
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 eForm 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 eForm, 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. -->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 eForm
You can temporarily delete the ${oscar_image_path} inside the <img> tag if you’re testing 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
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.
<!-- 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--------------------------------------------------------- -->Manual Field Alignment Refresh
If you add the following code <meta http-equiv=”refresh” content=”3″> near the top of your eForm, you will force the page to auto-refresh every 3 seconds. Now you can manually tweak the left and top pixel values, save the changes and view the result in a few seconds. Make sure you remove the line after you finish making your changes.
The Inputs
Rules:
- Each input needs a name. If not, oscar won’t remember it after you’ve submitted it
- Each input name has to be unique
- The input name cannot contain spaces or symbols
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
NOTE: checkboxes are rendered differently by every browser on every platform and at times are hard to see when faxed
X-Box
The X-Box is a replacement for the checkbox. Instead of a checkmark, we use a black outline with an X. If your xBox has 2 exclusive choices, such as [ ] Yes or [ ] No, you can use the following code to only allow a single choice:
<input name="FldNameY" id="FldNameY" type="text" class="Xbox" style="position:absolute; left:382px; top:580px; width:12px; height:12px;" onkeypress="javascript:return displayKeyCode(event,this.id);" onClick="document.FormName.FldNameN.value='';">
<input name="FldNameN" id="FldNameN" type="text" class="Xbox" style="position:absolute; left:435px; top:580px; width:12px; height:12px;" onkeypress="javascript:return displayKeyCode(event,this.id);" onClick="document.FormName.FldNameY.value='';">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
NOTE: unlike checkboxes and Xboxes the actual value of a eForm radio button is not preserved on save
Auto-populating input fields from the OSCAR database
A list of database info that you can auto-populate into eForms can be found here.
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 oscarDB database tag.
Some of the things you’ll need to do to make the eForm 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 eForms
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 eForm window when it opens
Put the following between the <head> and </head>
<script language="JavaScript">
top.window.moveTo(0,0);
top.window.resizeTo(screen.availWidth,screen.availHeight);
</script>To hide headers and footers on print
By default when you print a page, it will include the page’s “headers and footers”, and browsers will print the web address of the page you printed.
There are several reasons why you wouldn’t want headers and footers to show on the eForms you print.
For example, that prints your OSCAR’s link/IP address on the page, which isn’t normally something you’d want the public to know of.
You can add code to your eform (via eForm generator or the following) to prevent this (alternately you have to change each browsers printing settings!)
To have your printed eForms not show the headers and footers by default, add the following between the <head></head>
*NOTE: This snippet currently works fine on Chrome and Firefox. Other browsers ignore these settings and still print headers/footers and malforms the page. Chrome and Firefox are the recommended browsers for using OSCAR because others sometimes don’t display certain elements correctly (e.g. certain icons and css).
If you find that an extra page is being added to print, you may want to adjust the padding-top and padding-bottom settings below as necessary.
<style type="text/css" media="print">
@media print {
@page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 36px;
padding-bottom: 36px;
}
}
</style>Uploading it onto your OSCAR server
Almost done! Make sure you save the file first.
Upload your eForm image file onto OSCAR first:
- Click on “Administration”
- Under “Manage eForms”, click on “Upload an Image”
- Browse to your image file, and click “Upload”
Now upload your html file:
- Under “Manage eForms”, click on “Upload”
- Type in the “eForm name”, and “Additional Information”
- Click “Choose File”, browse to you eForm html file
- Click on “Upload”
Once the html 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 eForm, 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 eForm for your office!
Just a few reminders:
- Make sure you have a unique name for each input element
- The filenames and image names are case sensitive
Thanks to Adrian Starzynski who assembled and wrote most of this article.