MyHealth Webcomponent Vaccinations

The MyHealth Webcomponent Vaccinations provides a comprehensive view of a user's vaccination history.

All MyHealth webcomponents implement the MyHealth - Web Component Integration and use the MyHealth - Angular design kit package for styling.

Usage

To use the MyHealth Webcomponent Vaccinations, import and call the package's boostrap into your application:

import { manifest, bootstrap } from '@myhealth-belgium/web-component-vaccinations';

// Call bootstrap function with your HostSettings & HostServices
bootstrap({ settings: SETTINGS, services: SERVICES });

// Place the webcomponent in your HTML for it to render
return (
  <mh-web-component-vaccinations onprint={printToPdf($event)} full-name="John Doe"></mh-web-component-vaccinations>
);

To integrate the design-kit, also import the webcomponent's styles in your code. For more information, see Design kit integration.

import '@myhealth-belgium/web-component-vaccinations/styles.css';

Bootstrap settings and services

The bootstrap() function is called with 2 objects, HostSettings and HostServices. These follow the guidelines provided by the MyHealth - Web Component Integration.

The HostSettings will define the component's inputs, however these can be overriden by passing these settings as attributes to the component's HTML implementation.

Additionally, there is an optional boolean useIcons that can be passed to the bootstrap function. By default, this is set to false as icons preferrably are initialized top-level in the app using the MyHealth - Angular design kit. Setting this setting to true while importing the component's stylesheet, will create a new font for the component's icons.

Manifest, inputs & outputs

Each MyHealth webcomponent provides a manifest constant that is compliant with the guidelines provided by the MyHealth - Web Component Integration.

The manifest can be viewed to see the component(s) inside the package, as well as required additional inputs and outputs that the component may emit.

Vaccinations component (FHIR)

tagName: <mh-web-component-vaccinations />

| Property | Type | Required | Description | | --------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | user-language | UserLanguage | No | The language for the webcomponent interface. Automatically updates the translation service when changed. | | config-name | ConfigName | No | The configuration name that determines the environment and API endpoints. Set to "demo" to use mock data instead of API calls. | | full-name | string | No | The user's full name, will be displayed in the PDF on the top right side if it is provided. | | Event | Type | Required | Description | | --------- | ------------ | -------- | --------------------------------------- | | onprint | printEvent | Yes | Emits content that neesd to be printed. |

Legacy vaccinations component (KMEHR)

tagName: <mh-web-component-vaccinations-legacy />

The implementation for this component is similar to the implementation of the non-legacy component:

import { legacy } from '@myhealth-belgium/web-component-vaccinations';

// Call bootstrap function with your HostSettings & HostServices
legacy.bootstrap({ settings: SETTINGS, services: SERVICES });

// Place the webcomponent in your HTML for it to render
return (
  <mh-web-component-vaccinations-legacy
    onprint={printToPdf($event)}
    full-name="John Doe"
  ></mh-web-component-vaccinations-legacy>
);

All inputs and outputs are identical to the non-legacy component.

Mock data

There is an option to display simple mock data with this webcomponent by changing the config-name attribute passed to the webcomponent to: config-name="demo", or configure it in HostSettings. When in demo mode, the webcomponent will not make API calls and use standard mock data instead.

Design kit integration

As stated before, all MyHealth webcomponents use the MyHealth - Angular design kit package.

This means all webcomponents use the core functionality of the design kit, and override the Material components that the webcomponent consumes.

By default, importing @myhealth-belgium/web-component-vaccinations/styles.css will execute the mixins below.

@include mh.core();
@include mh.override-mat-table();
@include mh.override-mat-form-field();
@include mh.override-mat-button();

You can leave out the styling if you provide these mixins yourself using the MyHealth - Angular design kit.

This package is owned and maintained by:

FPS Health, Food Chain Safety & Environment Av. Galilée 5 bus 2, 1210 Brussels