Insist on Open Source
Document Actions
eForm User's Guide
by
plone
—
last modified
2007-06-18 14:31
eForm User's Guide
Size 11.5 kB - File type text/html
Click here to get the file
File contents
<html>
<head>
<title>OSCAR eForms Guide</title>
<style type="text/css">
div.bodytext {
font-family: Sans Serif;
font-size: 14;
}
div.code {
font-family: Courier;
font-size: 14;
background: #F5F5F5;
margin-left: 40;
}
</style>
</head>
<body>
<center><h3>OSCAR (Open Source Clinical Application Resource)<h3></center>
<center><h4>Making E-Forms in HTML</h4></center>
<div class="bodytext" style="margin-top: 10">
<p>Oscar is a set of Clinic Applications, Clinic Resources,
and <br>
electronic patient records, developed using Open Source Tools. <br>
Oscar facilitates Clinical Decision Support and Evidence Based
Medicine <br>
<br>
Licence for OSCAR software<br>
This software is copyright 漏 2001-2004 McMaster University. <br>
You can redistribute it and/or modify it under the terms of
the <br>
GNU General Public License version 2 as published by the Free <br>
Software Foundation. A copy of this licence follows. This <br>
program is distributed in the hope that it will be useful, <br>
but WITHOUT ANY WARRANTY; without even the implied warranty of <br>
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the <br>
GNU General Public License below for more details. <br>
<br>
This software was created under contract to McMaster
University. <br>
<br>
To purchase support or enhancements for this software, contact:</p>
<p>Department of Family Medicine <br>
McMaster University <br>
1200 Main Street West.<br>
Hamilton, Ontario<br>
Canada L8N 3Z5<br>
<br>
Email: Dr. David H Chan <<a
href="mailto:dchan@mcmaster.ca">dchan@mcmaster.ca</a>><br>
WWW: <a
href="http://www.oscarhome.org/">http://www.oscarhome.org/</a></p>
<p>
<h3>Instructions for creating e-forms through HTML<br/>
<font size="2"><i>Note: If you are new to HTML it
is easier to create forms using an HTML editor such as Frontpage or
Dreamweaver. <a href="http://67.69.12.117:8080/oscarResource/Support/eDocs%20-%20eForms">Here</a>
is the documentation for creating e-forms through HTML
editors as well as instructions on how to upload a finished form. In this guide it is assumed that you have basic knowledge of HTML and web design.</i></font></h3>
</DIV>
<div class="bodytext" style="margin-top: 10px">
<h4>Blank EForm</h4>
Every eform should have the same html elements as any other webpage, which means that the blank eform page should look like this:
<div class="code" style="margin-left: 40; width: 400;">
<html><br/>
<head><br/>
</head><br/>
<body><br/>
</body><br/>
</html><br/>
</div>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>CSS</h4>
Form's designer may include his/her own CSS style sheets to fit the intended look. However, in addition to those, the following CSS class hides the borders around input fields and textareas generated by the browser when the user prints the form. The class is called "nodisplay", which must be enclosed by the <head> </head> tags and <style type="text/css" media="print"> </style> as illustrated here:
<div class="code" style="width: 400;">
<head><br/>
<style type="text/css" media="print"><br/>
td.nodisplay {<br/>
display:none;<br/>
}<br/>
input.nodisplay {<br/>
border: 0px;<br/>
}<br/>
textarea.nodisplay {<br/>
scrollbar-3dlight-color: #ffffff;<br/>
scrollbar-arrow-color: #ffffff;<br/>
scrollbar-base-color: #ffffff;<br/>
scrollbar-darkshadow-color: #ffffff;<br/>
scrollbar-face-color: #ffffff;<br/>
scrollbar-highlight-color: #ffffff;<br/>
scrollbar-shadow-color: #ffffff;<br/>
scrollbar-track-color: #ffffff;<br/>
border: 0px;<br/>
}<br/>
</style><br/>
</head><br/>
</div>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>Form Tag</h4>
The <form> tag should be enclosed by the <body> tags, and it is usually the first element in the body of the html page. It is in best practice to keep the <form> tag clear of attributes unless certain javascript or CSS must be associated with it. When required, OSCAR will insert the action="...", name="...", and method="..." in the form tag and remove any pre-existing action/name/method attributes. If more than one form is required on the page, OSCAR will autofill and process the first <form> tag that's encountered on the page. The <input type="submit"> element should be within the <form> </form> tags. The subject input field is not mandatory, but it is usually included to give the user capability to add extra text to help identify the form in the future. It is good practice to put the submit, reset, input subject, and print tags in a table where the table column is a member of the "nodisplay" class because those buttons and text fields are usually not indened to be shown on the printed eform. The following is an example of the basic body of an eform:
<div class="code">
<body><br/>
<form><br/>
<!-- INPUT FIELDS AND OTHER FORM CONTENT HERE --><br/>
<table><br/>
<tr><br/>
<td class="nodisplay"><br/>
Subject: <input type="text" name="subject" size="40"><br/>
<input type="submit" value="Save" name="submitForm1"><br/>
<input type="reset" value="Reset" name="resetForm1"><br/>
<input type="button" value="Print" onclick="javascript: window.print()"><br/>
</table><br/>
</form><br/>
</body><br/>
</div>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>Form Image</h4>
Usually an eform comes from a pre-existing printed form. In this case, the form designer may scan the form and position the input elements overtop the image. The image is then uploaded through the Admin screen as the form HTML is; however, the form must have a specific image path that points to the eForm images on the server. The image path is unique to each server, which is why OSCAR autofills the image path if the ${oscar_image_path} marker is used. This marker is replaced by the image path on the server. The following is an example of html that points to the image.gif that has been uploaded to eForm Images:
<div class="code" style="width: 500;">
<img src="${oscar_image_path}image.gif">
</div>
When using an image you could position the elements by enclosing the input fields with divs. In this particular example, the top-left corner of the text field will be placed at coordinates (5,20) ((x,y) coordinate system).
<div class="code">
<div style="position: absolute; left: 5px; top: 20px;"><br/>
<input type="text" name="field1" class="nodisplay"><br/>
</div><br/>
</div>
To help position the text fields around the image, the following javascript can be inserted in the head tags. It gives the current position of the mouse pointer, which is a valuable tool that can save lots of time: (Please note that this javascript is not compatible with the Internet Explorer browser.)
<div class="code">
<script type="text/javascript" language="javascript"><br/>
var isIE = document.all?true:false;<br/>
if (!isIE) document.captureEvents(Event.MOUSEMOVE);<br/>
document.onmousemove = getMousePosition;<br/>
var sy = 0;<br/>
var sx = 0;<br/>
function getMousePosition(e) {<br/>
var _x;<br/>
var _y;<br/>
if (!isIE) {<br/>
_x = e.pageX;<br/>
_y = e.pageY;<br/>
}<br/>
document.title = _x + " " + _y;<br/>
return true;<br/>
}<br/>
</script><br/>
</div>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>HTML Case Sensitivity</h4>
In an eForm html text nothing is case sensitive just like all other HTML; however, there are a few exceptions:
<ul>
<li>The value= attribute must either be all uppercase or all lowercase, which means the following tag would not have its input saved: <div class="code"><option Value="..."><option></div> regardless of its contents.</li>
<li>The text defined in the name="..." attribute is case sensitive, which means the following are two distinct fields: <div class="code"><input type="text" name="test"> and <input type="text" name="Test"></div></li>
<li>Just as in the name="..." attribute, the text in the value="..." attribute is also case sensitive.</div></li>
</ul>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>Database Access Points (DBAP)</h4>
One of the greatest features in the eforms module is the ability to access the database. To access the database an oscarDB=... marker must be used in the input tag. With the current version of eforms, the oscarDB marker was tested with the following input fields:
<ul>
<li><div class="code"><input type="text" oscarDB=...</div></li>
<li><div class="code"><input type="hidden" oscarDB=...</div></li>
<li><div class="code"><input type="password" oscarDB=...</div></li>
<li><div class="code"><select oscarDB=... (value="..." property in the <option> tags must match the database value)</div></li>
<li><div class="code"><textarea oscarDB=...</div></li>
</ul>
IMPORTANT NOTE: The oscarDB=... marker does not use quotes to enclose the text:
<ul>
<li>oscarDB=patient_name -CORRECT</li>
<li>oscarDB="patient_name" -INCORRECT (will not prefill)</li>
</ul>
The following fields will give the patient address in one line:
<div class="code">
<input type="patientAddr1" class="nodisplay" oscarDB=addressLine size="40"><br/>
<textarea type="patientAddr2" class="nodisplay" rows="3" cols="40" oscarDB=addressLine><br/>
</div>
The information on the types of oscarDB=... that come with OSCAR please visit <a href="dbapreference.html">here</a>
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>Duplicate Names</h4>
Please be aware that when two input fields have the same name, the first field's content will be saved in both fields.
</div>
<div class="bodytext" style="margin-top: 10px">
<h4>Conclusion</h4>
To summarize, <a href="eformbase.html">this is a basic eform</a>. You can right click the background and click "view source" to see the HTML code of the form.
</div>
<br/>
<br/>
<br/>
</body>
</html>