@careevolution/broadview-component

v1.9.0

Published

25 days ago

CareEvolution Broadview web component

Downloads

110

0High
0Medium
0Low

Rosetta CareEvolution Orchestrate

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 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.

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.

Broadview inputs and outputs

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.

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:

<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);    
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme