# CareEvolution Broadview
## Overview
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 `browser/main.js` and `browser/polyfills.js` files from the @careevolution/broadview-component npm package. Note that the main.js script takes care of registering the web component with the browser, so you do not need to do this yourself;
- Import the browser/styles.css file;
- Insert `` in your html.
Examples for how to import the web component for specific frameworks are given below.
## Broadview inputs and outputs
The following attributes of the `` 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)
**show-demographics** (boolean): a flag to show/hide the patient banner
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 (https://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/browser/styles.css';
.broadview-component {
… style overrides
}
```
Note that Broadview works best with the Arial font face.
## Example - Using Broadview in a plain JavaScript application
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:
```
```
In your JavaScript file set the file-contents and config-string attributes on the broadview-dashboard element:
```
window.onload = () => {
const broadviewElement = document.getElementById('broadview');
broadviewElement.setAttribute('show-demographics', true);
const config = `{"rosettaApiBaseUrl": "https://api.careevolutionapi.com", "rosettaApiKey": "" }`;
broadviewElement.setAttribute('config-string', config);
// Update Broadview's config when the api key is entered
const apiKeyInput = document.getElementById('rosettApiKey');
apiKeyInput.addEventListener('change', function (event) {
const apiKey = event.target.value;
const currentConfig = JSON.parse(broadviewElement.getAttribute('config-string'));
currentConfig.rosettaApiKey = apiKey;
broadviewElement.setAttribute('config-string', JSON.stringify(currentConfig));
});
// Update Broadview when a file is selected
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const fileContent = e.target.result;
broadviewElement.setAttribute('file-contents', fileContent);
};
reader.onerror = function (e) {
console.error('Error reading file:', e.target.error);
};
reader.readAsText(file);
}
});
};
```