Wednesday, 3 September 2014

#FHIR Enabling Client Side Web Form Automation

Using a #FHIR server from client side Javascript provides a simple and effective way to obtain data from healthcare information systems to allow population of existing forms from local system data or retrieval of FHIR resource based data for submission.  

In this short animation one can see a local clinical information system (left) and a rough and ready browser based web application (right).  On the local machine a FHIR server is running giving access to the current context (patient being viewed in the clinical information system) and providing search to allow the retrieval of data for resources in this case Patient (for administration) and Condition, Procedure, MedicationPrescription, AdverseReaction (for a health summary). 

Here we can see how the web application can access the local record to populate a patient registration form on the client side and also how a health summary can be similarly obtained.  These can then be submitted to the web application - a whole lot more appealing (and accurate) than filling in things by hand! Of course the real benefit comes when there is broad support for FHIR interfacing across multiple suppliers of healthcare information systems. It is a short step from a retro-fit of existing form entry to the server accepting FHIR data and ideally implementing a standardised messaging endpoint (mailbox) or server (create/update).




Accessing the local system health record is achieved using Javascript; with minimal scripting it is possible to populate an existing web form based on data retrieved from the local FHIR server in JSON format. (The current patient id is obtained from another call to the FHIR server for that purpose)

function LoadConsumer() {
        $.ajax({
            url: "http://localhost:8190/Patient/" + patientId + "?format=json",
            type: 'GET',
            success: function (data, status, jqxhr) {
                var text = jqxhr.responseText;
                //$("#output").text(text);
              
                var data = jQuery.parseJSON(text);

                $("#FamilyName").val(data.name[0].family[0]);
           
                $("#GivenName").val(data.name[0].given[0]);

                $("#Sex").val(data.gender.coding[0].code);

                var bits = data.birthDate.split(/[-]/g);
                $("#DateOfBirth").val(bits[2] + '/' + bits[1] + '/' + bits[0]);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (thrownError == "")
                    thrownError = "Not responding";
            }
        });
    }

This populates the form (produced from a .NET MVC application):

<form action="/" method="post">
   <table>
      <tr>
         <td>Family Name</td>
         <td>
            <input id="FamilyName" name="FamilyName" type="text" value="" />
         </td>
      </tr>
      <tr>
         <td>Given Name</td>
         <td><input id="GivenName" name="GivenName" type="text" value="" /></td>
      </tr>
      <tr>
         <td>Date of Birth</td>
         <td><input data-val="true" data-val-required="The DateOfBirth field is required." id="DateOfBirth" name="DateOfBirth" type="text" value="" />
         </td>
      </tr>
      <tr>
         <td>Sex</td>
         <td>
            <select id="Sex" name="Sex">
               <option value=""></option>
               <option value="M">Male</option>
               <option value="F">Female</option>
            </select>
         </td>
      </tr>
   </table>
   <button name="Submit" type="submit" value="save">Register</button>
</form>

So that is it.  FHIR server availability on a local systems can enable a generalised automation of population for existing web based forms with some minimal Javascript glue. Give it a try!


1 comment:

  1. Have you seen - https://github.com/FHIR/fhir.js?

    ReplyDelete