EHR & Patient Management Screen Requirements
Home / Clinical Modules / EHR & Patient Management / Screen Requirements

EHR & Patient Management Screen Requirements

Screen Inventory

Screen ID Screen Name Primary Actor(s) Workflow(s) Access Level
SCR-EHRPATIENTMGMT-001 Patient Search Registration Clerk, MRO, Physician, Nurse, Allied Health, Patient Access Staff WF-EHR-001, WF-EHR-002, WF-EHR-003, WF-EHR-004, WF-EHR-005, WF-EHR-006, WF-EHR-007, WF-EHR-008, WF-EHR-009 All authenticated users with view_limited_clinical or higher
SCR-EHRPATIENTMGMT-002 Patient Registration Form Registration Clerk, Senior Registration Clerk WF-EHR-001, WF-EHR-008 Users with register_patient
SCR-EHRPATIENTMGMT-003 Patient Demographics View/Edit Registration Clerk, Senior Registration Clerk, MRO, HIM Supervisor, Patient (Portal – limited) WF-EHR-001, WF-EHR-002 Users with update_demographics (edit) or view_limited_clinical (view)
SCR-EHRPATIENTMGMT-004 Patient Chart (Overview) Physician, Nurse, Allied Health, Pharmacist, MRO WF-EHR-004, WF-EHR-005, WF-EHR-006, WF-EHR-007, WF-EHR-008, WF-EHR-009 Users with view_full_record or BTG override
SCR-EHRPATIENTMGMT-005 Allergy Management Physician, Nurse, Pharmacist WF-EHR-004 Users with manage_allergies
SCR-EHRPATIENTMGMT-006 Problem List Physician WF-EHR-005 Users with manage_problem_list
SCR-EHRPATIENTMGMT-007 Clinical Notes Physician, Nurse, Allied Health WF-EHR-006 Users with document_notes / document_nursing_notes / document_specialty_notes
SCR-EHRPATIENTMGMT-008 Document Management MRO, Medical Records Clerk, Nurse, Patient (Portal – upload/view own) WF-EHR-007, WF-EHR-008 Users with manage_documents or upload_documents (portal)
SCR-EHRPATIENTMGMT-009 Consent Management Registration Clerk, Nurse, HIM Supervisor, Patient (Portal) WF-EHR-001, WF-EHR-007, WF-EHR-008, WF-EHR-009 Users with manage_consent_forms or manage_own_consents (portal)
SCR-EHRPATIENTMGMT-010 Duplicate Resolution MRO, HIM Supervisor WF-EHR-003 Users with merge_records / approve_merges
SCR-EHRPATIENTMGMT-011 Access Audit Log Privacy Officer, HIM Supervisor, System Administrator WF-EHR-009 Users with audit_all_access / review_btg
SCR-EHRPATIENTMGMT-012 User & Role Management System Administrator, Privacy Officer (view) Cross-cutting Users with manage_users, manage_roles, manage_facilities, manage_departments
flowchart LR H["Application Home"] --> A["SCR-EHRPATIENTMGMT-001<br/>Patient Search"] A -->|"New Patient"| B["SCR-EHRPATIENTMGMT-002<br/>Patient Registration Form"] A -->|"Open Patient"| C["SCR-EHRPATIENTMGMT-004<br/>Patient Chart (Overview)"] B -->|"Save & Open Chart"| C B -->|"Save Only"| A C --> D["SCR-EHRPATIENTMGMT-003<br/>Demographics View/Edit"] C --> E["SCR-EHRPATIENTMGMT-005<br/>Allergy Management"] C --> F["SCR-EHRPATIENTMGMT-006<br/>Problem List"] C --> G["SCR-EHRPATIENTMGMT-007<br/>Clinical Notes"] C --> I["SCR-EHRPATIENTMGMT-008<br/>Document Management"] C --> J["SCR-EHRPATIENTMGMT-009<br/>Consent Management"] A -->|"Duplicate Queue"| K["SCR-EHRPATIENTMGMT-010<br/>Duplicate Resolution"] K --> C H --> L["SCR-EHRPATIENTMGMT-011<br/>Access Audit Log"] H --> M["SCR-EHRPATIENTMGMT-012<br/>User & Role Management"] subgraph BTG["Break-the-Glass Flow"] X["Attempt to open patient without relationship"] --> Y{"BTG Prompt"} Y -->|"Cancel"| A Y -->|"Proceed with Reason"| C end

Screen Specifications

Below, each screen includes: purpose, field specifications, validation messages, actions, accessibility, and responsive notes. HTML wireframes are provided for key screens:

  • SCR-EHRPATIENTMGMT-001 (Patient Search)
  • SCR-EHRPATIENTMGMT-002 (Patient Registration)
  • SCR-EHRPATIENTMGMT-004 (Patient Chart)
  • SCR-EHRPATIENTMGMT-005 (Allergy Management)
  • SCR-EHRPATIENTMGMT-009 (Consent Management)

Purpose

Entry point to locate existing patients or start new registration, with bilingual and phonetic search, supporting MPI duplicate prevention.

Field Specifications

Field Type Required Validation Default Notes
Search Mode Radio (MRN / Emirates ID / Passport / Name / Mobile / Advanced) Yes One option must be selected MRN Determines which input fields are active
MRN Text Conditionally (if MRN mode) Alphanumeric, max 20; facility prefix pattern — Exact match search
Emirates ID Text Conditionally (if Emirates ID mode) Regex ^784-\d{4}-\d{7}-\d$ — Auto-format with dashes; primary identifier in UAE
Passport Number Text Conditionally Max 20 chars — Case-insensitive
Name (EN) Text Conditionally (Name mode) Min 2 chars — Supports partial + phonetic matching
Name (AR) Text Optional Min 2 chars if entered — RTL input, Arabic collation
Date of Birth Date Optional Past date only — Used to narrow results
Mobile Phone Text Conditionally (Mobile mode) Regex ^\+971 5\d \d{3} \d{4}$ — Normalised before search
Advanced Filters Toggle Checkbox No — Off Shows nationality, gender, facility filters
Nationality Dropdown No Must be valid nationality code — From master data
Gender Dropdown No M/F/Other — From master data
Recent Patients List Table N/A — Last 20 accessed by user For quick access
Results Table Table N/A — — Click row to open chart

Validation Messages

Condition Message Severity
No search criteria entered "Please enter at least one search criterion." Error
Emirates ID invalid format "Emirates ID must be in format 784-YYYY-NNNNNNN-C." Error
Mobile invalid format "Mobile number must be in format +971 5X XXX XXXX." Error
Search returns 0 results "No patients found matching your search criteria." Info
Search returns > 50 results "Too many results. Please refine your search." Warning

Actions / Buttons

  • Search: Executes search with current criteria; updates results table.
  • Clear: Clears all input fields and results.
  • New Patient Registration: Opens SCR-EHRPATIENTMGMT-002 with pre-populated fields (e.g., Emirates ID) if entered.
  • Open Patient (row click or button): Opens SCR-EHRPATIENTMGMT-004 (Patient Chart) with BTG check if required.

HTML Wireframe Mockup

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background: #1a73e8; color: white; padding: 12px 20px;">
    <h3 style="margin: 0;">Patient Search / بحث المريض</h3>
  </div>
  <div style="padding: 16px;">
    <!-- Search Mode -->
    <div style="margin-bottom: 12px;">
      <label style="font-weight: bold; display:block; margin-bottom:4px;">Search by / البحث بواسطة</label>
      <label><input type="radio" name="mode" checked> MRN</label>
      <label style="margin-left: 12px;"><input type="radio" name="mode"> Emirates ID</label>
      <label style="margin-left: 12px;"><input type="radio" name="mode"> Name</label>
      <label style="margin-left: 12px;"><input type="radio" name="mode"> Mobile</label>
      <label style="margin-left: 12px;"><input type="radio" name="mode"> Advanced</label>
    </div>

    <!-- Criteria Row -->
    <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
      <div style="flex: 1 1 180px;">
        <label>MRN</label>
        <input type="text" style="width: 100%; padding: 6px;">
      </div>
      <div style="flex: 1 1 220px;">
        <label>Emirates ID / رقم الهوية</label>
        <input type="text" placeholder="784-YYYY-NNNNNNN-C" style="width: 100%; padding: 6px;">
      </div>
      <div style="flex: 1 1 220px;">
        <label>Name (EN) / الاسم (إنجليزي)</label>
        <input type="text" style="width: 100%; padding: 6px;">
      </div>
      <div style="flex: 1 1 220px;">
        <label>Name (AR) / الاسم (عربي)</label>
        <input type="text" dir="rtl" style="width: 100%; padding: 6px;">
      </div>
      <div style="flex: 0 0 160px;">
        <label>DOB</label>
        <input type="date" style="width: 100%; padding: 6px;">
      </div>
      <div style="flex: 0 0 200px;">
        <label>Mobile / الجوال</label>
        <input type="text" placeholder="+971 5X XXX XXXX" style="width: 100%; padding: 6px;">
      </div>
    </div>

    <!-- Buttons -->
    <div style="margin-bottom: 16px; display:flex; justify-content: space-between; align-items:center;">
      <div>
        <button style="background:#1a73e8;color:#fff;border:none;padding:6px 16px;border-radius:4px;">Search</button>
        <button style="margin-left:8px;padding:6px 16px;">Clear</button>
      </div>
      <button style="background:#0b8043;color:#fff;border:none;padding:6px 16px;border-radius:4px;">New Patient Registration</button>
    </div>

    <!-- Results -->
    <div>
      <h4 style="margin: 8px 0;">Results / النتائج</h4>
      <table style="width:100%; border-collapse: collapse; font-size: 13px;">
        <thead>
          <tr style="background:#f5f5f5;">
            <th style="border:1px solid #ddd; padding:6px;">MRN</th>
            <th style="border:1px solid #ddd; padding:6px;">Name (EN)</th>
            <th style="border:1px solid #ddd; padding:6px;">الاسم (عربي)</th>
            <th style="border:1px solid #ddd; padding:6px;">DOB</th>
            <th style="border:1px solid #ddd; padding:6px;">Emirates ID</th>
            <th style="border:1px solid #ddd; padding:6px;">Mobile</th>
            <th style="border:1px solid #ddd; padding:6px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="border:1px solid #ddd; padding:6px;">DXB-00012345</td>
            <td style="border:1px solid #ddd; padding:6px;">Ahmed Al-Maktoum</td>
            <td style="border:1px solid #ddd; padding:6px;" dir="rtl">أحمد المكتوم</td>
            <td style="border:1px solid #ddd; padding:6px;">1985-03-12</td>
            <td style="border:1px solid #ddd; padding:6px;">784-1985-1234567-1</td>
            <td style="border:1px solid #ddd; padding:6px;">+971 50 123 4567</td>
            <td style="border:1px solid #ddd; padding:6px;"><button style="padding:4px 8px;">Open</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Accessibility (WCAG 2.1 AA)

  • All inputs have associated <label> elements; bilingual labels use lang="ar" for Arabic text where appropriate.
  • Search results table uses <th scope="col"> and proper table semantics.
  • Error messages appear inline and are associated via aria-describedby.
  • Keyboard navigation: tab order follows logical sequence; pressing Enter in a search field triggers search.
  • Colour is not the only indicator; icons/text used for status.

Responsive / Mobile

  • On screens < 768px, search criteria stack vertically; results table becomes horizontally scrollable.
  • Recent patients list collapses into a dropdown.
  • Touch targets (buttons, radio options) at least 44x44px.

SCR-EHRPATIENTMGMT-002: Patient Registration Form

Purpose

Multi-step wizard to register new patients, capture demographics, identifiers, contact and insurance details, and initial consent, replacing paper registration forms.

Sections / Steps

  1. Step 1: Identity & Names
  2. Step 2: Contact & Address
  3. Step 3: Insurance & Payer
  4. Step 4: Consents & Review

Key Field Specifications (selected; not exhaustive)

Step 1 – Identity & Names

Field Type Required Validation Default Notes
Emirates ID Text Yes (if resident) Regex ^784-\d{4}-\d{7}-\d$; uniqueness in patient_identifiers — Auto-fill via card reader API when available
Passport Number Text Conditionally (non-resident) Max 20 chars; uniqueness per nationality — Required if no Emirates ID
Visa Number Text Optional Max 20 chars — For visitors
Name (EN) – First Text Yes Max 50 chars; letters and spaces — Stored in patients.first_name_en
Name (EN) – Middle Text Optional Max 50 chars — —
Name (EN) – Last Text Yes Max 50 chars — —
Name (AR) – First Text Recommended Max 50 chars; Arabic characters — RTL input
Name (AR) – Middle Text Optional Max 50 chars — —
Name (AR) – Last Text Recommended Max 50 chars — —
Date of Birth Date Yes Past date; age <= 130 years — Age auto-calculated
Gender Dropdown Yes M/F/Other — From master data
Nationality Dropdown Yes Must be valid nationality code UAE Default UAE but editable
Blood Type Dropdown Optional Valid ABO/Rh — —

Step 2 – Contact & Address

Field Type Required Validation Default Notes
Mobile Phone Text Yes Regex ^\+971 5\d \d{3} \d{4}$ +971 prefilled Primary contact
Home Phone Text Optional Regex for UAE landline — —
Email Text Optional Valid email format — Used for portal
Address Line 1 (EN) Text Yes Max 100 chars — —
Address Line 1 (AR) Text Optional Max 100 chars — RTL
City Text / dropdown Yes Max 50 chars — —
Emirate Dropdown Yes One of 7 emirates — From master data
PO Box Text Optional Numeric, max 10 digits — UAE-specific
Preferred Language Dropdown Yes EN / AR / Other EN Drives UI language preference
Emergency Contact Name Text Optional Max 100 chars — —
Emergency Contact Relation Text Optional Max 50 chars — —
Emergency Contact Phone Text Optional Same as mobile validation — —

Step 3 – Insurance & Payer

Field Type Required Validation Default Notes
Payer Dropdown (searchable) Optional Must exist in payers — THIQA, Daman, Oman, etc.
Insurance Plan Dropdown Optional Must exist in insurance_plans for payer — —
Member ID Text Conditionally (if payer selected) Max 30 chars — Stored in patient_identifiers as type=INS_MEMBER
Card Expiry Date Date Optional Future date — —
Eligibility Check Button Button N/A Calls INT-EHR-007 — Displays status (Eligible/Not Eligible/Error)
Eligibility Status Read-only N/A — — Stored in encounter context for billing

Step 4 – Consents & Review

Field Type Required Validation Default Notes
General Treatment Consent Checkbox Yes Must be checked to complete registration Unchecked Links to consent text
UAE PDPL Data Processing Consent Checkbox Yes Must be checked or explicit refusal recorded Unchecked If refused, restrict data sharing
HIE Data Sharing Consent (NABIDH/Malaffi) Checkbox Optional (per facility policy) — Unchecked Controls ADT/document sharing flags
Signature Capture Signature pad / OTP Yes Must capture signature or OTP code — Stored in patient_consents
Consent Language Dropdown Yes EN/AR Based on preferred language Determines consent text version

Validation Messages

Condition Message Severity
Emirates ID duplicate "A patient with this Emirates ID already exists: [MRN]. Open existing record instead?" Error (with navigation option)
Required identity fields missing "Please complete all mandatory identity fields (Emirates ID/Passport, names, DOB, gender, nationality)." Error
Eligibility check failed "Unable to verify insurance eligibility. You may proceed, but claims may be rejected." Warning
PDPL consent not given "UAE PDPL data processing consent is required to proceed. If patient refuses, follow manual process." Error (configurable per policy)
Signature missing "Please capture patient or legal guardian signature to complete registration." Error

Actions / Buttons

  • Next / Back: Navigate between steps; validate current step before moving forward.
  • Save as Draft: Save partial registration; mark patient as provisional; no ADT sent.
  • Complete Registration: Validate all steps; create patients, patient_demographics, patient_identifiers, initial patient_consents; trigger ADT A04 to NABIDH/Malaffi and internal systems.
  • Cancel: Discard unsaved data and return to Patient Search.

HTML Wireframe Mockup

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 960px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background: #1a73e8; color: white; padding: 12px 20px;">
    <h3 style="margin: 0;">New Patient Registration / تسجيل مريض جديد</h3>
  </div>
  <div style="padding: 16px;">
    <!-- Step Indicator -->
    <div style="display:flex; margin-bottom:16px; font-size:13px;">
      <div style="flex:1; text-align:center; padding:6px; border-bottom:3px solid #1a73e8;">1. Identity</div>
      <div style="flex:1; text-align:center; padding:6px; border-bottom:3px solid #ccc;">2. Contact</div>
      <div style="flex:1; text-align:center; padding:6px; border-bottom:3px solid #ccc;">3. Insurance</div>
      <div style="flex:1; text-align:center; padding:6px; border-bottom:3px solid #ccc;">4. Consents</div>
    </div>

    <!-- Step 1 Content -->
    <div>
      <h4>Step 1: Identity & Names / الهوية والأسماء</h4>
      <div style="display:flex; flex-wrap:wrap; gap:12px;">
        <div style="flex:1 1 220px;">
          <label>Emirates ID / رقم الهوية *</label>
          <input type="text" placeholder="784-YYYY-NNNNNNN-C" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 200px;">
          <label>Passport No. / رقم الجواز</label>
          <input type="text" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 160px;">
          <label>Date of Birth *</label>
          <input type="date" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 140px;">
          <label>Gender *</label>
          <select style="width:100%; padding:6px;">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select>
        </div>
        <div style="flex:1 1 180px;">
          <label>Nationality *</label>
          <select style="width:100%; padding:6px;">
            <option>United Arab Emirates</option>
            <option>Saudi Arabia</option>
            <option>India</option>
          </select>
        </div>
      </div>

      <div style="margin-top:16px; display:flex; flex-wrap:wrap; gap:12px;">
        <div style="flex:1 1 220px;">
          <label>First Name (EN) *</label>
          <input type="text" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 220px;">
          <label>Last Name (EN) *</label>
          <input type="text" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 220px;">
          <label dir="rtl">الاسم الأول (عربي)</label>
          <input type="text" dir="rtl" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 220px;">
          <label dir="rtl">اسم العائلة (عربي)</label>
          <input type="text" dir="rtl" style="width:100%; padding:6px;">
        </div>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div style="margin-top:20px; display:flex; justify-content:space-between;">
      <button style="padding:6px 16px;">Cancel</button>
      <div>
        <button style="padding:6px 16px; margin-right:8px;">Save as Draft</button>
        <button style="background:#1a73e8;color:#fff;border:none;padding:6px 16px;border-radius:4px;">Next</button>
      </div>
    </div>
  </div>
</div>

Accessibility

  • Step indicator uses text and not only colour; current step announced via aria-current="step".
  • Required fields indicated with * and aria-required="true".
  • Error summary at top of step with links to fields.
  • Arabic fields use dir="rtl" and lang="ar" attributes.

Responsive / Mobile

  • Steps collapse into vertical layout; step indicator becomes numbered list.
  • On small screens, each label appears above its input.
  • Signature capture area expands to full width; scrollable if needed.

SCR-EHRPATIENTMGMT-003: Patient Demographics View/Edit

Purpose

View and update patient demographics with change tracking and approval workflow for critical fields (name, DOB, Emirates ID), supporting PDPL auditability.

Field Specifications (high level)

Field Group Type Required Validation Notes
Demographics Banner Read-only strip N/A — Shows MRN, names, DOB, age, gender, Emirates ID, allergy status
Current Demographics Form fields Yes/No per field Same as registration Editable based on role
Change History Timeline / table N/A — Shows previous values, who changed, when
Pending Changes Table N/A — For fields awaiting supervisor approval
Critical Fields Name, DOB, Emirates ID Yes Edits create pending record; require approval Old value remains active until approved

Validation Messages

Condition Message Severity
Critical field edited by non-supervisor "Changes to [field] require supervisor approval and will not take effect until approved." Info
Duplicate Emirates ID detected "Another patient with this Emirates ID exists. Please review potential duplicate." Error
No changes detected on save "No changes to save." Info

Actions / Buttons

  • Edit: Enables form fields (if user has permission).
  • Save Changes: Validates and saves; critical fields go to pending queue.
  • Discard Changes: Reverts to last saved values.
  • Approve / Reject Change (Supervisor): Applies or discards pending critical changes.

Accessibility

  • Change highlights use both colour and icon (e.g., pencil icon) with aria-label="Field changed".
  • History table accessible with screen readers; date/time in ISO format.

Responsive / Mobile

  • History collapses into accordion per field.
  • Banner remains pinned at top; content scrolls beneath.

SCR-EHRPATIENTMGMT-004: Patient Chart (Overview)

Purpose

Central dashboard summarising patient clinical information (problems, allergies, meds, encounters, results, vitals) and navigation hub to detailed screens.

Field / Component Specifications

Component Type Required Validation Notes
Patient Banner Reusable component N/A — See Common UI Patterns
Allergy Alert Banner Alert strip N/A — Red if severe/life-threatening; yellow if moderate; green if NKA/NKDA
Active Problems Panel List N/A — From patient_problems where status=active
Allergies Panel List N/A — From patient_allergies where status=active
Active Medications Panel List N/A — From medication module (read-only)
Recent Encounters Table N/A — From encounters (last 5)
Recent Results Table N/A — From LIS/RIS integrations
Recent Vitals Table N/A — From nursing documentation
Navigation Tabs Tab bar N/A — Links to Allergies, Problems, Notes, Documents, Consents

HTML Wireframe Mockup

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 1100px; margin: 0 auto;">
  <!-- Patient Banner -->
  <div style="border:1px solid #ccc; border-radius:8px; padding:10px; margin-bottom:10px; background:#f7f9fc;">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <div>
        <strong>Ahmed Al-Maktoum</strong> / <span dir="rtl">أحمد المكتوم</span> (M, 41 yrs)<br>
        MRN: DXB-00012345 • Emirates ID: 784-1985-1234567-1
      </div>
      <div style="text-align:right;">
        <div style="padding:4px 8px; background:#c62828; color:#fff; border-radius:4px; margin-bottom:4px;">
          Allergy: Penicillin (Anaphylaxis)
        </div>
        <div>Location: Dubai General Hospital - Ward 3B</div>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <div style="border-bottom:1px solid #ccc; margin-bottom:10px;">
    <button style="border:none; background:#1a73e8; color:#fff; padding:8px 12px;">Overview</button>
    <button style="border:none; background:transparent; padding:8px 12px;">Problems</button>
    <button style="border:none; background:transparent; padding:8px 12px;">Allergies</button>
    <button style="border:none; background:transparent; padding:8px 12px;">Notes</button>
    <button style="border:none; background:transparent; padding:8px 12px;">Documents</button>
    <button style="border:none; background:transparent; padding:8px 12px;">Consents</button>
  </div>

  <!-- Main Grid -->
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <!-- Left Column -->
    <div style="flex:2 1 380px;">
      <div style="border:1px solid #ddd; border-radius:6px; margin-bottom:10px;">
        <div style="background:#f5f5f5; padding:6px 10px; font-weight:bold;">Active Problems</div>
        <div style="padding:8px;">
          <ul style="margin:0; padding-left:18px; font-size:13px;">
            <li>Type 2 diabetes mellitus (ICD-10-AM: E11.9)</li>
            <li>Hypertension (ICD-10-AM: I10)</li>
          </ul>
        </div>
      </div>

      <div style="border:1px solid #ddd; border-radius:6px; margin-bottom:10px;">
        <div style="background:#f5f5f5; padding:6px 10px; font-weight:bold;">Recent Encounters</div>
        <div style="padding:8px;">
          <table style="width:100%; border-collapse:collapse; font-size:12px;">
            <thead>
              <tr>
                <th style="border-bottom:1px solid #ddd; text-align:left;">Date</th>
                <th style="border-bottom:1px solid #ddd; text-align:left;">Type</th>
                <th style="border-bottom:1px solid #ddd; text-align:left;">Provider</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2026-02-07</td>
                <td>Outpatient</td>
                <td>Dr. Fatima Al-Nahyan</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Right Column -->
    <div style="flex:1 1 280px;">
      <div style="border:1px solid #ddd; border-radius:6px; margin-bottom:10px;">
        <div style="background:#f5f5f5; padding:6px 10px; font-weight:bold;">Allergies</div>
        <div style="padding:8px; font-size:13px;">
          Penicillin – Anaphylaxis (Severe)<br>
          <button style="margin-top:6px; padding:4px 8px;">Manage Allergies</button>
        </div>
      </div>

      <div style="border:1px solid #ddd; border-radius:6px; margin-bottom:10px;">
        <div style="background:#f5f5f5; padding:6px 10px; font-weight:bold;">Recent Vitals</div>
        <div style="padding:8px; font-size:13px;">
          BP: 130/80 mmHg<br>
          HR: 78 bpm<br>
          Temp: 36.8 °C
        </div>
      </div>

      <div style="border:1px solid #ddd; border-radius:6px;">
        <div style="background:#f5f5f5; padding:6px 10px; font-weight:bold;">Consents</div>
        <div style="padding:8px; font-size:13px;">
          General Treatment: Valid<br>
          PDPL Data Processing: Valid<br>
          HIE Sharing: Opt-in<br>
          <button style="margin-top:6px; padding:4px 8px;">View / Manage</button>
        </div>
      </div>
    </div>
  </div>
</div>

Accessibility

  • Tabs implemented with ARIA roles (role="tablist", role="tab", role="tabpanel").
  • Allergy alert banner uses role="alert" for severe allergies.
  • All panels have headings for screen reader navigation.

Responsive / Mobile

  • Two-column layout collapses into single column; panels stack vertically.
  • Tabs become a horizontal scrollable list or dropdown on very small screens.

SCR-EHRPATIENTMGMT-005: Allergy Management

Purpose

Create, update, and inactivate patient allergies and adverse reactions, coded with RxNorm/SNOMED, feeding CDS in CPOE and displaying alerts.

Field Specifications

Field Type Required Validation Default Notes
Allergen Search Autocomplete text Yes (unless NKA/NKDA) Min 3 chars; search RxNorm/SNOMED — Filters by category (drug/food/environment)
Allergen Category Dropdown Yes Drug / Food / Environmental / Other Drug Drives terminology source
Selected Allergen Read-only Yes — — Shows code, system, display
Reaction Type Dropdown Yes Allergy / Intolerance / Adverse Event Allergy Stored in reaction_type
Severity Dropdown Yes Mild / Moderate / Severe / Life-threatening — Required for allergy/intolerance
Manifestation Autocomplete Recommended SNOMED-coded; min 3 chars — e.g., Rash, Anaphylaxis
Onset Date Date Optional Past or today — —
Status Dropdown Yes Active / Inactive / Entered in Error Active —
Reporter Dropdown Yes Patient / Relative / Clinician / Other Patient —
Verified By Dropdown (provider) Optional Must be active provider Current user if clinician —
NKA Toggle Checkbox Optional If checked, no active allergies allowed — No Known Allergies
NKDA Toggle Checkbox Optional If checked, no active drug allergies allowed — No Known Drug Allergies

Validation Messages

Condition Message Severity
Allergen search < 3 chars "Enter at least 3 characters to search allergens." Info
NKA selected but active allergies exist "Cannot set 'No Known Allergies' while active allergies are recorded. Please inactivate or mark as entered in error." Error
NKDA selected but active drug allergies exist "Cannot set 'No Known Drug Allergies' while active drug allergies are recorded." Error
Severity missing "Please specify severity for this reaction." Error

Actions / Buttons

  • Add Allergy: Validates and inserts new row in patient_allergies; updates allergy banner and notifies CPOE.
  • Update: Saves changes to selected allergy.
  • Mark as Inactive: Sets status to Inactive with date.
  • Mark as Entered in Error: Sets status; requires reason.
  • Set NKA / NKDA: Creates special record or flag; enforces mutual exclusivity with active allergies.

HTML Wireframe Mockup

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; border:1px solid #ccc; border-radius:8px; overflow:hidden;">
  <div style="background:#1a73e8;color:#fff;padding:10px 16px;">
    <h3 style="margin:0;">Allergy Management / إدارة الحساسية</h3>
  </div>
  <div style="padding:12px;">
    <!-- Patient Banner (compact) -->
    <div style="background:#f7f9fc; padding:8px; border-radius:4px; margin-bottom:10px;">
      <strong>Ahmed Al-Maktoum</strong> • MRN: DXB-00012345 • DOB: 1985-03-12
    </div>

    <!-- NKA / NKDA -->
    <div style="margin-bottom:10px;">
      <label><input type="checkbox"> No Known Allergies (NKA)</label>
      <label style="margin-left:16px;"><input type="checkbox"> No Known Drug Allergies (NKDA)</label>
    </div>

    <!-- Add/Edit Form -->
    <div style="border:1px solid #ddd; border-radius:4px; padding:10px; margin-bottom:12px;">
      <h4 style="margin-top:0;">Add / Edit Allergy</h4>
      <div style="display:flex; flex-wrap:wrap; gap:10px;">
        <div style="flex:1 1 200px;">
          <label>Allergen Category *</label>
          <select style="width:100%; padding:6px;">
            <option>Drug</option>
            <option>Food</option>
            <option>Environmental</option>
          </select>
        </div>
        <div style="flex:2 1 260px;">
          <label>Allergen Search *</label>
          <input type="text" placeholder="e.g. Penicillin" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 180px;">
          <label>Reaction Type *</label>
          <select style="width:100%; padding:6px;">
            <option>Allergy</option>
            <option>Intolerance</option>
            <option>Adverse Event</option>
          </select>
        </div>
        <div style="flex:1 1 160px;">
          <label>Severity *</label>
          <select style="width:100%; padding:6px;">
            <option>Mild</option>
            <option>Moderate</option>
            <option>Severe</option>
            <option>Life-threatening</option>
          </select>
        </div>
        <div style="flex:1 1 220px;">
          <label>Manifestation</label>
          <input type="text" placeholder="e.g. Rash" style="width:100%; padding:6px;">
        </div>
        <div style="flex:1 1 160px;">
          <label>Onset Date</label>
          <input type="date" style="width:100%; padding:6px;">
        </div>
      </div>
      <div style="margin-top:10px; text-align:right;">
        <button style="padding:6px 12px; margin-right:8px;">Cancel</button>
        <button style="background:#1a73e8;color:#fff;border:none;padding:6px 12px;border-radius:4px;">Save Allergy</button>
      </div>
    </div>

    <!-- Existing Allergies List -->
    <div>
      <h4>Current Allergies</h4>
      <table style="width:100%; border-collapse:collapse; font-size:13px;">
        <thead>
          <tr style="background:#f5f5f5;">
            <th style="border:1px solid #ddd; padding:6px;">Allergen</th>
            <th style="border:1px solid #ddd; padding:6px;">Reaction</th>
            <th style="border:1px solid #ddd; padding:6px;">Severity</th>
            <th style="border:1px solid #ddd; padding:6px;">Status</th>
            <th style="border:1px solid #ddd; padding:6px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="border:1px solid #ddd; padding:6px;">Penicillin</td>
            <td style="border:1px solid #ddd; padding:6px;">Anaphylaxis</td>
            <td style="border:1px solid #ddd; padding:6px;">Severe</td>
            <td style="border:1px solid #ddd; padding:6px;">Active</td>
            <td style="border:1px solid #ddd; padding:6px;">
              <button style="padding:3px 6px;">Edit</button>
              <button style="padding:3px 6px; margin-left:4px;">Inactivate</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Accessibility

  • NKA/NKDA checkboxes labelled clearly; state announced to screen readers.
  • Table headers use scope="col".
  • Error messages for conflicts (e.g., NKA + active allergies) announced via aria-live="assertive".

Responsive / Mobile

  • Form fields stack; table rows become card-like with key-value pairs on very small screens.
  • Action buttons enlarged for touch.

SCR-EHRPATIENTMGMT-006: Problem List

Purpose

Maintain coded problem list with ICD-10-AM and SNOMED CT mapping, supporting clinical decision-making and billing.

Field Specifications (summary)

Field Type Required Validation Notes
Problem Search (ICD-10-AM) Autocomplete Yes Min 3 chars; search ICD-10-AM Primary search
Problem Search (SNOMED) Autocomplete Optional Min 3 chars; search SNOMED CT For clinical specificity
Problem Description Text Yes Max 255 chars Auto-filled from code but editable
Onset Date Date Optional Past or today —
Status Dropdown Yes Active / Resolved / Entered in Error —
Priority Dropdown Optional Low / Medium / High / Chronic —
Treating Provider Dropdown Optional Active provider —
Linked Encounters Multi-select Optional From encounters —

Validation Messages

Condition Message Severity
No code selected "Please select an ICD-10-AM or SNOMED CT code for this problem." Error
Duplicate active problem "This problem already exists as active. Consider updating the existing entry." Warning

Actions / Buttons

  • Add Problem, Update, Resolve, Mark Entered in Error.

Accessibility & Responsive

  • Similar patterns to Allergy Management.

SCR-EHRPATIENTMGMT-007: Clinical Notes

Purpose

Create and manage structured and free-text clinical notes with templates, smart phrases, and e-signature.

Field Specifications (summary)

Field Type Required Validation Notes
Note Type Dropdown Yes Must be valid note type H&P, Progress, Discharge, Nursing, etc.
Template Selector Dropdown Optional From note templates master Filters by specialty
Structured Fields Various Per template Template-driven Vitals, ROS, etc.
Free Text Editor Rich text Yes Max length configurable Supports EN/AR
Auto-populated Data Read-only sections N/A — Problems, meds, vitals
Sign Button Button Yes Requires appropriate role Locks note; creates signed timestamp

Validation Messages

Condition Message Severity
Unsigned note on exit "This note is not signed. Save as draft or sign before leaving." Warning
Missing required template fields "Please complete all required sections marked with *." Error

Actions / Buttons

  • Save Draft, Sign, Add Addendum, Delete Draft (if no signature).

Accessibility & Responsive

  • Rich text editor must be keyboard accessible; toolbar buttons labelled.
  • On mobile, editor uses simplified toolbar and full-screen mode.

SCR-EHRPATIENTMGMT-008: Document Management

Purpose

Manage scanned and uploaded documents linked to patient records, with metadata, OCR, and retention.

Field Specifications (summary)

Field Type Required Validation Notes
Document Upload File input / drag-and-drop Yes File type (PDF, JPG, PNG, TIFF); max size per config —
Document Type Dropdown Yes From Document Types master —
Document Title Text Yes Max 150 chars —
Document Date Date Optional Past or today —
Source Dropdown Optional Patient / External Facility / Internal Dept —
Encounter Link Dropdown Optional From encounters —
OCR Text Read-only N/A — Searchable

Validation Messages

Condition Message Severity
Unsupported file type "Unsupported file type. Allowed types: PDF, JPG, PNG, TIFF." Error
File too large "File exceeds maximum allowed size of [X] MB." Error

Actions / Buttons

  • Upload, View, Download, Delete (role-based), Route for Review.

Accessibility & Responsive

  • File input labelled; drag-and-drop area has keyboard alternative.
  • Document list becomes vertical list on mobile.

Purpose

Capture, view, and manage patient consents (treatment, PDPL data processing, HIE sharing, procedure-specific) with digital signatures and expiry tracking.

Field Specifications

Field Type Required Validation Default Notes
Consent Type Dropdown Yes Must be valid consent template — General Treatment, PDPL, HIE Sharing, Procedure-specific
Consent Scope Text / structured Yes Max 255 chars Template-defined e.g., "All care at Dubai General Hospital"
Consent Language Dropdown Yes EN/AR Based on patient preference Determines text version
Consent Text Scrollable read-only N/A — — Must be viewable before signature
Consent Status Dropdown Yes Granted / Refused / Withdrawn Granted Stored in patient_consents.status
Granted Datetime Datetime Auto Must be <= now Now —
Expiry Datetime Datetime Optional > granted datetime Template default if any —
Signature Method Dropdown Yes On-screen signature / OTP / Scanned On-screen —
Signature Pad Canvas Conditionally Must capture strokes if method=on-screen — For tablets
OTP Phone Text Conditionally Valid UAE mobile Patient mobile For OTP method
OTP Code Text Conditionally 4–8 digits — Verified via SMS gateway
Witness Dropdown Optional Active staff — For high-risk consents
Withdrawal Reason Textarea Conditionally (if status=Withdrawn) Max 500 chars — Required on withdrawal

Validation Messages

Condition Message Severity
Consent type missing "Please select a consent type." Error
Signature missing "Signature is required to record this consent." Error
OTP invalid "Invalid or expired OTP code. Please request a new code." Error
Withdrawal without reason "Please provide a reason for consent withdrawal." Error
Expiry before granted date "Expiry date must be after the consent date." Error

Actions / Buttons

  • Generate Consent: Loads template text based on type and language.
  • Send OTP: Sends OTP to patient mobile; starts timer.
  • Capture Signature: Opens signature pad (if not already visible).
  • Save Consent: Validates and writes to patient_consents and patient_documents (PDF copy).
  • Withdraw Consent: Changes status to Withdrawn; records reason and datetime; triggers downstream notifications (e.g., stop HIE sharing).
  • View History: Shows list of all consents with status and expiry.

HTML Wireframe Mockup

Show HTML code
HTML
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; border:1px solid #ccc; border-radius:8px; overflow:hidden;">
  <div style="background:#1a73e8;color:#fff;padding:10px 16px;">
    <h3 style="margin:0;">Consent Management / إدارة الموافقات</h3>
  </div>
  <div style="padding:12px;">
    <!-- Patient Banner -->
    <div style="background:#f7f9fc; padding:8px; border-radius:4px; margin-bottom:10px;">
      <strong>Fatima Al-Nahyan</strong> • MRN: AUH-00056789 • DOB: 1990-07-21
    </div>

    <!-- Consent Form -->
    <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;">
      <div style="flex:1 1 220px;">
        <label>Consent Type *</label>
        <select style="width:100%; padding:6px;">
          <option>General Treatment</option>
          <option>PDPL Data Processing</option>
          <option>HIE Data Sharing (NABIDH/Malaffi)</option>
          <option>Procedure-specific</option>
        </select>
      </div>
      <div style="flex:1 1 160px;">
        <label>Language *</label>
        <select style="width:100%; padding:6px;">
          <option>English</option>
          <option>العربية</option>
        </select>
      </div>
      <div style="flex:1 1 160px;">
        <label>Status *</label>
        <select style="width:100%; padding:6px;">
          <option>Granted</option>
          <option>Refused</option>
          <option>Withdrawn</option>
        </select>
      </div>
      <div style="flex:1 1 200px;">
        <label>Expiry Date</label>
        <input type="date" style="width:100%; padding:6px;">
      </div>
    </div>

    <!-- Consent Text -->
    <div style="border:1px solid #ddd; border-radius:4px; padding:8px; max-height:160px; overflow:auto; font-size:12px; margin-bottom:10px;">
      <strong>Consent Text</strong>
      <p style="margin-top:4px;">
        I hereby consent to receive medical treatment at [Facility Name] and understand that...
      </p>
    </div>

    <!-- Signature Area -->
    <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;">
      <div style="flex:1 1 200px;">
        <label>Signature Method *</label>
        <select style="width:100%; padding:6px;">
          <option>On-screen Signature</option>
          <option>OTP to Mobile</option>
          <option>Scanned Document</option>
        </select>
      </div>
      <div style="flex:2 1 320px;">
        <label>Signature / التوقيع</label>
        <div style="border:1px solid #aaa; height:120px; border-radius:4px; background:#fafafa;">
          <!-- Signature pad placeholder -->
        </div>
      </div>
    </div>

    <!-- Buttons -->
    <div style="text-align:right;">
      <button style="padding:6px 12px; margin-right:8px;">View History</button>
      <button style="background:#1a73e8;color:#fff;border:none;padding:6px 16px;border-radius:4px;">Save Consent</button>
    </div>
  </div>
</div>

Accessibility

  • Consent text region labelled and scrollable; keyboard users can scroll with arrow keys.
  • Signature method selection has clear instructions for screen readers.
  • Status change to Withdrawn triggers prompt for reason with aria-live announcement.

Responsive / Mobile

  • Signature pad expands to full width; vertical stacking of fields.
  • For OTP method, numeric keypad triggered on mobile for OTP entry.

SCR-EHRPATIENTMGMT-010: Duplicate Resolution

Purpose

Review and resolve suspected duplicate patient records with side-by-side comparison and merge preview, ensuring MPI integrity.

Field Specifications (summary)

Field Type Required Validation Notes
Suspect Pairs List Table N/A — From duplicate_suspects where status='pending'
Side-by-Side Comparison Two-column view N/A — Shows demographics, identifiers, encounters, documents
Primary Record Selector Radio Yes Must choose one as surviving record —
Merge Preview Read-only summary N/A — Counts of encounters, notes, documents to be reassigned
Merge Justification Textarea Yes Max 500 chars Required for audit
Supervisor Approval Checkbox / digital sign Yes (per policy) — For dual sign-off

Validation Messages

Condition Message Severity
No primary selected "Please select the surviving (primary) record." Error
Merge without justification "Please provide a justification for this merge." Error

Actions / Buttons

  • Mark as Not Duplicate, Submit for Approval, Approve Merge, Execute Merge.

Accessibility & Responsive

  • Comparison view uses headings and lists; not just visual columns.
  • On mobile, comparison becomes stacked cards with clear labels.

SCR-EHRPATIENTMGMT-011: Access Audit Log

Purpose

Allow Privacy Officer and HIM to review access to patient records, including BTG events, for PDPL compliance.

Field Specifications (summary)

Field Type Required Validation Notes
User Filter Autocomplete Optional Must match existing user —
Patient Filter Autocomplete Optional Must match existing patient —
Date Range Date pickers Optional Start <= End —
Action Type Multi-select Optional View / Edit / Print / Export / BTG —
BTG Flag Checkbox Optional — Show BTG only
Export Button Button N/A Max rows per export limit CSV/PDF

Validation Messages

Condition Message Severity
Date range > 1 year "For performance reasons, please limit queries to 12 months or less." Warning

Actions / Buttons

  • Search, Clear Filters, Export CSV, Export PDF.

Accessibility & Responsive

  • Table with proper semantics; export buttons labelled for screen readers.
  • On mobile, filters collapse into accordion.

SCR-EHRPATIENTMGMT-012: User & Role Management

Purpose

Administer users, roles, and permissions for RBAC, including facility/department context.

Field Specifications (summary)

Field Type Required Validation Notes
User List Table N/A — Searchable by name, username, email
Role List Table N/A — Shows system vs custom roles
Permission Matrix Grid N/A — Roles vs permissions; checkboxes
Assign Roles Dialog Yes User, role, facility, department, effective dates Writes to user_roles
Facility Context Dropdown Optional Must be valid facility Filters assignments

Validation Messages

Condition Message Severity
Removing last admin "At least one active System Administrator must remain." Error
Overlapping role assignments "This user already has this role for the selected facility/department and date range." Error

Actions / Buttons

  • Create User, Deactivate User, Create Role, Assign Role, Remove Role, Save Matrix.

Accessibility & Responsive

  • Permission matrix must be keyboard navigable; consider alternative list view on mobile.

Common UI Patterns

Patient Banner

  • Appears on all clinical and patient-specific screens.
  • Content:
  • Name (EN + AR), age, gender
  • MRN, Emirates ID
  • DOB
  • Primary facility/location (if admitted)
  • Allergy summary (with severity colour + text)
  • Behaviour:
  • Clickable to open demographics view.
  • Sticky at top on scroll.
  • Accessibility:
  • Marked as landmark region (role="banner").
  • Allergy status announced via aria-live when changed.

Search Components

  • Consistent search behaviour:
  • Minimum characters before search (usually 3).
  • Debounced requests (e.g., 300–500ms).
  • Clear button to reset.
  • Autocomplete:
  • Arrow keys to navigate suggestions; Enter to select.
  • aria-activedescendant and role="listbox"/"option" used.

Alert / Notification Patterns

  • Error: Red, with icon; blocks action; appears near field and in summary.
  • Warning: Amber; allows proceed with confirmation.
  • Info: Blue; non-blocking.
  • BTG alerts and severe allergy alerts use role="alert" and are visually prominent.

Loading States

  • Use inline spinners for component-level loading (e.g., search results).
  • Use page-level overlay spinner for long operations (e.g., merge execution).
  • Provide text like "Loading patient data…" for screen readers via aria-live.

Bilingual (Arabic/English) UI Considerations

  • All labels and key actions displayed in both EN and AR where feasible, or AR available via language toggle.
  • Arabic text uses lang="ar" and dir="rtl".
  • For full Arabic UI mode:
  • Layout mirrors horizontally (tabs, navigation).
  • Alignment switches (right-aligned labels).
  • Data fields (e.g., Emirates ID, MRN) remain LTR even in Arabic mode.

General Accessibility (WCAG 2.1 AA)

  • Colour contrast ratio at least 4.5:1 for text.
  • Keyboard-only navigation supported across all screens.
  • Focus indicators clearly visible.
  • Forms:
  • Labels associated with inputs.
  • Error messages linked via aria-describedby.
  • Timeouts (e.g., OTP) communicated clearly; extendable on request.

Responsive / Mobile Behaviour

  • Breakpoints:
  • < 768px: single-column layout, stacked forms.
  • 768–1024px: two-column where appropriate.
  • Tables:
  • Horizontal scroll or card view on small screens.
  • Buttons and interactive elements:
  • Minimum 44x44px touch targets.
  • Adequate spacing to prevent accidental taps.
← Previous EHR & Patient Management Data Specifications Next → EHR & Patient Management Integration Specifications
content/clinical/ehr-patient-mgmt/04-screen-requirements.md Generated 2026-02-20 22:54