@myhealth-belgium/webcomponent-integration v1.2.1

MyHealth Belgium web component integration library

This is a mandatory API, each web component that needs to be integrated in myhealth.belgium.be should declare following:

Properties

Language

The language always holds the current language as a value, which means it can change over time if the user changes his/her preferred language. The web component must change it’s displayed translations whenever the value changes. The values of the language property are defined in the Language enum. It's values can be en, de, fr or nl.

Theme

In order to have the web component themed according to the styling of the container application you can provide theming information.

With initial interface (Can be extended over time)

interface Theme {
    primaryColor: String,
    secondaryColor: String,
    fontFamily: String,
    primaryFontColor: String
}

Environment

The environment property holds the environment where the application is currently running. Possible values of this property are defined by the Environment enum. Currently, the possible values are prod, acc, int and dev for production, acceptation, integration and development respectively.

Access token holder See Properties | Stencil

The AccessTokenHolder is used to have a callback mechanism to always retrieve the current valid access-token.

With interface

interface AccessTokenHolder {
    getAccessToken(): String
}

Events

Completed

This event must be declared, but is optional to use. This gives the web component the ability to signal an end state (e.g. flow has ended) where the user of the web component (My Health) can hide the web component.

ErrorOccurred

This event must be declared, but is optional to use. This gives the web component the ability to signal an error which can be handled by the container application (display the error in the container application format).

With interface

interface Error {
    nl: 'Error translation',
    fr: 'Error translation',
    de: 'Error translation',
    en: 'Error translation'
}

Info

This event must be declared, but is optional to use. This gives the web component the ability to signal an info message which can be handled by the container application (display the info message in the container application format).

With interface

interface Info {
    nl: 'Info translation',
    fr: 'Info translation',
    de: 'Info translation',
    en: 'Info translation'
}

Example

<my-component
        environment="prod"
        language="nl"
        theme={this.theme}
        access-token-holder={this.accessTokenHolder}
        onCompleted="hideComponent()"
        onErrorOccurred={event => this.showError(event)}
        onInfo={event => this.showInfo(event)}>
</my-component>

Language and the implementation of the AccessTokenHolder will be implemented by the user of the web component, in our case MijnGezondheid.

Component specific API (data exchange)

A component can require additional data to be exchanged between the container and itself. This should happen according to the Web Component Specification standard meaning:

Data should be provided to the web component by setting a property value. E.g.

<my-component
    personalInfo={this.personalInfo}>
</my-component>

Data from the web component to the container should be implemented by an event. E.g.

<my-component
        onProfileSelected={event => this.selectProfile(event)}>
</my-component>

Consent

When there is a consent needed for content displayed in the token, E-health IAM should be informed. This will require a configuration change at E-health IAM level. When the user logs into MyHealth, the new consent will be asked.

Mandates

Mandates such as the Medical Data Management or Recip-E mandate are not provided to the web component. The downstream services of the web component should check if the current user (Provided Access Token) has the correct authorisation for the content or actions in the web component.

Access token (Scope and Audience)

Whenever a new web component is made available which calls downstream services, the audience and or scope of the access token for MyHealth needs to be altered in order to call those downstream services. E-health IAM should be informed about this and this will require a configuration change for MyHealth on E-health IAM level.

How to install

npm i @myhealth-belgium/webcomponent-integration