PROJECTS OVERVIEW NOTES
Activity 1 - CRUD Activity 2 – Records Activity 3 – Charts Activity 4 – Map
FINAL APP
CHIP 690: JS/FHIR App Dev - Notes and Practice

JavaScript Sandbox for FHIR Development

This page helps to practice essential JavaScript skills needed in building healthcare applications using FHIR and eventually integrate with EHR systems like Epic through SMART-on-FHIR.

1. Interactive Buttons (this keyword, event listeners)

Click any button to rename it. This show how this refers to the clicked element and how to update DOM content dynamically.

2. Updating List Items with JavaScript

Click the button to double all values in the list below. This teaches:
selecting sets of DOM nodes
loops
innerHTML updates
parseInt() for numeric operation

  • 1
  • 2
  • 3
  • 4

Next Step: CRUD Patient Interface

Soon, we’ll build a full interface on:

  • Create: Add a patient to a list
  • Read: Display the list
  • Update: Edit a patient’s info
  • Delete: Remove a patient
This will first use local JavaScript arrays, then using actual Patient resources retrieved from a FHIR server.

3. CRUD Demo (Simple String-Based Patient List)

This introduces CRUD: Create, Read, Update, Delete. Here, each “patient” is just a string. Later, these will become full FHIR Patient objects.

4. Advanced CRUD (Bind, Delete Buttons, DOM Rebuilding)

    5. Box-Moving Interface (Async, Delay, Cancelation)

    Shows:
    • event bubbling
    • stopPropagation()
    • async delays (setTimeout)
    • cancelable operations
    • Promise-like delayed actions

    6. jQuery Intro (select/remove/append/events)

    jQuery simplifies DOM manipulation by wrapping elements in an easy-to-use API. This prepares you for AJAX calls and API-based CRUD.

    7. SMART-on-FHIR Client (FHIR API Intro)

    Here we the official fhirclient.js library to communicate with a FHIR test server.

    IDFirst NameLast NameActions