@careevolution/broadview-component
Version:
CareEvolution Broadview web component
104 lines (68 loc) • 3.81 kB
Markdown
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](https://careevolution.com/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](https://careevolution.com/orchestrate/) service. You will need an Orchestrate API key in order to use Broadview.
## Getting Started
### Install the web component
`npm install @careevolution/broadview-component`
### Insert the web component into your app
- 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
## Configuring Broadview
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
## Styling Broadview
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);
};
```