In this tutorial we will use the Commure React components to easily build interfaces that give healthcare providers a great user experience.
In the sections below we will explore only a small fraction of available components. For a complete list, see the component showcase.
The Commure React component library makes several foundational components
available. These components are based on the Blueprint component library,
but we recommend exporting from
as these components may be enhanced for the Commure Platform.
For example, there are components for buttons, progress bars, and switches:
See the foundational component page for detailed documentation and many more examples.
To provide a consistent application layout for users, the Commure React
component library includes the
layout components. Every application must use the
AppHeader component, and we
recommend using one of the panel layouts as well.
An example application layout is show below.
In most cases, we want to our applications to load some data and display it the user, or capture some data from the user and post it to the Commure Platform, or both. To accomplish this, we use the Commure data components.
To connect our application to the Commure Platform APIs, we need to use the
<CommureSmartApp/> component. See the Build a New
Application page in the
Getting Started section for a detailed walk-through.
All clinical data in the Commure Platform is made available using FHIR. The FHIR data standard is very flexible, so data may be represented in several different ways. The Commure React components take care of handling these complexities so you don't have to.
FHIR Data Types
FHIR resources consist of fields that each have a specific data type. The Commure React component library provides components for all of the FHIR data types. Some these data types are very simple, such at the decimal type.
The following example demonstrates how to use the
At first it may seem like overkill to use a dedicated component to display a simple numeric value, but there are several advantages to this approach. For example, if some future version of the FHIR standard changes the rules for a certain data type, it will only be necessary to update your version of the Commure React component library and your application will automatically be updated to handle the change. Using the FHIR data type components also allows your application to be globally styled according to user or organizational preferences.
Perhaps more importantly, the FHIR standard also includes complex data
types, which can be much more
complicated than primitive numbers or strings. For example, the
resource has a
name field that is an array of elements of type
HumanName attributes are optional, and the FHIR standard makes some suggestions
on how to use these fields, but there no strict rules that hold in all cases.
So, instead of trying manage all of these rules, which may be different between
FHIR versions, we provide the
An example usage is shown below.
Mrs. Homenick Clyde
See also the reference documentation for the FHIR Data Type components.
In addition to FHIR data type components, the Commure React component library
provides components that are useful in some common healthcare scenarios. For
example, to display basic information about the patient, the
component can be used:
Alex Gilmour71 yoGender:MaleDOB:9/22/48MRN:09272017