@smals-belgium-shared/vitalink-webcomponents NPM

Vitalink Web Components

Introduction

This package provides several web components that are made available by the SMALS Vitalink FHIR team for displaying data stored on a FHIR resources server.

Web Components

VitalinkAuditTrailTable : A web component for displaying patients audit trails in a table with sorting and filtering.
VitalinkCarePlanTable : A web component for displaying patients survey DataTransfer in a table with sorting and filtering.
VitalinkVaccinationTable : A web component for displaying patients Immunizations in a table with sorting and filtering.

How to install

npm install @smals-belgium-shared/vitalink-webcomponents

How to use the web components

Once installed by NPM, the package contains several folders and files that allows you to integrate the web components to your applications.

Structure of the package

node_modules/
- WEBCOMPONENT_NAME/
  - VERSION_NUMBER/
    - main.js
    - styles.css
    - compat.js
    - polyfills.js
    - README.md
- README.md

file	Desc
main.js	The main file to import into your application to allow the instantiation of the web component (this must be imported)
styles.css	The file containing the styles for the web component (this must be imported)
compat.js	If your application targets some older browsers or platforms that does not support >ES2022 javascript features you can use this import which contains the main.js and the required polyfills to make the web component available.
polyfills.js	This file contains the polyfills only. We recommend importing this file along with the main.js file only IF you need to support older browsers or platforms that does not support >ES2022 javascript features AND IF you want to use multiple web components from this repository. This allows to import the polyfills only once and results in less files transfers.
README.md	The file containing the documentation for the web component

How to integrate the web components to your pages

As any universal web component, once the packages installed from the NPM public repository you can use the web component in your application using one of the following methods :

WHERE :

$WEBCOMPONENT_NAME = The name of the web component you want to use. (ex: VitalinkCarePlanTable)
$WEBCOMPONENT_VERSION = The version number of the web component you $want to use. (ex: 0.0.1)
$WEBCOMPONENT_HTML_TAG = The html tag of the component you want to display. (ex: vitalink-care-plan-table)

HTML tag

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/@smals-belgium-shared/vitalink-webcomponents/WEBCOMPONENT_NAME/WEBCOMPONENT_VERSION/styles.css"
    />
  </head>
  <body>
    <$WEBCOMPONENT_HTML_TAG>
      server="http://localhost:3031"
      patient-identifier="123"
      language="fr"
    ></$WEBCOMPONENT_HTML_TAG>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/$WEBCOMPONENT_NAME/$WEBCOMPONENT_VERSION/main.js"></script>
  </body>
</html>

Javascript instantiation

Alternatively, you can also instantiate it from your controller or your framework using javascript :

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/@smals-belgium-shared/vitalink-webcomponents/$WEBCOMPONENT_NAME/$WEBCOMPONENT_VERSION/styles.css"
    />
  </head>
  <body>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/$WEBCOMPONENT_NAME/$WEBCOMPONENT_VERSION/main.js"></script>
    <script>
      function appendWebComponent(config) {
        const wc = document.createElement("$WEBCOMPONENT_HTML_TAG");

        wc.setAttribute("server", config.server);
        wc.setAttribute("patient-identifier", config.patientIdentifier);
        wc.setAttribute("language", "nl");

        if (!!config.accessToken) {
          wc.setAttribute("auth-token", config.accessToken);
        }

        document.body.appendChild(wc);
      }

      appendWebComponent({
        server: "http://localhost:3031",
        accessToken: "ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1",
        patientIdentifier: "123",
      });
    </script>
  </body>
</html>

For more information about the usage of each component, please refer to the web component's own documentation below.

VitalinkAuditTrailTable

Description

A web component for displaying patients audit trails in a table with sorting and filtering.

Every citizen can request an overview of who, under what role, and when has requested, processed, created or deleted which Vitalink data. We call this overview the audit trail. The data comes from the Vitalink database and is offered to the citizen in a readable format.

Component name : VitalinkAuditTrailTable
HTML tag : vitalink-audit-trail-table
Latest version : 0.0.2

API

Parameters	Description	Mandatory	Accepted values
server	The server's url where the component will fetch the data to display from.	true	Any valid URL as string
patient-identifier	The patient identifier URI.	true	Any patient identifier as string
patient-ssin	The non pseudonomized patient ssin.	true (not providing it will not block the web component but if so the ssin will be undefined in the exported data sheet)	Any non pseudonomized patient ssin as string
auth-token	An access token the server may require to allow access to the data. This will be added to the 'Authorization' header when the component will fetch the data from the configured server.	false	Any auth acces token (Bearer) as string

How to set the parameters

HTML tag

<vitalink-audit-trail-table
    server="http://localhost:3031"
    auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1"
    patient-identifier="123"
    patient-ssin="00000000000"
></vitalink-audit-trail-table>

Javascript instantiation

const wc = document.createElement('vitalink-audit-trail-table');
wc.setAttribute('server', config.server);
wc.setAttribute('patient-identifier', config.patientIdentifier);
wc.setAttribute('patient-ssin', config.patientSsin);
wc.setAttribute('auth-token', config.accessToken);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkAuditTrailTable/0.0.1/styles.css"
    />    
  </head>
  <body>
    <vitalink-audit-trail-table
      server="http://localhost:3031"
      auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1"
      patient-identifier="123"
      patient-ssin="00000000000"
    ></vitalink-audit-trail-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkAuditTrailTable/0.0.1/main.js"></script>
  </body>
</html>

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

VitalinkCarePlanTable

Description

A web component for displaying patients survey DataTransfer in a table with sorting and filtering.

Component name : VitalinkCarePlanTable
HTML tag : vitalink-care-plan-table
Latest version : 0.0.7

API

Parameters	Description	Mandatory	Accepted values
server	The server's url where the component will fetch the data to display from.	true	Any valid URL as string
patient-identifier	The patient identifier URI.	true	Any patient identifier as string
auth-token	An access token the server may require to allow access to the data. This will be added to the 'Authorization' header when the component will fetch the data from the configured server.	false	Any auth acces token (Bearer) as string
lang	Sets the language of the webcomponent's content.	false	'nl', 'fr', 'de', 'en'

How to set the parameters

HTML tag

<vitalink-care-plan-table
    server="http://localhost:3031"
    auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1"
    patient-identifier="123"
    language="nl"
></vitalink-care-plan-table>

Javascript instantiation

const wc = document.createElement('vitalink-care-plan-table');
wc.setAttribute('server', config.server);
wc.setAttribute('patient-identifier', config.patientIdentifier);
wc.setAttribute('language', 'nl');
wc.setAttribute('auth-token', config.accessToken);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkCarePlanTable/0.0.1/styles.css"
    />    
  </head>
  <body>
    <vitalink-care-plan-table
      server="http://localhost:3031"
      auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1"
      patient-identifier="123"
      language="nl"
    ></vitalink-care-plan-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkCarePlanTable/0.0.1/main.js"></script>
  </body>
</html>

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

VitalinkVaccinationTable

Description

A web component for displaying patients vaccinations in a table with sorting and filtering.

Component name : VitalinkVaccinationTable
HTML tag : vitalink-vaccination-table
Latest version : 0.0.2

API

Parameters	Description	Mandatory	Accepted values
server	The server's url where the component will fetch the data to display from.	true	Any valid URL as string
patient-identifier	The patient identifier URI.	true	Any patient identifier as string
patient-ssin	The non pseudonomized patient ssin.	true (not providing it will not block the web component but if so the ssin will be undefined in the exported data sheet)	Any non pseudonomized patient ssin as string
patient-full-name	The full name of the patient ssin.	true (not providing it will not block the web component but if so the patient name will be undefined in the exported data sheet)	Any patient full name as string
auth-token	An access token the server may require to allow access to the data. This will be added to the 'Authorization' header when the component will fetch the data from the configured server.	false	Any auth acces token (Bearer) as string

How to set the parameters

HTML tag

<vitalink-vaccination-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000" patient-full-name="Patient Full Name"></vitalink-vaccination-table>

Javascript instantiation

const wc = document.createElement("vitalink-vaccination-table");
wc.setAttribute("server", config.server);
wc.setAttribute("patient-identifier", config.patientIdentifier);
wc.setAttribute("patient-ssin", config.patientSsin);
wc.setAttribute("patient-full-name", config.patientFullName);
wc.setAttribute("auth-token", config.accessToken);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkVaccinationTable/0.0.1/styles.css" />
  </head>
  <body>
    <vitalink-vaccination-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000" patient-full-name="Patient Full Name"></vitalink-vaccination-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkVaccinationTable/0.0.1/main.js"></script>
  </body>
</html>

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

Vitalink FHIR webcomponent javascript

1 month ago

2 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

8 months ago

8 months ago