Page Comparison

Some forms are used for retrospective entry and are designed to appear like their paper equivalent as much as possible. Other forms which are primarily for for point-of-care entry should adhere to the following guidelines so that they have a consistent appearance.

Example Form

Image Added

Standard Components

...

• Place all Javascript in a single script block at the top of the page
• Use jq to reference jQuery

Header

• Should use be contained in a <div> with the .ke-form-header CSS class
• Should include <encounterDate>
  • If form is retrospective data entry, then time will not be known and shouldn't be requested (showTime=false)
  • If form is for point-of-care then time is required (showTime=false)
  • Id of the tag should be set to encounter
  date, provider and location
• For forms which are only used for retrospective data entry, encounter date should not request time

Example:

Image Removed

...

• • -date to enable calculations based on encounter date (id="encounter-date")
• Should include <encounterProvider> onlyif form is for retrospective data entry
  • Should default to current user (default=currentUser)
• Should include <encounterLocation>
  • Should default to the server location (default="GlobalProperty:kenyaemr.defaultLocation")

Content

• Should be contained in a <div> with the .ke-form-content CSS class
• Use <fieldset> and <legend> tags to divide the form into sections

Footer

• Should use a <div> be contained in a <div> with the .ke-form-footer CSS class

Example:

Image Removed

...

Javascript

• Place all Javascript in a single script block at the top of the page
• Use jq to reference jQuery
• Do not use Javascript to pre-fill form fields as this will give the false-impression that a clinical observation has been made. You can though display previous recordings beside form fields.

Example Code

<htmlform>
	
  <script type="text/javascript">
		// Client-sideAdd initialisationjavascript andhere
validation here 	</script>
 
	  <div class="ke-form-header">
 		   <table stylewidth="width: 100%; border: 0">
			<tr>
				<td align="left">Enrollment date:"100%">
      <tr>
        <td>Date <encounterDate id="encounter-date" showTime="true" /></td>
				<td align="center">Enrolled by: <encounterProviderAndRole encounterRole="a0b03050-c99b-11e0-9572-0800200c9a66"
        <td>Provider <encounterProvider default="currentUser" required="true" /></td>
				<td align="right">Enrolled at:        <td>Location <encounterLocation default="GlobalProperty:kenyaemr.defaultLocation" /></td>
			
      </tr>
    		</table>
	  </div>
  
  <div class="ke-form-content">
    	<fieldset>
		<legend>Section #1</legend>
 
		<!-- Add form sections as fieldsets -->
	</fieldset>	
 
	      <legend>Goats</legend>
        <table>
          <tr>
            <td>Total number of goats:</td>
            <td><obs conceptId="159683AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /></td>
          </tr>
        </table>
    </fieldset>
  </div>

  <div class="ke-form-footer">
 		   <submit />
  	</div>

</htmlform>