Search the OSCAR Documentation
< All Topics
Print

eForm Magic – Advanced Examples

UpdatedApril 5, 2024
By Peter Hutten-CzapskiEarl Wertheimer

Code examples

For most end users the eForm Generator suffices for their needs.  However for advanced users familiar with coding who want to add or tweak features here are some examples of “fancy” eForm coding suitable for boilerplate cut and pasting.  For more basic instructions for manual eForm generation see  https://oscargalaxy.org/knowledge-base/creating-eforms-from-scratch-eforms-html-tutorial/

These code snippets have been based on the work of many many individuals collaborating and innovating as the OSCAR community.

Autocomplete Text Boxes

You can provide autocomplete options from a predefined list to both increase speed and accuracy for eForm completion.  Important bits for the code compatibility are referencing internal jQuery and jQuery ui versions that are present in all three OSCAR 19, Open OSP and OscarPro in the <head></head> block

<script src="../js/jquery-1.12.3.js"></script>
<link href="../js/jquery_css/smoothness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
<script src="../js/jquery-ui-1.10.2.custom.min.js"></script>

Full details of the options exist at https://jqueryui.com/autocomplete/

The quick and dirty is to set up an javascript array for subsequent sourcing of options for the autocomplete initialization thusly:

<script>
var tests=["Adenovirus (virus detection only)", "Antimicrobial Susceptibility - Bacteria"]
$(document).ready(function() {
        $("#test1").autocomplete( {
            source: tests
        });
});
</script>

don’t forget the matching element later in the <form></form>

<input name="test1" id="test1" type="text" class="noborder" style="position:absolute; left:415px; top:608px; width:291px; height:21px; " >

The Ontario General Public Health eForm https://oscargalaxy.org/download/ontario-general-public-health-eform/ demonstrates “universal” application of the the autocomplete feature which allows for autocompletion of any of the 93 tests that Ontario Public Health provides for each of the “test” entry text boxes.

Copy to Encounter

Its often useful to copy a summary to the encounter. 

function copyToEncounter(text) {
	  try {
		if( window.parent.opener.document.forms["caseManagementEntryForm"] != undefined ) {
			window.parent.opener.pasteToEncounterNote(text);
		  }else if( window.parent.opener.document.encForm != undefined ){
			window.parent.opener.document.encForm.enTextarea.value = window.parent.opener.document.encForm.enTextarea.value + text;
		  }else if( window.parent.opener.document.getElementById(noteEditor) != undefined ){
			window.parent.opener.document.getElementById(noteEditor).value = window.parent.opener.document.getElementById(noteEditor).value + text;
		  }else if(window.parent.opener.parent.opener.document.forms["caseManagementEntryForm"] != undefined){
			  window.parent.opener.parent.opener.pasteToEncounterNote(text);
		  }else if( window.parent.opener.parent.opener.document.encForm != undefined ){
			window.parent.opener.parent.opener.document.encForm.enTextarea.value = window.parent.opener.parent.opener.document.encForm.enTextarea.value + text;
		  }else if( window.parent.opener.parent.opener.document.getElementById(noteEditor) != undefined ){
			window.parent.opener.parent.opener.document.getElementById(noteEditor).value = window.parent.opener.parent.opener.document.getElementById(noteEditor).value + text;
			}
	} catch(e) {
		alert(text + " could not be copied to the encounter note.");
	}
}

An example eform that uses this function to copy the ordered lab tests to the encounter is Ontario Lab v15

Validation

Simple Field Validation

Do you ever get a form sent back because its incomplete?  Add code to the eform so that all needed fields are identified and will turn off when filled.  The form depends on the pseudo class “invalid” style element.  Place this code in the <head></head> section to set all “required” elements to a red outline.

</style>
<style type="text/css" media="screen" >
.noborder {
    border: 1px solid #d2d2d2 !important;
}
input:invalid {
    background-color: ivory;
    border: none;
    outline: 1px solid red;
}
</style>

Then in the <form></form> section place elements with the required attribute such as

<input name="senses" id="senses_y" type="text" required>

When the form element gets input the red outline disappears indicating to the user that the requirement is met.  The Ontario Drivers Form uses this code extensively with some additional tweaks that will add or remove the required attribute depending on other form input (eg non snellen is not required if snellen is indicated)

<input name="snellen" id="snellen" type="text" class="Xbox" 
  style="position:absolute; left:392px; top:193px;" required 
  onmousedown="getElementById('nonsnellen').removeAttribute('required');">

Validation Of Text Based on X box

Not uncommonly there is a form where you check a box and then are expected to supply the “Other” text.  You can validate that with this snippit.  In the <head></head> block put the following script

<script>
function changeAndCheck(id) {
// Subsequent text field must be name of Xbox + _Text so Other and Other_Text
    var id2 = id + '_Text';
    // toggle required attribute of text field and report on if it is required - alert will appear if the field is required
    document.getElementById(id2).toggleAttribute('required');
    document.getElementById(id2).reportValidity();
}
</script>

And for the <form></form> you might have Interpreter as the Xbox id which on mouseup will set a required attribute for the id Interpreter_Text and on reportValidity fire the invalid event and alert the user that it is invalid.  If you are using this with the first technique (“Simple Field Validation”) where you highlight invalid inputs you can replace reportValidity() in the code above with checkValidity() which just fires the invalid event and outline the element.

<input name="Interpreter" id="Interpreter" type="text" class="Xbox" style="left:518px; top:332px;" onmouseup="changeAndCheck(this.id);" >
<input name="Interpreter_Text" id="Interpreter_Text" type="text" class="noborder" style="position:absolute; left:595px; top:345px; width:123px; " >

Validation of Yes Or No boxes

For eForms where there are 2 boxes to check (either Yes or No), the following code will ensure that only 1 box is checked. If Y is checked, the N box will be unchecked. Checking a box twice will erase the value. It uses a ‘YNBox’ class, 3 functions and 2 input fields.

<style type="text/css" >
.YNBox {
    box-sizing:border-box; width:16px; height:16px; border:1px solid black; padding:0px;
	font-family: Arial;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    text-align:center;
    background-color:white;
}
</style>

The scripts to flip the boxes are:

<script language="javascript">
function changeValue(x)
{
   if (document.getElementById(x).value == '')
	document.getElementById(x).value = 'X';
   else
	document.getElementById(x).value = '';
}
function displayKeyCode(evt,x)
{
   var charCode = (evt.which) ? evt.which : event.keyCode
   // any key press except tab will constitute a value change to the checkbox
   if (charCode != 9)
   {
	changeValue(x);
	return false;
   }
}
    // used to flip YN boxes
function ChkBoxYN(checkboxid,uncheckboxid) { 
    if(document.getElementById(checkboxid).value == 'X') { 
        document.getElementById(uncheckboxid).value = '';
    }
}
</script>

Then in the <form></form> section place elements with the required attribute such as

<input name="BoxY" id="BoxY" type="text" class="YNBox" onkeypress="javascript:return displayKeyCode(event,this.id);" onmousedown="changeValue(this.id); ChkBoxYN('BoxY', 'BoxN');">
<input name="BoxN" id="BoxN" type="text" class="YNBox" onkeypress="javascript:return displayKeyCode(event,this.id);" onmousedown="changeValue(this.id); ChkBoxYN('BoxN', 'BoxY');">

Not So Simple Form Validation

This form validation uses a jQuery plugin and checks the form elements for what you want, and will indicate a message next to the incorrect form element.  If you want to require any input at all use required attribute as above in simple validation.  This plugin uses data-validation-required-message attributes for display required validation error. The advantages of the plugin are

  • that custom validations can be done with a pattern attribute like pattern=”^[0-9]{10}$”
  • that error messages can be used to specify what you are looking for. 
  • that multiple error messages can apply.  For the pattern example use the data-validation-pattern-message=”must be a 10 digit number”

For a full list of supported validators see the plugin documentation at https://reactiveraven.github.io/jqBootstrapValidation/

NOTE: eForms do not necessarily handle every HTML5 input type that is used in the examples documentation.  It often is safer to write a pattern for a text input than depend on inputs of type email, number, date and so on to save properly in OSCAR.

First reference the jQuery and validation plugin and initialise the fields you want checked in <head></head>

<script src="../js/jquery-1.12.3.js"></script>
<script src="../js/jqBootstrapValidation-1.3.7.min.js"></script>

<script> $(function () { $(“input,select,textarea”).not(“[type=submit]”).jqBootstrapValidation(); } ); </script>

Finally add attributes to trigger the correct error.

    <div class="controls" style="position:absolute; left:92px; top:93px;">
      <input type="text" pattern="a.*z" data-validation-pattern-message="Must start with 'a' and end with 'z'!" name="some_text_field" >
      <p class="help-block">Must start with 'a' and end with 'z'</p>
    </div>
    <div class="controls" style="position:absolute; left:92px; top:193px;">
      <input type="text" name="some_field" required>
      <p class="help-block"></p>
    </div>

Ticklers generated by eForm

The eForm generator allows for eForms to set Ticklers to allow the loop to be closed on important lab results.  The following code is used.  Put the script in the <head> portion </head> and the inputs in the <form> portion </form>.

<!-- Tickler Support -->

<script language="javascript">
function setDate(weeks){
   var now = new Date();
   now.setDate(now.getDate() + weeks * 7);
   return (now.toISOString().substring(0,10));
}

function setAtickler(){
    var today = new Date().toISOString().slice(0, 10);
    var subject=( $('#subject').val() ? $('#subject').val() : 'test');
    var demographicNo = ($('#tickler_patient_id').val() ? $('#tickler_patient_id').val() : '-1'); // patient_id
    var taskAssignedTo = ($('#tickler_send_to').val() ? $('#tickler_send_to').val() : '-1'); // -1 is reserved for the system user
    var weeks = ($('#tickler_weeks').val() ? $('#tickler_weeks').val() : '6');
    var message = ($('#tickler_message').val() ? $('#tickler_message').val() : 'Check for results of '+subject+' ordered ' + today);
    var ticklerDate = setDate(weeks);
    var urgency = ($('#tickler_priority').val() ? $('#ticklerpriority').val() : 'Normal'); // case sensitive: Low Normal High
    var ticklerToSend = {};
    ticklerToSend.demographicNo = demographicNo;
    ticklerToSend.message = message;
    ticklerToSend.taskAssignedTo = taskAssignedTo;
    ticklerToSend.serviceDate = ticklerDate;
    ticklerToSend.priority = urgency;
    return $.ajax({
       type: 'POST',
       url: '../ws/rs/tickler/add',
       dataType:'json',
       contentType:'application/json',
       data: JSON.stringify(ticklerToSend)
    });
}
</script>

<input id="tickler_patient_id" type="hidden" oscarDB=patient_id>
<input id="tickler_send_to" type="hidden" oscarDB=doctor_provider_no>
<input id="tickler_weeks" type="hidden" value="6">
<input id="tickler_priority" type="hidden" value="Normal">

One example of the code in action is https://oscargalaxy.org/download/bc-pap-smear-requsition-2022/

From the eForm notes:  A tickler is generated to remind the user to ensure results are received.

Signatures

Automatic Signatures

This shows image of the current user’s signature.  This is a slight simplification of similar code provided by the eForm Generator.

In order for this to work, the user has to have a signature image file set in OSCAR 19 or OscarPro.  For other OSCARs the signature may need to be uploaded to eform images in the format consult_sig_111.png (replace 111 with the applicable user number) 

Add the following to <head> of the eForm:

<script language="javascript">
function SignForm() {
    var provNum = getElementById('current_user_id').value;
    document.getElementById('signature').src = "../eform/displayImage.do?imagefile=consult_sig_"+provNum+".png";
    document.getElementById('signature').alt= provNum;
}
</script>

Then add the function to onload:

<body onload="SignForm();">

Now all is left is to add in the body a hidden field for the current_user_id and an image field that initially is blank but will be replaced by the users signature image.

<img id="signature" name="signature" src="${oscar_image_path}BNK.png" width="150" height="25" style="position: absolute; left: 49px; top: 721px; z-index: 20">
<input type="hidden" id="current_user_id" name="current_user_id" oscardb=current_user_id>

You can change the width/height and position of where the signature image gets inserted by changing the bolded values.

Multiple Signature Options

The Postnatal Cytogenetics Lab Req eForm allows the user to select between using the signature image file , wet signature (drawing with mouse), or “Electronically Signed” for signature.  Similar code omitting the “Electronically Signed” option is used in the Disability Tax Credit (CRA T2201)

To start I would suggest referencing the newest jQuery currently available in OSCAR and all its major forks and the jSignature plugin.

<script src="../js/jquery-1.12.3.js"></script>
<script src="../share/javascript/jquery/jSignature.min.js"></script>

The following javascript handles the options

<script language="javascript" type="text/javascript">
/****************************
Signature functions - 1 signature
****************************/
jQuery(document).ready(function() {
	$("#CanvasSignature1").jSignature({'decor-color':'rgba(255, 255, 255, 0.0)'})
})

function saveSig() {
	var $sig=$("#CanvasSignature1");
	var datapair=new Array();
	datapair=$sig.jSignature("getData","base30");
	document.getElementById("StoreSignature1").value=datapair.join(",");
}

function clearSig() {
	$("#CanvasSignature1").jSignature("reset");
}

function loadSig() {
	var $sig=$("#CanvasSignature1");
	var data
	data=document.getElementById("StoreSignature1").value;
	try {
		$sig.jSignature("setData","data:"+ data);
	} catch (e) {
		console.log("jSignature failed to load signature.")
	}
}

/****************************
Script to enable signature stamps. No Array needed.  
Signature assigned to ProviderNumber in the format:
consult_sig_+ProviderNumber+.png
****************************/
function SignForm() {
	var ProviderNumber = document.getElementById('current_user_id').value;
	document.getElementById('StampSignature').src = "../eform/displayImage.do?imagefile=consult_sig_"+ProviderNumber+".png";
}

/****************************
Script to add/remove signature
adapts to signature type
****************************/  
function AddSig(id) {
	if (id == 'Wet') {
		var id2 = "CanvasSignature1";
		var Cl_Name = "sig";}
	else if (id == 'Stamp'){
		SignForm();
		var id2 = "Signature_Stamp" ;
		var Cl_Name = "Show";}
	else {
		var id2 = "Signature_Electronic" ;
		var Cl_Name = "Show";}
	document.getElementById(id2).className = Cl_Name ;
	id3 = ["CanvasSignature1", "Signature_Stamp", "Signature_Electronic"];
	for ( i=0; i<id3.length; i++ ){
		var SigName = id3[i];
		if (SigName != id2){
		document.getElementById(SigName).className = 'Hide'; }
		}
		id4 = ["Wet", "Stamp", "Electronic"];
		for ( j=0; j<id4.length; j++ ){
		var SigName2 = id4[j];
		if (SigName2 != id){
		document.getElementById(SigName2).checked = false ;}
			}
		document.getElementById('SignatureChoice').value = id ;
}
		
function removeSig(id) {
	if (id == "Wet") {
		var id2 = "CanvasSignature1";}
	else {
		var id2 = ("Signature_" + id); }
	document.getElementById(id2).className = 'Hide';
	document.getElementById('SignatureChoice').value = 'None';
}

/****************************
Script to load None signature option
****************************/
function Add_None() {
	document.getElementById('CanvasSignature1').className = 'Hide';
	document.getElementById('Signature_Stamp').className = 'Hide';
	document.getElementById('Signature_Electronic').className = 'Hide';
}

/****************************
Script to reload signature option selected on submit
****************************/
function reloadSignature() {
	// show chosen signature format on submit: e.g.  Wet, Stamp, Electronic, None
	var chosenSig = document.getElementById('SignatureChoice').value;
	document.getElementById(chosenSig).checked = true;
	if (chosenSig === 'Stamp' || chosenSig === 'Wet' || chosenSig === 'Electronic' ) {
		AddSig(chosenSig);
	} else if (chosenSig === 'None') {
		Add_None();
	}
}
</script>

Finally you have some divs for the signature and control buttons to control the options for signature

<!-- Signature Wet Script -->
<div id="CanvasSignature1" class="sig" style="position:absolute; left:20px; top:765px; width:290px; height:30px;"></div>
<!-- Signature Stamp -->
<div id="Signature_Stamp" class="Hide" style="position:absolute; left:20px; top:765px;">
	<img id="StampSignature" src="" style="width:130px; height:30px;" />
</div>
<!-- Signature Electronic -->
<span id="Signature_Electronic" class="Hide" style="position:absolute; left:20px; top:765px; font-size:16px;"><b><i>&ldquo;Electronically signed&rdquo;</i></b></span>
<!-- Signature Control -->
<div id="signatureControl" class="DoNotPrint" style="position:absolute; left:730px; top:730px;">
	<input name="Stamp" id="Stamp" type="checkbox" class="DoNotPrint" style="position:absolute; left:0px; top:0px; color:#26374a;"
	onclick="
	document.getElementById('Wet').checked = false;
	if (this.checked == true) { 
		AddSig(this.id);
	} else {
		removeSig(this.id);
	}" />
	<span class="DoNotPrint" style="position:absolute; left:25px; top:3px; width:80px; font-size:12px; color:#26374a;">Stamp</span>

	<input name="Wet" id="Wet" type="checkbox" class="DoNotPrint" style="position:absolute; left:0px; top:20px; color:#26374a;"
		onclick="
			document.getElementById('Stamp').checked = false;
			if (this.checked == true) {
				AddSig(this.id);
			} else {
				removeSig(this.id);
			}" />
	<span class="DoNotPrint" style="position:absolute; left:25px; top:23px; width:150px; font-size:12px; color:#26374a;">Wet</span>
	<input name="ClearButton" id="ClearButton" type="button" class="DoNotPrint" style="position:absolute; left:55px; top:23px; font-size:12px; color:#3d6e84;" onclick="clearSig();" value="Clear Sig" /> 

	<input name="Electronic" id="Electronic" type="checkbox" class="DoNotPrint" style="position:absolute; left:0px; top:40px; color:#26374a;"
	onclick="
	document.getElementById('Wet').checked = false;
	if (this.checked == true) {
		AddSig(this.id);
	} else {
		removeSig(this.id);
	}" />
	<span class="DoNotPrint" style="position:absolute; left:25px; top:43px; width:80px; font-size:12px; color:#26374a;">Electronic</span>
</div>

You can also adjust the signature box size by using the height and width parameters:
$(“#CanvasSignature1”).jSignature({‘decor-color’:’rgba(255, 255, 255, 0.0)’, height: 70, width: 430 })

Thats it.

Metric Conversion and BMI

In many OSCAR forms a purple highlighted field can be double clicked for conversion.  This is accomplished by something like the following

<input type="text" name="wt" onDblClick="wtEnglish2Metric(this)"
 title="Enter a value in pounds(lbs) then double click to convert to kilograms(kg)"> 

<input type="text" name="ht" onDblClick="htEnglish2Metric(this)"
 title="Enter a value as feet and inches in the format ft'in"+'"'+" then double click to convert to centimeters (cm)">

<input type="text" name="bmi" onDblClick="calcBMIMetric(this,document.forms[0].wt,document.forms[0].ht)"
 title="Double click to calculate BMI">

To finish up put the following functions into the head block

<script>

function isNumber(ss){
	var s = ss.value;
    var i;
    for (i = 0; i < s.length; i++){
        // Check that current character is number.
        var c = s.charAt(i);
		if (c == '.') {
			continue;
		} else if (((c < "0") || (c > "9"))) {
            alert('Invalid '+s+' in field ' + ss.name);
            ss.focus();
             return false;
		}
    }
    // All characters are numbers.
    return true;
}

function wtEnglish2Metric(obj) {
	if(isNumber(obj) ) {
		weight = obj.value;
		weightM = Math.round(weight * 10 * 0.4536) / 10 ;
		if(confirm("Are you sure you want to change " + weight + " pounds to " + weightM +"kg?") ) {
			obj.value = weightM;
		}
	}
}

function htEnglish2Metric(obj) {
	height = obj.value;
	if(height.length > 1 && height.indexOf("'") > 0 ) {
		feet = height.substring(0, height.indexOf("'"));
		inch = height.substring(height.indexOf("'"));
		if(inch.length == 1) {
			inch = 0;
		} else {
			inch = inch.charAt(inch.length-1)=='"' ? inch.substring(0, inch.length-1) : inch;
			inch = inch.substring(1);
		}
			height = Math.round((feet * 30.48 + inch * 2.54) * 10) / 10 ;
			if(confirm("Are you sure you want to change " + feet + " feet " + inch + " inch(es) to " + height +"cm?") ) {
				obj.value = height;
			}
	}
}

function calcBMIMetric(obj,wtobj,htobj) {
   	if(isNumber(document.forms[0].c_ppwt) && isNumber(document.forms[0].c_ppht)) {
   		weight = wtobj.value / 1;
   		height = htobj.value / 100;
   		if(weight!="" && weight!="0" && height!="" && height!="0") {
   			obj.value = Math.round(weight * 10 / height / height) / 10;
   		} else obj.value = '0.0';
   	}
}

</script>

Faxing

Adding fax capability

Faxing is set up by default by OSCAR 19 which causes a directory to fill with faxes and associated fax numbers. You do need to activate a fax delivery script or program for the files to be picked up and actually fax. The following describes the code generated by the eForm generator for activating the faxing ability in eForms.

Add the following between the <head></head>
Note: if you already have jQuery added, then you can omit the first 3 lines shown below.

<script src="../js/jquery-1.12.3.js"></script>

<script type="text/javascript" src="${oscar_javascript_path}eforms/faxControl.js"></script>
<script language="javascript" type="text/javascript" src="${oscar_javascript_path}eforms/printControl.js"></script>

This will show the fax controls in the eForm:

Add a one-touch Submit & Fax to destination button

You must already have added the code above (“Adding fax capability”) for the following to work.

If you want to add a button that will submit the eForm and also fax it to a specific fax number, add the code bolded shown below just above the Subject line:

Note: where it says value=”Submit & Fax to Xray Department” you put the name of the place you are faxing to. In the value=’555-555-5555′; you put the fax number where you want the eForm to be faxed once the one-touch Submit & Fax button is pressed.

<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
   <tr>
     <td>
        <input type="button" value="Submit & Fax to Xray Department"
        onClick="document.getElementById('otherFaxInput').value='555-555-5555';
        AddOtherFax();submitFaxButtonAjax(true);  ">
        <br>
        <br>
	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>

MISC

Copy on Click

Sometimes there are parts of the eForm that you want to copy.  You can select and copy but you risk capturing unwanted white space.  Here are two different ways to do this in Code:


<script>
	function copyToClipboard(id) {
	    var range = document.createRange();
	    range.selectNode(document.getElementById(id));
	    window.getSelection().removeAllRanges(); // clear current selection
	    window.getSelection().addRange(range); // to select text
	    document.execCommand("copy");
	    window.getSelection().removeAllRanges();// to deselect
	}
</script>

<span id="fax" onclick="copyToClipboard(this.id)" title="click to copy">
555-555-1234</span>

Note that the second way below has a jQuery dependency but works well with inputs


<script>
    /****************************
        Copy to Clipboard
    ****************************/
    $(document).ready(function() {
        var y = document.getElementsByClassName('copyable');
        $(y).click(function() {
            this.select();
            document.execCommand('copy');
            $(this).css('background-color', 'pink').fadeIn("slow");
        })
    }) 
</script>

And in the form block


<input name="Copy_Fax" id="Copy_Fax1" type="text" class="copyable DoNotPrint" 
style="position:absolute; cursor:pointer; left:499px; top:100px; width:100px; font-size:14px; font-weight:bold; border:0px; background:white;" 
title="click to copy" value="555-555-5555">

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>

Circling a Span

You can circle a span such as demonstrated in oscargalaxy.org/download/fraser-gastroenterology-referral with the following

In the header:

<style>
	.circle_box{
		position:absolute; 
		height: 10px;
		border:0px solid;
		border-radius: 10px;
		cursor:pointer; 
		background: transparent;
	}
	.circle_box:hover {
		outline: 2px solid #a4f4f2;
		opacity: 0.5;
	}
	.circle_box:active {
		outline: 2px solid #a4f4f2;
		opacity: 1;
	}
</style>
<code>
function startUp(){			
	// Recircle circled elements
	$('.circle_box').each(function(i, obj) {
    	if (document.getElementById(obj.id + "_circled").value == "1")
    		obj.style.borderWidth = '2px';
		});
}
function change_border(x) {
	//works to change function of circle_boxes to radio_boxes when the id of the radiobox is passed as x and is named in the convention name_X where X is a numeric value that appears in the string defined in scales
	var scales = ["1", 	"2"   ];
	var partA = x.substring(0, x.indexOf("_"));
	var i = x.substring(x.indexOf("_"));
	var j = i.substr(1);

	for (var n in scales) {
		if ( j == scales[n]) {
			for (var m in scales){
				if (m != n) { document.getElementById(partA+"_"+scales[m]+"_circled").value = '0';  document.getElementById(partA+"_"+scales[m]).style.borderWidth = '0px' }
			}
		}
	}
change_border2(x);
	return false;		
}	
function change_border2(x) {
//individual circle_box using the id of the circlebox 
	if (document.getElementById(x).style.borderWidth == '0px') {
		document.getElementById(x).style.borderWidth = '2px';
			document.getElementById(x + "_circled").value = "1";
		} else {
			document.getElementById(x).style.borderWidth = '0px';
			document.getElementById(x + "_circled").value = "0";
		}
	}
	
</script>
in the body
– hidden inputs to retain whether something is circled or not:
– then the actual inputs (also has a required function – if you circle something then you have to fill out the descriptive field):

<!-- Hidden Inputs -->
<input type="hidden" name="GI_1_circled" id="GI_1_circled" />
<input type="hidden" name="GI_2_circled" id="GI_2_circled" />
<input type="hidden" name="Scope_1_circled" id="Scope_1_circled" />
<input type="hidden" name="Scope_2_circled" id="Scope_2_circled" />

<span name="GI_1" id="GI_1" type="text" class=" circle_box" style="left:50px; top:317px; width:15px; border:0px solid;"  onClick="change_border(this.id); document.getElementById('Gastroenterologist').required=true; document.forms['FormName'].reportValidity();"></span>
<span name="GI_2" id="GI_2" type="text" class=" circle_box" style="left:359px; top:317px; width:13px; border:0px solid;"  onClick="change_border(this.id); document.getElementById('Gastroenterologist').required=false; document.forms['FormName'].reportValidity();"></span>

<span name="Scope_1" id="Scope_1" type="text" class=" circle_box" style="left:50px; top:351px; width:15px; border:0px solid;"  onClick="change_border(this.id);"></span>
<span name="Scope_2" id="Scope_2" type="text" class=" circle_box" style="left:359px; top:351px; width:13px; border:0px solid;"  onClick="change_border(this.id);"></span>

 

Sniffing Data

Date Joined

A specialist will often need to reference the date that the patient was referred, however there is no way (short of writing a custom apconfig.xml!) to get that information from a eForm database tag. But we often can find the information in OSCAR if we sniff for it!

<!---  Script to get "Date Joined" from the demographic to use as the date referred --->
<script>

    function getDateJoined() {
        xmlhttp = new XMLHttpRequest();
        var pathArray = window.location.href;
        var mydemographic = /demographic_no=(.*?)&appointment/;
        var demoNumber = (mydemographic.exec(pathArray))[1];
        var myURL = /^(.*?)\/eform/;
        var URL = (myURL.exec(pathArray))[1];
        var newURL = URL + "/demographic/demographiccontrol.jsp?demographic_no=" + demoNumber + "&displaymode=edit&dboperation=search_detail";
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var str = xmlhttp.responseText;
                if (!str) {
                    return;
                }
                var demoArray = /Date Joined:<\/span>\s*<span class="info">([0-9,-]+)<\/span>/g;
                var demo = (demoArray.exec(str))[1];
                getDemographicById('dateJoined').value = demo;

            }
        }
        xmlhttp.open("GET", newURL, false);
        xmlhttp.send();
    } 
</script>

Another Date Format

The date format from the oscarDB=today tag is yyyy-mm-dd.  However what if you want dd-mm-yyyy?  Here is a way with options for numeric or text month (current example is for numeric month with text month commented out)

NOTE that this code uses a hidden input to set a flag on save so that the date is not re-parsed (and scrambled!) when the eForm is reopened after save.  This code uses a few jQuery lines so either ensure that jQuery is referenced before this code block, or replace the selector with vanilla getElementById().

For the <head> block. 


<script>
    function submission() { // requires type="submit" in submit button input to allow for validity testing
        setFlag();
        saveSig();
        releaseDirtyFlag();
    }

function setFlag() {
    // indicate that the form has been submitted
    if (document.getElementById("newForm").value == 'True')
        document.getElementById("newForm").value = 'False';
}

function setDefaults() {
    // check the newform flag to ensure this is the initial load of the form
    if (document.getElementById("newForm").value == 'True') {

        parseDate('today', 0, 1, 2, '-', '/');

    } else { // actions if eForm is reopened
    }
}


/****************************
Create date in dd/mm/yyyy format;
Oscar default is yyyy-mm-dd
****************************/

function parseDate(id, x, y, z, D, d) {
    // Now included code to remove time from dates
    // Change date field to dd/mmm/yyyy format
    //The element that you want to change is passed via the id
    // If the initial order is  YYYY  MM  DD then x should be 0,y should be 1, and z should be 2
    // If the initial order is  DD  MM and YYYY then x should be 2,y should be 1, and z should be 0
    // Delimiter (between the digits for day month and year) is passed as D - usually either a "-"  or a "/"
    // Output Delimiter (between the digits for day month and year) is passed as d - usually either a "-"  or a "/"
    // Get the date
    var fullMeasurementDate = $("#" + id).val();
    var fullDate = fullMeasurementDate.split(' ')[0];

    if (fullDate) {
        // Split the value
        var year = fullDate.split(D)[x];
        var monthNum = fullDate.split(D)[y];
        var monthNumArray = monthNum - 1;
        var day = fullDate.split(D)[z];
        // Convert Numeric Month to 3 letter month using toLocaleString
        var date = new Date(year, monthNumArray, day);
        var month = date.toLocaleString('default', {
            month: 'short'
        });
        var mixedDate = day + d + month + d + year;
        var numericDate = day + d + monthNum + d + year;
        // Show the fields on the page
        //  $("#" + id).val(mixedDate);
        $("#" + id).val(numericDate);
    } else {
        $("#" + id).attr("placeholder", "d/m/yyyy");
    }
}

</script>

For the <form> block


<input name = "today" id = "today" type = "text" class = "noborder"
style = "position:absolute; left:600px; top:300px; width:100px; "
oscarDB = today >

    <table> < tr > < td >
    <input type = "hidden" name = "newForm" id = "newForm" value = "True" >
    Subject: < input name = "subject" size = "40" type = "text" > < br >
    <input value = "Reset" name = "ResetButton" id = "ResetButton" type = "reset" style = "color:red;" onclick = "history.go(0);" / >
    <input value = "Print" name = "PrintButton" id = "PrintButton" type = "button" onclick = "printLetter();" / >
    <input value = "Submit" name = "SubmitButton" id = "SubmitButton" type = "submit" onclick = "submission();" / >
    </td></tr > < /table>

Reformatting Tags – Initialling a Form

As long as the source tags are in the form you can reformat them in code to populate a custom input
For the <head>:
inItials("initials");

function inItials(id) {
    // Use charAt() to get first and last initial of current user
    var FirstLast = document.getElementById("current_user_fname_lname").value;
    var LastFirst = document.getElementById("current_user").value;
    var F = FirstLast.charAt(0);
    var L = LastFirst.charAt(0);
    var Initials = ( F + "." + L + "." );
    document.getElementById(id).
    value = Initials;
}
in the body:

<input type = "hidden" name = "current_user_fname_lname" id = "current_user_fname_lname" oscarDB = current_user_fname_lname >
<input type = "hidden" name = "current_user" id = "current_user" oscarDB = current_user >
<input name="initials" id="initials" type="text" class=" noborder" style="width:35px; font-family:sans-serif; font-style:normal; font-weight:normal; font-size:14px; text-align:left; background-color:transparent;"  />

thats it

 

Tags:
Table of Contents