Versions Compared

Old Version 2

changes.mady.by.user Rowan Seymour

Saved on

compared with

New Version 3

changes.mady.by.user Rowan Seymour

Saved on

Key

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

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.

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 .ke-form-header CSS class
  • Should include encounter date, provider and location
  • For forms which are only used for retrospective data entry, encounter date should not request time

For exampleExample:

Sections

  • Use <fieldset> and <legend> tags
  • Should use.ke-form-footer CSS class

Example:

Image Added

Example Template

Code Block
languagehtml/xml
<htmlform>
	<script type="text/javascript">
		// Client-side initialisation and validation here
	</script>
 
	<div class="ke-form-header">
		<table style="width: 100%; border: 0">
			<tr>
				<td align="left">Enrollment date: <encounterDate id="encounter-date" showTime="true" /></td>
				<td align="center">Enrolled by: <encounterProviderAndRole encounterRole="a0b03050-c99b-11e0-9572-0800200c9a66" default="currentUser" required="true" /></td>
				<td align="right">Enrolled at: <encounterLocation default="GlobalProperty:kenyaemr.defaultLocation" /></td>
			</tr>
		</table>
	</div>

	<fieldset>
		<legend>Section #1</legend>
 
		<!-- Add form sections as fieldsets -->
	</fieldset>	
 
	<div class="ke-form-footer">
		<submit />
	</div>
</htmlform>

...