@smals-belgium-shared/vidis-medication-scheme-list

Vidis medication scheme list web component

Context

VIDIS (Virtual Integrated Drug Information System) integrates several sources and systems:

• Recip-e prescriptions
• Vitalink / RSW / RSB medication scheme
• Vitalink / RSW / RSB diary notes
• Farmaflux delivered medications

In order to be reused by other software vendors, the VIDIS front-end is now split into web components. The container application will have to provide the input parameters to provision the web component with a working context.

Prerequisites

• A supported browser by our Web Components AND by eHealth
• A valid VIDIS token. It could be obtained from eHealth Token eXchange service. This token must be refreshed periodically in order to be used by VIDIS
• Notify partners that are using REST APIs so your VIDIS tokens & clients will be trusted :
  • Vitalink & their Apigee service – Contact: vitalink-support@smals.be
  • Farmaflux – Contact: vidis@farmaflux.be

IE (internet explorer) is not supported. You can include polyfill scripts ("polyfills") for the browsers that you must support.

Features

This web component offers a versatile and user-friendly way for patients to manage their medication schedule through three distinct views: list view, weekly view, and daily view. Each view provides a different perspective on the medication regimen, offering flexibility to help users track their medications according to their preferences and needs. The component also includes key information that is consistent across all views to ensure transparency and accuracy. Your view and filters are saved in the cache so you keep them when you come back to the medication scheme from another webcomponent

List view

The list view offers a comprehensive overview of all medications that the user is currently taking, as well as those that are planned for future use. This format is ideal for a broad view of the entire medication schedule, with the flexibility to filter and focus on either current or future medications. Each medication entry includes important information such as the medication name, dosage, and a leaflet with additional details. Users can select any medication in the list to view more detailed information, such as the start date, frequency, duration, and special instructions or warnings related to the medication. This view is particularly helpful for users who want to see all medications in one place or need to track multiple prescriptions. This view is often requested by caregivers.

Weekly view

The weekly view is particularly useful for users who want to organize and manage their medications over the course of a week. This view displays the medications the user needs to take during the selected week, with the current week being the default setting. However, users can select a different week using a calendar feature, allowing them to see upcoming medication schedules and plan ahead. Each medication is shown with clear indications of which days of the week the medication needs to be taken. In addition to medication name, dosage, and leaflet, this view gives users a clear layout of the week, helping them visualize when to take each medication. This feature is especially helpful for those who need to plan ahead, manage multiple medications, or fill a pillbox. Users can also access more detailed information, such as the start date, frequency, and any special notes, ensuring that users are fully informed.

Daily view

The daily view is tailored for those who need a more specific, day-to-day breakdown of their medication schedule. This view shows the exact time of day when each medication should be taken, helping users stay on track and avoid missing doses. The medication name, dosage, and leaflet are prominently displayed, along with a clear specification of which moment of the day the medication should be taken. This view is especially helpful for patients who need a precise schedule to manage their medications throughout the day. Whether it’s for morning, afternoon, or evening doses, the daily view ensures users know exactly when to take each medication. Users can also access more detailed information about the medication, such as its start date, frequency, and any specific instructions that may apply. This feature is ideal for individuals who need a more detailed, step-by-step guide for their daily medication regimen.

Inputs

Name	Mandatory	Possible values	Description
userLanguage	true	en, de, fr, nl	The language 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 adapts the translations based on the value set. The values of the language property are defined in the Language enum.
configName	true	acc, prod	Name of the configuration the application and the components are being deployed to.
authenticationStatus	true	unauthenticated, online-authenticated, offline-authenticated	Indicates the authentication state of the current user. When online-authenticated, the component can access all backend services. When offline-authenticated, the component uses cached data. When unauthenticated, no token is fetched from the host application.
professional	false	true, false	Indicates whether the component is being used in a professional context. If set to true, the ssin input must be provided and will be used to identify the patient. If false, the SSIN will be retrieved automatically from the authentication token. Defaults to false.
ssin	false	N/A	The patient's SSIN. Required when professional is true. When professional is false, this value is ignored and the SSIN is extracted from the authentication token.
offlineDataStorageEnabled	false	true, false	A boolean flag indicating whether offline data storage has been enabled by the user. When true, the web component can store and retrieve data locally for offline access.
isOfflineAuthenticated	false	true, false	Deprecated since v5.0.2 — use authenticationStatus instead. A boolean flag indicating whether the web component is being accessed from an offline state.
exchangeClientId	true	N/A	The client ID used for the token exchange.

Outputs

Name	Type	Description
open	{componentTag: string, props?: {[key: string]: unknown}}	Emitted when the user navigates to a medication scheme detail. Contains the target component tag and the detail event as a prop.
refresh	{status: 'request' | 'success' | 'fail'}	Emitted during data refresh cycles to indicate the current refresh status.
onError	{reported: boolean}	Emitted after the error dialog closes. reported is true if the user confirmed reporting the error; otherwise false.

Usage

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vidis medication scheme list web component</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="module" src="vidis-medication-scheme-list/medication-scheme-list.js"></script>
	<link rel="stylesheet" href="vidis-medication-scheme-list/medication-scheme-list.css">
</head>
<body>
<script>
	const wc = document.createElement("vidis-medication-scheme-list");

	// Common inputs for all VIDIS web components
	// Refer to https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration for more details
	wc.language = 'en'
	wc.configName = 'acc';
	wc.services = {
		cache: {
			get: (key) => (undefined),
			set: (key, value) => {
			},
			remove: (key) => {
			}
		},
		getAccessToken: async (audience) => "TODO : the eHealth OAuth2 JWT token.",
		registerRefreshCallback: () => {
		}
	}

	// Example on how to provide extra input parameter(s), if needed / requested by the component
	// wc["attributeName"] = "myValue" 

	// Example on how to listen to output parameter(s)
	wc.addEventListener("eventName", (event) => {
		console.log(`event:`, event)
		const params = event.detail;
		console.log('param:', params);
	})

	// Example on how to listen to output parameter(s), for printing
	wc.addEventListener("onPrint", (event) => {
		console.log(`event:`, event)
		const params = event.detail;
		console.log('param:', params);

		const byteArray = new Uint8Array(atob(params.content).split('').map(char => char.charCodeAt(0)))
		const blob = new Blob([byteArray], {type: 'application/pdf'})
		const url = window.URL.createObjectURL(blob)
		window.open(url, '_blank').print()
	})

	document.body.append(wc);
</script>
</body>
</html>

Versioning

This project follows Semantic Versioning. Each release is categorized by major, minor, and patch updates. Significant changes that may break existing integrations will be introduced with major versions. Please check CHANGELOG.md file for more info.

Accessibility

We are committed to making our web components accessible to all users. Our components are:

• Screen reader friendly : Designed to work well with popular screen readers (Talkback / VoiceOver / ...)
• Responsive : Adapt to various screen sizes (desktop / mobile).
• Compliant: Meet accessibility criteria, including ARIA labels and keyboard navigation

Customizations

The web components are build with Angular Material. The styling of it is overwritten by the “My Health” portal, by there design kit.

Troubleshoots

If you encounter issues while using the web components :

• Ensure that your token is valid and hasn't expired. For assistance, contact eHealth.
• Ensure you are using the latest version of the web components
• Ensure you are using a supported browser and that you have cleared your cache if issues persist.
• Ensure your organization, browser or device don't block calls to VIDIS API by any way.
• If none of the above, please contact mijngeneesmiddelen@riziv-inami.fgov.be / mesmedicaments@riziv-inami.fgov.be

License

GNU Lesser General Public License v3.0 or later