Chapter 1: Simple Readout for FHIR Resources
- Create a structure using pieces of the Commure component library to display patient information.
Prerequisites
In order to complete this tutorial, the following is necessary:
- You must have followed and completed the Build Your First App tutorial.
- This tutorial assumes a Unix (Mac or Linux) environment. It should be possible to complete on Windows, but you may need to translate some commands yourself.
Seeding the data
Throughout this tutorial, our code will be interacting with a curated set of sample data. To seed
your tenant's sample data, login to your Commure Developer account and start by opening Tools > Data Library
.
Scroll down to select the [Getting Started] Patient Chart Guide: Starter Kit
data bundle, and
submit it.
You can proceed through the tutorial and leave the upload running in the background - it may take a few minutes.
Upgrading the repo structure
/src
:- src/components/
- src/components/PatientList/
- src/styles/
Using Sass modules
To enable Sass styling, we will need to install node-sass
:
yarn add node-sass@^4 --dev
After doing so, you will also probably want to rename App.css
to App.scss
and update the path
referenced in App.tsx
to refer to the new .scss
file extension in order to get everything to
compile. Note, though, that we will soon be discarding this App.scss
file, so you can also delete
it now, if you prefer.
A note about styling options
This tutorial uses Sass modules, but there are other options. We recommend using Sass modules plus the BEM convention for your stylesheet creation. If you instead prefer a CSS-in-JS approach, Styled Components is an alternative.
Displaying a list of patients
We will begin by using some pre-built React components to form an interface that shows patient data in a way that provides healthcare providers an optimal user experience.
FhirHumanName
component
Using the Let’s display a simple list of patients. To do this, we will query the list of all patients using FhirDataQuery
and then instantiate a FhirHumanName
component, which handles the complexities of proper name display, including
prefixes, suffixes, and name assembly order. For
this particular use case, we will override name assembly order, since we want the list to be easily visually
scanned.
The following is created as a new file, src/components/PatientList/PatientList.tsx
:
src/components/PatientList/PatientList.tsx
There is also some associated styling; let’s add it to src/components/PatientList/patientList.scss
:
src/components/PatientList/patientList.scss
<App />
Wiring it up to To display this PatientList
, we need to modify src/App.tsx
. We also reorganize the order of imports to improve the readability of the code.
src/App.tsx
As for styling, let’s do some reorganization. We don’t need App.scss
anymore since
it was only necessary for Hello World, so we can delete that.
After doing so, be sure to remove the import of the now-deleted App.scss
from App.tsx
.
We can also create a single entry point for all Sass styles, which joins together
individual components’ styling. To do that, let’s create the file src/styles/all.scss
:
src/styles/all.scss
and import it in App.tsx
:
src/App.tsx
Note that we referenced a thus-far uncreated file src/styles/_styles.scss
; let’s go
ahead and define that:
src/styles/_styles.scss
This file is where extraneous global styles which don’t belong in any specific component’s directory will go. We need this Sass rule in order to produce some space at the top to prevent overlap with the floating AppHeader bar.
Viewing in the browser
If you have not already done so, you can now see the fruits of our labor in the browser;
simply run yarn start
and navigate to the URL it prints in the console
(probably http://localhost:1234/
). You should see something like this:
Adding date of birth
We need to show the patient’s date of birth. For this, we will use the FhirDateTime
component that displays a FHIR date value.
Modifications to src/components/PatientList/PatientList.tsx
:
src/components/PatientList/PatientList.tsx
This will show in the browser as:
Conclusion
In this chapter, we explored a simple way to use the component library to create a nice readout for patient FHIR resources. In the next chapters, we will explore how to use FHIR resources to create a more complex application.
We will see you there!