Project: Create web components for FHIR Resources


In 2018 , We changed how we build applications but working on components that provide FHIR components functionality as web components that can be used on the toolkit, radiology and EHR project.

Please review the code from the last summer project here

  1. LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab (code for the web components)

This was the demo application for the web components - paru M / lh-toolkit-app · GitLab

An example of a postposed way to build the components is available here - GitHub - namratanehete/librehealth-signin: This is login page polymer component.

A very extensive discussion of the project which is a MUST read is here - Project: Web Components for FHIR Resources - #102 by SuKSW

For this summer (2019) you will assemble all the components into a complete application that is replicable of the LibreHealth Toolkit system : see demo here : LibreHealth Toolkit - Home

To make this complete , you will need to complete building the web components for the following resources orders and OBSERVATIONS

We prefer for you to use Polymer ( but any javascript language of choice can be used including Angular, JQuery, or React

Technical Requirements

  1. Javascript
  2. Web components
  3. REST


  1. Please review FHIR, specifically on the FHIR components Overview - FHIR v4.0.1
  2. Implement components based on the FHIR resources
  3. An example component - GitHub - namratanehete/librehealth-signin: This is login page polymer component., but not on FHIR
  4. Bonus points - Developing the new UI for radiology or EHR using the components developed in 1 and 2

Prerequisite Task

  • Review the above documentation and provide a list of components that are missing
  • Pick one of the resources and make a web component

Deliverable At the end of this project, you would have a repository of various web components with their documentation and a complete end to end toolkit app with the FHIR backend

Potential mentors @namratanehete @sunbiz @judywawira


  • After playing around with the web components for a while and refactoring the ehr workflow UI, I observed that the web components are a little or not customizable. This becomes a major disadvantage when we try to apply custom styles on these components. Even, it is impossible to customize the layout or even any minor functionality in them. I think of two ways to make up these flaws:

    1. fixing the current web components with options for custom styling, conditional rendering of any sub-component as per user’s need, which may be a bit complex considering it is made with LitElement
    2. rewriting these web components in ReactJS, and using the MaterialUI for providing enhanced UI features, which may seem a bit hectic

What do you think about this?

1 Like

Rewriting this is wasteful. You can use React (non-JSX) components with LitElement. The close to web components standard of LitElement makes it more flexible than ReactJS lock-in.

How are things going? You have until 2022-04-19T18:00:00Z to get this finalized. Finalized means the starter task is completed and ready for review. Failure to do the starter task is an immediate rejection. We do occasionally (though rarely) give extensions for the starter task, we have no control over the Google side of things.