Personal tools
You are here: Home / OSCAR EMR 12.x / 2.0 Clinical Functions / 2.5 eForms / 2.5.6 How to create Multipage eForms

2.5.6 How to create Multipage eForms

Creating multipage eforms

METHOD TO CREATE MULTIPAGE FORMS

Forms sometimes extend past several pages.  There have been several ways the community has done this, and perhaps the most elegant solution is as below.  You can control the images so that they print one to a page using relative and absolute position.  A simplified 4 page form is displayed below with most non essential javascript and style removed for clarity.  Note that each page lies within a division whose position is relative and which has a forced page break.  Images are within the division and do not have a position, but can be expressly labeled as relative. Inputs within the page division have absolute positions.

<HTML>
<head>
</head>

<body>
<form method="post" action="" name="fourPageForm">

<div id="page1" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport1.png" style="position: relative; left: 0px; top: 0px; width:750px">
<input name="Patient_Name1" type="text" class="noborder" style="position:absolute; left:59px; top:153px; width:337px; height:34px;"  oscarDB=patient_nameF>
</div>
	
<div id="page2" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport2.png" width="750"> <!-- Because the img is within a div that has a relative position its not necessary to express the position  -->
<input name="Page2_1" type="text" class="noborder" style="position:absolute; left:64px; top:44px; width:228px; height:39px;" >
</div>

<div id="page3" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport3.png" width="750">
<input name="Page3_1" type="checkbox" class="largerCheckbox" style="position:absolute; left:65px; top:173px; ">
</div>

<div id="page4" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport4.png" width="750">
<textarea name="Page4_1" class="noborder" style="position:absolute; left:70px; top:740px; width:310px; height:70px;"  oscarDB=clinic_address></textarea>
</div>

<div class="DoNotPrint" style="position: absolute; top: 3900px; left: 10px;">

<table>
	<tr>
		<td class="subjectline">

			Description: <input name="subject" size="20" 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 & Submit" name="PrintSubmitButton" type="button" onClick="window.print();document.forms[0].submit()">

		</td>
	</tr>
</table>

</div>
</body>
</html>


2) Then do a Replace AutoName with PageOne with your favorite editor (this to prevent conflict with the id's on page 2)

<div id="page1">
<input name="PageOne1" id="PageOne1" type="checkbox" style="position:absolute; left:344px; top:287px; ">
</div>

3) Repeat step 1 with your second page.  You can use Shelters eForm Generator with the SECOND pages image to quickly locate the inputs boxes.   Cut and paste the images neame and the section of "AutoNames"  from the page that the eForm generator generates into the Long Term Care form between the page2 <div>

You are done.

ALTERNATE WAY TO CREATE A MULTI PAGE eFORM IN THREE QUICK STEPS


Use the Ontario application for Long Term Care form on the OSCUS site is an example/template.

Home   →   Information for OSCAR Users   →    EMR and Case Management Resources   →    eForms   →    eForms for download   →    Ontario Specific   →    Health Report for Admission to Long Term Care 2734-69

1) You can use Shelters eForm Generator with your first page's scanned image to quickly locate the inputs boxes.  Cut and paste the name of your image and the entire  "AutoNames"  section from the page that the eForm generator generates into the Long Term Care form's html (2PageForm.html) between the page1 <div> bookends as below.

<div id="page1" style="position: absolute; left: 0px; top: 0px;" >
       <img src="${oscar_image_path}Your_

Image_Name_Here.png" 
width="750">

</div >



<div id="page1">

<input name="AutoName1" id="AutoName1" type="checkbox"

style="position:absolute; left:344px; top:287px; ">

</div>

 

Document Actions