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

This is preliminary and is not a definite project.

Hello everyone! i was going through the webcomponents repository and found out that the response of get request is displayed through textfields , formfields and selectfields in some components, i have a small doubt regarding this , if the response is read-only should’nt there be a disabled attribute set to true in such components so that the read-only information (if exists) cannot be changed or modified by the client ?

yes, depends on the data. It is up to the implementing developer of the web component to set the attribute as disabled.

1 Like

can we use new technology like react, angular in place of using polymer. can we make web components with new technology

This is not in any way binding and just my opinion: We should probably continue to use the same framework we started with. Unless you plan on porting the existing ones to either React/Angular, stick with Polymer.

1 Like

sure,then we can stick with polymer

I have assembled some of the datatypes that can be used as webcomponents in this repo as per one of the prerequisites, the reason for choosing these were the frequent use of these in the Fhir fields henceforth reducing extra efforts to create resource specific webcomponents …

  • References
  • Attachment
  • CodeableConcept
  • Annotation
  • Quantity
  • Money
  • Timing
  • ContactPoint
  • Signature *
  • SampledData *

These have been extracted from here.

(*) = These datatypes are not normative .

1 Like

hey what am thinking just port the existing components with react because am not seeing polymer future . React have more power . Should i try to implement this

Polymer allows for any framework build, including React, to be packaged as a web component. However, if you prefer React thats fine… but port the current ones to React, and then we can see.

sure then am starting porting to web components to React

Bonus points if you deploy to GitLab Pages using GitLab CI so we can test your code easily.

hey robby this project is in gsoc 2021.???

I mean whatever component you write. Actually, if you fork the repo it will deploy to GitLab pages for you. But it’s for the polymer components.

@Adityakushwaha142 the first post is what we expect for the project. We won’t make students wade through threads to find an ever-changing project specification.

sure !!! Thanx a lot

You should make some mockups of how these web components implementing the resources would look like. It is one thing to plan what resources would be used, another to see how they will look, the UX, and how they will be implemented as web components. Some of those resources that you point could probably be broken down into two or more web components.

Sure, will do. Currently i am working on implementing components for DignosticReport and will utilise one of the Datatype I have mentioned above , then i will start working on creating proper mockups.

hello guys! so while writing tests a doubt came to me regarding some of the already written tests.

So in some of the unit tests the done argument has not been passed in the callback to finish a test, and still has been, invoked like here in allergy-category :

i think because of this a problem is coming in these tests: the test is giving passed status independent of the value being checked. like here in allergy-category tests

in the above case the value being checked in the highlighted line is correct. but even if i change the value being checked to some random text it still shows a passed test… like here below:

now if i pass the done argument in the test callback fn and remove the other done passed in scoped functions, then the output comes correct… so should i change this ?

yes, please make the change and send a PR

1 Like