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

Javascript

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 classShould include encounter date, provider and location
Should include <encounterDate> with showTime=true unless the form is for retrospective data entry
Should include <encounterProvider> only if form is for retrospective data entry
Should include <encounterLocation>
For forms which are only used for retrospective data entry, encounter date should not request time

Example:

Image Removed

Sections

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

...

Code

Code Block

language	html/xml

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

	<fieldset>
		<legend>Section #1</legend>
 
		<!-- Add form sections as fieldsets -->
	</fieldset>	
 
	
  
  <div class="ke-form-content">
    <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>

Versions Compared

Old Version 4

New Version 5

Key