Broadview is a JavaScript web component that displays healthcare data from FHIR bundles or CDAs, organized by data type. It does some transformations on the data using the CareEvolution Orchestrate service to improve its comprehensibility.
Broadview can be embedded in any modern web application (e.g. React, Angular) that supports web components.
Broadview is dependent upon the CareEvolution Orchestrate service. You will need an Orchestrate API key in order to use Broadview.
npm install @careevolution/broadview-component
- Import the broadview-component.js file from the @careevolution/broadview-component npm package. Note that this script takes care of registering the web component with the browser, so you do not need to do this yourself;
- Import the styles.css file;
- Insert
<broadview-dashboard file-contents="your-FHIR-bundle-or-CDA" config-string="your-config"></broadview-dashboard>in your html.
Examples for how to import the web component for specific frameworks are given below.
The following attributes of the <broadview-dashboard> element are defined:
Inputs:
file-contents (string): a string representation of a CDA or json FHIR bundle
config-string (string): a string representation of a json Broadview configuration (see below)
Outputs:
file-error (string): error message that is generated if processing the CDA or FHIR bundle fails
The Broadview configuration object has the following format:
interface PatientDashboardConfig {
uiConfig: UiConfiguration;
rosettaApiBaseUrl: string;
rosettaApiKey: string;
rosettaApiAccessToken: string;
}
rosettaApiBaseUrl: Required. The URL for the Orchestrate API (api.careevolutionapi.com) (currently does not have a default value, so it must be supplied)
rosettaApiKey: Required. The Orchestrate API key to use
rosettaApiAccessToken: Optional. The Orchestrate access token to use
uiConfig: Optional. This allows you to customize the panels that are displayed
Broadview is built using Bootstrap 5. If you would like to override any of the colors or other styles, be sure to include the .broadview-component class to scope them correctly.
@import '@careevolution/broadview-component/styles.css';
.broadview-component {
… style overrides
}
Note that Broadview works best with the Arial font face.
If you are working in plain Javascript, do the following:
In your html file import the broadview-component.js and styles.css files and insert the broadview-dashboard element:
<html>
<head>
<script src="@careevolution/broadview-component/broadview-component.js" type="module"></script>
<link rel="stylesheet" href="@careevolution/broadview-component/styles.css"></link>
<script src="webComponentExample.js"></script>
</head>
<body>
<broadview-dashboard id="broadview"></broadview-dashboard>
</body>
</html>
In your JavaScript file set the file-contents and config-string attributes on the broadview-dashboard element:
window.onload = () => {
const fhirBundleOrCda = `<your-fhir-bundle-or-cda-string>`;
const config = `{"rosettaApiBaseUrl": "api.careevolutionapi.com", "rosettaApiKey": "<your-orchestrate-api-key>" }`;
const broadviewElement = document.getElementById('broadview');
broadviewElement.setAttribute('file-contents', fhirBundleOrCda);
broadviewElement.setAttribute('config-string', config);
};