Skip to main content

Medblocks UI

Medblocks UI comprises a comprehensive suite of Web Components specifically designed for the development of applications based on the openEHR platform. These components are compatible with any web browser that offers support for them. In addition to their standalone utility, developers can seamlessly integrate Medblocks UI with various front-end frameworks, thereby facilitating the creation of intricate single-page applications. Moreover, there is the added advantage of being able to incorporate these components freely within back-end templates, offering further flexibility and robustness in application design.

Web components are a framework agnostic way to build reusable components. They are a set of web standards that allow you to create custom HTML elements. They are supported by all modern browsers. Some front-end frameworks support custom elements better than others. Using with React is often complicated so the newest version of Medblocks UI comes with pre-built React components.

Quick Start​

Add the package to your HTML file​

index.html
<!-- Main Package -->
<script src="https://unpkg.com/[email protected]/dist/bundle.js"></script>
<!-- Styles -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"
/>

If you want to use it with other frameworks like React, Vue, Angular, Svelte, etc. You can check out the installation page.

Create a form based on a template​

The template used in the example is blood_pressure.json. It captures two simple fields - Systolic, Diastolic blood pressure and Date Time at which it was captured. Medblocks UI supports the FlatPath format of openEHR compositions.

First lets add the necessary contexts to the form such as language, category and territory. We will use the mb-context with the path attribute to add the contexts.

index.html
<mb-form>
  <mb-context path="blood_pressure/language" />
  <mb-context path="blood_pressure/encoding" />
  <mb-context path="blood_pressure/subject" />
</mb-form>

Then we add the necessary fields to capture the data.

index.html
<mb-form>
  <mb-context path="blood_pressure/language" />
  <mb-context path="blood_pressure/encoding" />
  <mb-context path="blood_pressure/subject" />
  <mb-quantity
    default="mm[Hg]"
    path="blood_pressure/any_event:0/systolic"
    label="Systolic"
  >
    <mb-unit unit="mm[Hg]" label="mm[Hg]" min="" max="1000"></mb-unit>
  </mb-quantity>
  <mb-quantity
    default="mm[Hg]"
    path="blood_pressure/any_event:0/diastolic"
    label="Diastolic"
  >
    <mb-unit unit="mm[Hg]" label="mm[Hg]" min="" max="1000"></mb-unit>
  </mb-quantity>
  <mb-context path="blood_pressure/any_event:0/time"></mb-context>
</mb-form>

The same is rendered as: Blood Pressure form in Medblocks UI

To understand more about the different components and their usage, check out the components page.