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

#

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

You can use this in all frameworks that support custom elements.

Usage

#

You will now be able to use all mb- web components in your app!

Try to build a simple auto generated form using the following:

<mb-auto-form id="form"></mb-auto-form>

<script>
  let form = document.getElementById("form")
  form.webTemplate = {
  // insert your openEHR web template here.
  }
</script>

You can download a simple example webtemplate from here.

Then go into your browser console and try

form.export() // outputs an openEHR composition in the FLAT format

You can also import a composition that works with this form using:

form.import({
  //insert your composition in FLAT format
})

Having more control over the form

#

The template used in the example above 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.

<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.

<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:

The VSCode extension is very useful if you're customizing your forms.

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