HTML Form Entry Module
- Former user (Deleted)
- Todd Anderson
- Mike Seaton
Implementer shortcuts: Getting Started | HTML Reference | Javascript Reference | Release Notes
Developer shortcuts: Technical Overview | Collaborating on Html Form Entry Using Git
Other examples: How to Embed HTML Form (generated by HTML Form Entry module) in a custom module
Related modules: HTML Form Entry UI Module
Overview
The HTML Form Entry allows anyone with basic HTML programming skills and a knowledge of the OpenMRS system to create forms. It is an alternative to the Infopath FormEntry module in many (but not all) cases.
The key point about writing forms with this module is that you only have to write HTML (with some special tags for things in the OpenMRS model) and the module will automatically "just know" what to do when the user clicks the submit button.
Currently a form submission creates one encounter for one patient.
Requirements
Versions in the 3.x line support OpenMRS 1.9+ and are maintenance only
Versions from 4.x support OpenMRS 2.1+ and are the mainline for new development and longer-term support
Comparison with Infopath FormEntry module
Advantages:
Forms are entered in-the-webapp. No need for installed software on the client.
You can review a form after entering it and have it look "just like you entered it"
Form submission immediately creates data (i.e. no waiting for queues to be processed.)
Disadvantages:
No WYSIWYG editor (though one is in the works)
Support for scripted behavior is limited (and requires Javascript programming)
Want to help improve this module? Contact @Mark Goodrich.
Download
Source code:
View/download source code for htmlformentry from github
Instructions
Download the module from the repository and install it.
Go to "Manage HTML Forms" under the administration page. (Make sure you are looking at the "HTML Form Entry" section, not the "Forms" section!)
Create a new form there (click "New HTML Form").
Fill out the necessary information; including the Name, Description, Version, and select the Encounter Type from the list. (When an HTML form is submitted, it will create this type of encounter.)
Save the form. Then it will open the page for editing the HTML Form.
Customize the HTML form to your specifications. Recent versions of the HTML Form Entry Module include a basic form that can be customized. For additional documentation on the HTML tags that are available, see the HTML Reference.
Screenshots
Creating new HTML Form
Adding a new or editing a form
Filling out a form
Note that if you put in an illegal value (per the constraints in the concept dictionary) it is immediately flagged.
Viewing a form
This looks pretty close to the initial entry.
Example HTML
Here's the code behind the screenshots
<htmlform>
<macros>
lightgrey=#e0e0e0
lightblue=#e0e0ff
</macros>
...
<table border="0" width="100%">
<tr valign="top">
<td width="50%">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="$lightgrey"><b>3. Anamnese</b></td>
</tr>
<tr>
<td>
Symptomes: <br/>
<obs conceptId="432" style="checkbox" labelText="Visite de routine, pas de probleme"/> <br/>
<obs conceptId="1364" rows="10" cols="60"/>
<br/><br/>
Conditions socioeconomiques:
<table><tr><td>
<obs conceptId="2861" answerConceptId="1309" answerLabel="necessite d'un emploi"/> <br/>
<obs conceptId="2861" answerConceptId="2862" answerLabel="faim"/> <br/>
<obs conceptId="2861" answerConceptId="2863" answerLabel="frais scolaire"/> <br/>
<obs conceptId="2861" answerConceptId="5622" answerLabel="autre"/>
</td><td>
<obs conceptId="2861" answerConceptId="2864" answerLabel="probleme avec maison"/> <br/>
<obs conceptId="2861" answerConceptId="2865" answerLabel="enterrement"/> <br/>
<obs conceptId="2861" answerConceptId="2866" answerLabel="inaccessibilite de l'eau"/>
</td></tr></table>
<br/>
<b>Examen Clinique:</b> <br/>
<table width="100%"><tr valign="top">
<td width="50%">
<obs conceptId="5088" labelText="Temp:"/> C <br/>
<obs conceptId="5087" labelText="Pouls:"/>/min <br/>
<obs conceptId="5089" labelText="Poids:"/>kg <br/>
<obs conceptId="2137" labelText="IMC:"/>kg/m2 <br/>
</td><td width="50%">
<obs conceptId="5242" labelText="FR:"/>/min <br/>
<obs conceptId="5085" labelText="TA:"/>
<obs conceptId="5086" labelText="/"/> <br/>
<obs conceptId="5090" labelText="Taille:"/>cm
</td>
</tr></table>
</td>
</tr>
</table>
</td>
<td width="50%">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="$lightgrey"><b>4. Anamnese systematique et depistage TBC:</b></td>
</tr>
<tr>
<td>
<table width="100%">
<obsgroup groupingConceptId="2162">
<tr>
<td>
<b>Toux:</b>
<obs conceptId="1734" answerConceptId="107" answerLabel="non"/>
<obs conceptId="1293" answerConceptId="107" answerLabel="oui"/>
</td>
<td colspan="2">
duree:
<obs conceptId="2160" labelText=""/>semaines
<obs conceptId="2161" labelText=""/>mois
</td>
</tr>
<tr>
<td></td>
<td><obs conceptId="1293" answerConceptId="2128" answerLabel="seche"/></td>
<td><obs conceptId="1293" answerConceptId="970" answerLabel="hemoptysie"/></td>
</tr>
<tr>
<td></td>
<td><obs conceptId="1293" answerConceptId="5957" answerLabel="productive"/></td>
<td><obs conceptId="1293" answerConceptId="5960" answerLabel="dyspnee"/></td>
</tr>
<tr>
<td></td>
<td colspan="2"><obs conceptId="1293" answerConceptId="136" answerLabel="douleur thoracique"/></td>
</tr>
</obsgroup>
<tr>
<td align="right"><b>Sueurs nocturnes</b></td>
<td colspan="2">
<obs conceptId="1734" answerConceptId="6029" answerLabel="non"/>
<obs conceptId="1293" answerConceptId="2164" answerLabel="moins de 3 semaines"/>
<obs conceptId="1293" answerConceptId="2163" answerLabel="plus de 3 semaines"/>
</td>
</tr>
<tr valign="top">
<td align="right"><b>Fievre</b></td>
<td colspan="2">
<obs conceptId="1734" answerConceptId="5945" answerLabel="non"/>
<obsgroup groupingConceptId="1292">
<obs conceptId="1293" answerConceptId="5945" answerLabel="oui,"/>
<br/>
duree:
<obs conceptId="1294" labelText=""/>jours
<obs conceptId="2160" labelText=""/>semaines
<obs conceptId="2161" labelText=""/>mois
</obsgroup>
</td>
</tr>
<tr>
<td align="right"><b>Perte de poids</b></td>
<td colspan="2">
<obs conceptId="1734" answerConceptId="832" answerLabel="non"/>
<obs conceptId="1293" answerConceptId="832" answerLabel="oui moins de 10%"/>
<obs conceptId="1293" answerConceptId="1352" answerLabel="oui plus de 10%"/>
</td>
</tr>
<tr>
<td align="right"><b>Contact TBC+:</b></td>
<td colspan="2"><obs conceptId="2133" style="no_yes" labelText=""/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<b>Resultat du depistage TBC</b> <obs conceptId="2136" labelText="" answerConceptIds="664,703" answerLabels="negatif,positif"/>
<br/><br/>
</td>
</tr>
<tr>
<td bgcolor="$lightgrey"><b>5. La sante sexuelle</b></td>
</tr>
<tr>
<td>
<table border="0">
<tr>
<td align="right">Sexuellement actif:</td>
<td><obs conceptId="2730" style="no_yes"/></td>
</tr>
<tr>
<td align="right">Dernieres regles</td>
<td><obs conceptId="968"/></td>
</tr>
<tr>
<td align="right">Planification familiale</td>
<td><obs conceptId="5271" style="no_yes"/></td>
</tr>
<tr>
<td align="right">Methode</td>
<td>
<obs conceptId="374" answerConceptId="1720" answerLabel="abstinence"/>
<obs conceptId="374" answerConceptId="780" answerLabel="contraceptifs oraux"/> <br/>
<obs conceptId="374" answerConceptId="190" answerLabel="condoms"/>
<obs conceptId="374" answerConceptId="5279" answerLabel="Depo-provera"/> <br/>
<obs conceptId="374" answerConceptId="5622" answerLabel="autres"/>
<obs conceptId="2877" labelText="(a specifier):"/>
</td>
</tr>
<tr>
<td align="right">Enceinte</td>
<td>
<obs conceptId="5272" answerConceptIds="1066,1065" answerLabels="non,oui"/>
<obs conceptId="5596" labelText="DPA"/>
</td>
</tr>
<tr>
<td align="right">Symptomes d'IST</td>
<td><obs conceptId="2731" size="40"/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
...
</htmlform>
Global Properties
htmlformentry.dateFormat: (added in HFE 1.9) lets you specify a date format (as defined in Java's SimpleDateFormat) that will be used to display all dates in HTML Forms. This will hold for entering new forms, and viewing/editing existing ones. (For example set the global property to "dd-MMM-yyyy" for an unambiguous date format like 31-Jan-2012.)
htmlformentry.showDateFormat: (added in HFE 1.9) set to true if you want static text for the date format to be displayed, else set to false. This text is displayed next to the date widgets as something like (dd/mm/yyyy)
htmlformentry.timeFormat: (added in HFE 2.6) lets you specify a time format (as defined in Java's SimpleDateFormat) that will be used to display all times in HTML Forms. Default is 24-hour time (e.g. 18:41). Setting this global property to "h:mm a" would change this to 6:41 PM.
Required Privileges
The following privileges may be necessary for various activities. It may be necessary to create them manually, and add them to your user's role.
[<=1.4] "Patient Dashboard - View Html Forms Section" <-- Required to view the HTML Forms tab on the patient dashboard
[>=1.5] "Form Entry" <-- Required to enter forms generally
"Add Encounters" <-- Required to submit a form
Upcoming features
To request more features, ask for them on developers@openmrs.org or create them as tickets in our JIRA site.
Flowsheets
Want to build an interface out of nothing but htmlforms? The HtmlFormFlowsheet module provides an easy way of combining html forms into a simple patient-dashboard-type configurable interface. Or, you can embed flowsheet tables directly into your existing htmlforms. This module is particularly useful if you are trying to model patient-based flowsheet type data (such as an MDRTB CAT-IV treatment card, or a chronic care flowsheet). See: the htmlformflowsheet module wiki.