Documentation

Wiki Spaces

Documentation
Projects
Resources

Get Help from Others

Q&A: Ask OpenMRS
Discussion: OpenMRS Talk
Real-Time: IRC Chat | Slack

Documentation

Page tree

Versions Compared

Old Version 10

changes.mady.by.user Unknown User (mogoodrich)

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (samuel34)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Implementer shortcuts: ?Getting Started, ?HTML Reference  |  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

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.

...

Currently a form submission creates one encounter for one patient.

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)
  • Behavior is not really programmable

Want to help improve this module? Contact ??~darius.

Download

Instructions

  1. Download the module from the repository and install it.
  2. Create a Form in OpenMRS via Manage Forms. You do not need to build the form schema. You cannot use an existing form schema from a prior InfoPath form (even if it's marked as retired) or it will not show up if using both Form Entry and HTML Form Entry. Ticket # 1967
  3. Go to Manage HTML Forms, create a new form there, point it at the desired Form in OpenMRS, and put in the HTML behind the form. HTML Reference

Screenshots

Filling out a form

Note that if you put in an illegal value (per the constraints in the concept dictionary) it is immediately flagged. Image Removed

Viewing a form

This looks pretty close to the initial entry. Image Removed

Example HTML

Here's the code behind the screenshots

...

Requirements

  • OpenMRS 1.6.3+, OpenMRS 1.7.2+, OpenMRS 1.8+, OpenMRS 1.9+
  • Note that although the module technically supports OpenMRS 1.7.2+, if you are running OpenMRS 1.7.x we strongly recommend upgrading to OpenMRS 1.8 as there may be some instability
  • If you are using OpenMRS 1.9+ you should also install the htmlformentry19ext module.

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 Unknown User (mogoodrich).

Download

Instructions

  1. Download the module from the repository and install it.
  2. Go to "Manage HTML Forms" under the administration page.   (Make sure you are looking at the "HTML Form Entry" section, not the "Forms" section!)
  3. Create a new form there (click "New HTML Form").
  4. 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.)
  5. Save the form.  Then it will open the page for editing the HTML Form.
  6. 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

Image Added

Adding a new or editing a form

Image Added

Filling out a form

Note that if you put in an illegal value (per the constraints in the concept dictionary) it is immediately flagged.

Image Added

Viewing a form

This looks pretty close to the initial entry.

Image Added

Example HTML

Here's the code behind the screenshots

Code Block
<htmlform>
<macros>
    lightgrey=#e0e0e0
    lightblue=#e0e0ff
</macros>
...
<table border="0" width="100%">
    <tr valign="top">
      <td width="50%">
         Conditions socioeconomiques:
<table width="100%" border="1" cellspacing="0" cellpadding="2">
            <tr>
  <table><tr><td>            <td bgcolor="$lightgrey"><b>3. Anamnese</b></td>
    <obs conceptId="2861" answerConceptId="1309" answerLabel="necessite d'un emploi"/> <br/>      </tr>
            <tr>
             <obs conceptId="2861" answerConceptId="2862" answerLabel="faim"/><td>
		 Symptomes: <br/>
                  <obs conceptId="2861432" answerConceptIdstyle="2863checkbox" answerLabellabelText="frais scolaire"/> <br/>
Visite de routine, pas de probleme"/> <br/>
                 <obs conceptId="28611364" answerConceptIdrows="562210" answerLabelcols="autre60"/>
                </td><td> <br/><br/>

                Conditions socioeconomiques:
      <obs conceptId="2861" answerConceptId="2864" answerLabel="probleme avec maison"/> <br/>          <table><tr><td>
                  <obs conceptId="2861" answerConceptId="28651309" answerLabel="enterrementnecessite d'un emploi"/> <br/>
                  <obs conceptId="2861" answerConceptId="28662862" answerLabel="faim"inaccessibilite de l'eau"/> <br/>
                  <obs conceptId="2861" answerConceptId="2863"  </td></tr></table>

		answerLabel="frais scolaire"/> <br/>
                <b>Examen Clinique:</b> <br/>
		<table width="100%"><tr valign="top">
		<td width="50%">
			 <obs conceptId="2861" answerConceptId="5622" answerLabel="autre"/>
                </td><td>
                  <obs conceptId="50882861" labelTextanswerConceptId="Temp:2864"/> C <br/>
			<obs conceptId="5087" labelText="Pouls:"/>/min answerLabel="probleme avec maison"/> <br/>
			
                  <obs conceptId="5089"2861" answerConceptId="2865" labelTextanswerLabel="Poids:enterrement"/>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>
		<                <obs conceptId="2861" answerConceptId="2866" answerLabel="inaccessibilite de l'eau"/>
                </td></tr></table>

		<br/>
            </td>             <b>Examen Clinique:</tr>
        </table>
      </td>
      b> <br/>
		<table width="100%"><tr valign="top">
		<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>
			<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>
           <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>
            </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"><obs conceptId="1293" answerConceptId="136" answerLabel="douleur thoracique"/></td>>
						duree:
						<obs conceptId="2160" labelText=""/>semaines
						<obs conceptId="2161" labelText=""/>mois
					</tr>td>
				</obsgroup>tr>
				<tr>
					<td align="right"><b>Sueurs nocturnes</b></<td></td>
					<td<td><obs colspanconceptId="21293">
 answerConceptId="2128" answerLabel="seche"/></td>
						<obs<td><obs conceptId="17341293" answerConceptId="6029970" answerLabel="non"/>
hemoptysie"/></td>
				</tr>
				<tr>
					<td></td>
		<obs			<td><obs conceptId="1293" answerConceptId="21645957" answerLabel="moins de 3 semaines"/>productive"/></td>
						<obs<td><obs conceptId="1293" answerConceptId="21635960" answerLabel="plus de 3 semaines"/>
					<dyspnee"/></td>
				</tr>
				<tr valign="top">
<tr>
					<td align="right"><b>Fievre</b></<td></td>
					<td colspan="2">
						<obs><obs conceptId="17341293" answerConceptId="5945136" answerLabel="nondouleur thoracique"/>></td>
						<obsgroup groupingConceptId="1292</tr>
				</obsgroup>
				<tr>
					<td align="right"><b>Sueurs nocturnes</b></td>
					<td colspan="2">
							<obs conceptId="12931734" answerConceptId="59456029" answerLabel="oui,non"/>
							<br/>
							duree:
							<obs conceptId="12941293" labelTextanswerConceptId="2164"/>jours
							<obs conceptId="2160" labelText=""/>semaines
	 answerLabel="moins de 3 semaines"/>
						<obs conceptId="21611293" labelTextanswerConceptId=""/>mois
						</obsgroup>2163" answerLabel="plus de 3 semaines"/>
					</td>
				</tr>
				<tr><tr valign="top">
					<td align="right"><b>Perte de poids<><b>Fievre</b></td>
					<td colspan="2">
						<obs conceptId="1734" answerConceptId="8325945" answerLabel="non"/>
						<obs<obsgroup conceptIdgroupingConceptId="1293" answerConceptId="832" answerLabel="oui moins de 10%"/1292">
							<obs conceptId="1293" answerConceptId="13525945" answerLabel="oui plus de 10%,"/>
							<<br/td>>
				</tr>
			duree:
	<tr>
						<td<obs alignconceptId="right1294"><b>Contact TBC+:</b></td>
 labelText=""/>jours
							<td<obs colspanconceptId="22160"><obs conceptIdlabelText="2133" style="no_yes/>semaines
							<obs conceptId="2161" labelText=""/></td>>mois
						</tr>obsgroup>
					</table>td>
				</td>tr>
				<tr>
					<td align="right"><b>Perte de poids</b></td>
					<td colspan="2">
						<obs conceptId="1734"    </tr>
            <tr>
              <td>
		<b>Resultat du depistage TBC</b> answerConceptId="832" answerLabel="non"/>
						<obs conceptId="1293" answerConceptId="832" answerLabel="oui moins de 10%"/>
						<obs conceptId="21361293" labelTextanswerConceptId="1352" answerConceptIdsanswerLabel="664,703" answerLabels="negatif,positif"oui plus de 10%"/>
			<br/><br/>
	      </td>
            </tr>
            <tr>
              <td bgcolor="$lightgrey"><b>5. La sante sexuelle</b></		</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>             <table border="0">
  <obs conceptId="2136" labelText="" answerConceptIds="664,703" answerLabels="negatif,positif"/>
		<br/><br/>
	      </td>
            </tr>
    <tr>        <tr>
              <td alignbgcolor="right">Sexuellement actif:</td>$lightgrey"><b>5. La sante sexuelle</b></td>
            </tr>
          <td><obs conceptId="2730" style="no_yes"/></td>  <tr>
              <td>
                 </tr><table border="0">
                    <tr>
                      <td align="right">Dernieres>Sexuellement regles<actif:</td>
                      <td><obs conceptId="9682730" style="no_yes"/></td>
                    </tr>
                    <tr>
                      <td align="right">Planification>Dernieres familiale<regles</td>
                      <td><obs conceptId="5271" style="no_yes"968"/></td>
                    </tr>
                    <tr>
                      <td align="right">Methode<>Planification familiale</td>
                      <td>
			<obs<td><obs conceptId="3745271" answerConceptIdstyle="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>
  no_yes"/></td>
                    </tr>
                      <tr>
                      <td align="right">Enceinte<>Methode</td>
                      <td>
			<obs conceptId="5272374" answerConceptIdsanswerConceptId="1066,10651720" answerLabelsanswerLabel="non,ouiabstinence"/>
			<obs conceptId="5596374" labelTextanswerConceptId="DPA"780" answerLabel="contraceptifs oraux"/> <br/>
			<obs conceptId="374"     </td>
        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">Symptomes d'IST<>Enceinte</td>
                      <td><obs<td>
			<obs conceptId="2731" size="40"/><5272" answerConceptIds="1066,1065" answerLabels="non,oui"/>
			<obs conceptId="5596" labelText="DPA"/>
		      </td>
                    </tr>
                </table>    <tr>
           </td>           <td  </tr>align="right">Symptomes d'IST</td>
        </table>       </td>       <td><obs conceptId="2731" size="40"/></td>
                    </tr>
                </table>
...
</htmlform>

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.

  • Wiki Markup
    \[<=1.4\] "Patient Dashboard - View Html Forms Section"  <-\- Required to view the HTML Forms tab on the patient dashboard
  • Wiki Markup
    \[>=1.5\] "Form Entry" <-\- Required to enter forms generally
  • "Add Encounters" <-- Required to submit a form

Upcoming features

To request more features, leave a comment on the Discussion section of this page: Talk:Html_Form_Entry_Module.

Flowsheets

Want to build an interface out of nothing but html forms? 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: HtmlFormFlowsheet_Module

Release Notes

Version 1.6.7 (@revision 15357)

  • Fixed bug when redisplaying forms containing obsgroups (introduced somewhere around version 1.6.4)
  • Improved performance by caching tag handlers
  • Added delete and print links to view-mode pop-up
  • Improved provider widget so that providers are sorted by name

Version 1.6.6 (@revision 14939)

  • Added style="autocomplete" option to obs tag
  • Added includeIf & excludeIf tags

Version 1.6.6 (@revision 14939)

  • Added style="autocomplete" option to obs tag
  • Added includeIf & excludeIf tags

Version 1.6.6 (@revision 14939)

  • Added style="autocomplete" option to obs tag
  • Added includeIf & excludeIf tags

Version 1.6.5 (@revision 14430)

  • Added ability to reference a concept by mapping, or by uuid
  • Added ability to handle nested obsgroups
  • Replaced dojo functionality with jquery
  • Minor bug fixes

Version 1.6.4.1 (@revision 13717)

  • Changed all controllers so that sessionForm=false
  • Minor tweak to assure properly compatibility with HTML Form Designer module
  • Minor layout tweaks

Version 1.6.4

  • Updated so that HTML Forms now have uuids and other BaseOpenmrsMetadata. This will allow Html Forms to work with the sync module.

Version 1.6.3.2

  • Fixed bug with HTML Form Entry privileges

Version 1.6.3.1

  • Fixed #2261 - Problem using an obs with the same concept id in two obsgroups on one form
  • Fixed #2262 - encounterProvider defaults broken in OpenMRS 1.6
  • Updated rendering of date/time widgets to be compatible with OpenMRS 1.7

Version 1.6.3

  • Added support for handling observations of types Time and Datetime with appropriate widgets - #2231
  • Fixed bug with setting time using the Time widget
  • Fixed bug with rendering international characters in "Preview HTML Forms from File" on systems when UTF-8 is not set as default in JVM - #2218

Version 1.6.2

  • Significant performance improvement in generating forms
  • Fixed #1993 - HTML Form Entry visible to all users under Administration

Version 1.6.1

  • #2084 - Allow constrained options for numeric and text obs in HTML Form Entry

Version 1.6.0

  • Works with OpenMRS 1.6 (since encounter.provider is now a Person, not a User). Incompatible with version of OpenMRS before 1.6.

Version 1.5.4

  • Backported fix for bug setting time with Time widget

Version 1.5.3

  • Fixed Linux Velocity Errors: Failed to initialize org.apache.velocity.runtime.log.Log4JLogChute (#1953/#1960)

Version 1.5.2

  • Added ability to make encounterProvider default to the currently logged in user (#1925) (credit: Daniel Futerman)

Version 1.5.1

  • Added ability to enroll a patient in a program
  • Added ability to specify encounter time (#1910)

Version 1.5.0.2

  • Bumped up the version number due to a build error, no code changes occurred

Version 1.5.0.1

  • Fixed the log4j.xml file that ships with the module so that logs can be viewed in the openmrs admin interface again

Version 1.5.0

  • Exactly like 1.4.0 but it attaches to the new extension point in OpenMRS 1.5.
  • Incompatible with versions of OpenMRS before 1.5.0 RC1

Version 1.4.0

  • You may now edit a form after having entered it.
  • Enable opening a form based on either formId or htmlFormId
  • i18n:
    • translations element so you can localize your form for different languages
    • Fixed #1630 - htmlformentry: international characters not allowed
    • support for date formatting within the velocity lookup tag
    • support for translation of values within the velocity lookup tag
    • localization of boolean obs, location widget, and user widget
    • Support for answerCode/answerCodes in obs elements
  • Widgets and elements:
    • a section tag
    • a repeat element which provides the ability to display a repeating section with different parameters
    • a location widget to enter a locationId in valueText for concepts with text datatype
    • radio button inputs for coded questions
    • Support for answerClasses attribute in obs elements
    • boolean obs elements can have their yes/no text customized
    • encounterLocation and encounterProvider tags now allow default values
    • encounterDatetime is no longer allowed to be in the future
    • coded obs lists are now sorted by display name by default
  • Designing forms:
    • Display a Form Schema that shows concepts and the text that maps to them
    • ability to view an in-progress form during design from a file on the filesystem
    • fix htmlform edit page to ensure that the html form that is displayed in the textbox is first escaped correctly
  • Random:
    • enable opening a form based on either formId or htmlFormId
    • Fixed some inconsistent behavior because of an upstream bug in Concept.equals(Concept)

Version 1.3

  • Fixed #1302 - Html Form Entry module doesn't clear old error messages
  • Fixed #1303 - Html Form Entry module doesn't warn you if you leave out a required encounter metadata component

Version 1.2

  • Exactly like version 1.1 except compiled with Java 1.5 compliance.

Version 1.1

  • If your session expires while entering a long form you are prompted to re-login, instead of losing your work.
  • You may now fill out multiple forms simultaneously in different windows.

Version 1.0

...

              </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.

Children Display