Human Genetics Unit Module

Link to the Git Hub : https://github.com/surangak/HguSriLanka

Human Genetics Module has two main factors when writing this wiki page. It has the module with all the support libraries as well as the HTML form as a separate segment.

Uploading the module

Checkout the code from git hub : https://github.com/surangak/HguSriLanka

go to the folder you checked out and go to the hgu folder. Open a terminal and run the following command

mvn clean install

Then go in to the omod/target/folder where you will find an file with an extension of .omod. Copy that and paste it in the app folder of your OpenMRS instance.

HTML form

HTML form was built to use with the new GUI of OpenMRS. First you need to create a HTML form in the OpenMRS using the code given in Git Hub : https://github.com/surangak/HguSriLanka/blob/master/hgu_form.html

The HTML form is similar to Vitals form and you can use the HTML form entry wiki to customize any requirement you need.

beginning of the HTML form you will find the following line

In the human genetics unit there is a tool to draw pedigrees of patients. That is a third party library which has been used inside the HTML form. The required libraries are in the hgu module and above line is to link those libraries.

Following is an example for a section tag

<legend>Clinicians Note</legend>

<h3>Clinicians Note</h3>

</p>

</fieldset>

</section>

and the above code would look like below in the form.

The important part to remember here is the "obs conceptid". Look and feel of the input box as well as the data format in the database are all decided on this id. You will have to create individual concepts in the concept dictionary for each input.

Guide lines on creating concepts : https://openmrs.atlassian.net/wiki/display/docs/Create+and+Edit+Concepts

You have to create concepts for each observation in the genetics form.

Above is an image where you can create a new concept. The most important attribute in this form is the Numeric type. You have select text for input which are texts. Below is an filled example

After filling the information press Save Concept button and you will be directed to the screen below.

Copy the Id and replace the Obs Conceptid id in the appropriate field set in the HTLM form

as for the above edit the line should like follows

this line stays in between fieldset tags.

Adding different Tests to the tests done list can be done changing the following line in the HTML form.

If you want to a new Test, make sure to add an answer as well as answer label as follows.

Major improvement in this HTML form was the embedment of the pedigree drawing tool. You can find it under the pedigree drawing tool.

Press on the Edit button to start drawing a new pedigree for the patient.

Link to the Drawing tool on Git Hub : https://github.com/briantwhite/JavaCodeFromSVN/tree/master/jsPedigrees

Small hack has been used to save the pedigree after drawing it. There is another hidden field as follows.

</div>

You need to create another concept (Text ) and set the number of that concept in the above code segment.

There are few important methods which are given from the pedigree drawing library. They can be invoked as follows.

window.setStateXML()

The above method takes in a saved pedigree drawing ( XML ) and redraw the pedigree tree on the canvas

window.getStateXML()

The above method gives the drawn pedigree as XML

window.pedexIsReady = function() {}

The above method is called when the jspedigree drawing tool has been loaded properly. You can write any command that you want it to be executed before any user starts interacting with the form.

var v = getValue("XML.value");

window.setStateXML(window.atob(v));

Above two lines are inside the pedexReady function. in the XML is the hidden field which has the previous pedigree drawing XML and that value has been loaded to the variable v. and that has value has been decoded from base 64 encoding and fed to the setStateXML() function to draw the pedigree.

There is an in built method in OpenMRS HTML module where you can execute a script before the validation or submission. We are using the submission check as follows

beforeValidation.push(function() {

var val = window.getStateXML();

val = window.btoa(val);

setValue("XML.value",val);

if (val == null || val == '') {

return false;

}

});

return true;

</script>

The variable val has been loaded with the XML value of the pedigree and that has been changed to base 64 encoded. The base 64 encoded value has been saved to the hidden variable XML.

Following segment defines the container for the jspedigree drawing tool

<legend>Pedigree Drawing Tool</legend>

<table>

<tr><td ><b>5.0 Family History</b> </td><td></td></tr>

<tr><td>5.2 Pedigree chart (Please draw a 3 generation pedigree and indicate affected members if known)</td><td></td></tr>

</table>

</fieldset>

</section>

</div>

Image Upload

This is one major feature which is still under construction at the time of writing this wiki page. Image upload works in the Old UI of OpenMRS but in the new UI it has to be fixed.

Above screen shot shows how it would look in the form. In order to have this feature you need to create a complex concept as follows.

You also can change the handle so it would allow you to upload pdfs, text files etc. Image Handler is for images.

After creating the complex concept you will get a page like below and copy and save the id so you can use that in the HTML form

<legend>Report Upload</legend>

<h3>Report Upload</h3>

</p>

</fieldset>

</section>