Article
· May 30, 2022 1m read
Open Exchange

FHIR Patient Viewer

#FHIR #Frontend #JavaScript #Visualization #InterSystems IRIS for Health

Alt Text

Hi everyone!

Just wanted to share here a quick post about my project for the Grand Prix :)

FHIR Patient Viewer is a single-page, reactive rendering tool built on Vue.js that displays in a human-friendly way the data returned from a /Patient/{id}/$everything call made to an InterSystems FHIR server. In the readme, I've included 3 main things: 1. A video demo connecting FHIR Patient Viewer to a sandbox IRIS FHIR server (the fastest way to test it); 2. A second video showing how I would use FHIR Patient Viewer in a production environment (using a custom backend to handle the API calls, written in PHP/Laravel in my example, but transferable to other languages/frameworks); and 3. instructions to modify the components, create your own version of the tool, and build your own dist files.

Thanks, everyone! Amazing quality in the projects in the contest!

Dan

Check the related application on InterSystems Open Exchange
Discussion (4)1
Log in or sign up to continue
Iryna Mologa · Jun 3, 2022

Hi Dan,  

Your video is now on InterSystems Developers YouTube:

⏯ FHIR Patient Viewer Demo

https://www.youtube.com/embed/NrCiGFkxoJc
[This is an embedded link, but you cannot view embedded content directly on the site because you have declined the cookies necessary to access it. To view embedded content, you would need to accept all cookies in your Cookies Settings]

Have a good weekend!

0 0
Suzy Green · Jul 12, 2022

Hi Dan,

I am trying to use your HTML version to view data from my FHIR database in a test environment, so I didn't want to implement the authentication, etc.  Is that possible?  When I use the HTML it just says "Loading".  I can get to the FHIR endpoint from Postman using the same link and I do have Patient 1 posted to FHIR.  Here is what the HTML looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://combinatronics.com/danb7788/fhir-patient-viewer/master/dist/css/..." rel="stylesheet" />
    <link href="https://combinatronics.com/danb7788/fhir-patient-viewer/master/dist/css/..." rel="stylesheet" />
</head>
<body>  
    <div id="fhir-visualizer"></div>

    <script>
        window.intersystemsUrl = 'http://IP:port/csp/healthshare/fhirdev/fhir/r4/';
        window.intersystemsPatientId = 1;
    </script>

    <script src="https://combinatronics.com/danb7788/fhir-patient-viewer/master/dist/js/f..."></script>
    <script src="https://combinatronics.com/danb7788/fhir-patient-viewer/master/dist/js/f..."></script>
</body>
</html>

This looks really cool.  Any help would be appreciated.

Thanks.

0 0