# Project: Create web components for FHIR Resources

**URL:** <https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904>\
**Category:** Google Summer of Code\
**Tags:** gsoc2021-project, fhir, toolkit, gsoc2021\
**Created:** [January 26, 2021, 1:59am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904 "2021-01-26T01:59:59Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [February 27, 2021, 10:32am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/22 "2021-02-27T10:32:00Z")

</div>

I made the changes and landed a MR. As the tests were passing even when they were incorrect, after changing some new fails occured , so i tried to fix some of these new and old fails but still there are 4 fails remaining (in total) from 2 components

- 2 from unit/fhir-observation-referencerange.html
- 2 from unit/fhir-location-get.html (might be a rendering error: [\<fhir-location-get\>demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-location-get.html) )

> **[\[fix\]: fix tests, modified webcomponents (!104) · Merge requests · LibreHealth...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/104)**
>
> \[done\]: - correctly pass done argument in test function callback. - minor webcomponent fixes from test errors.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [February 28, 2021, 10:07am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/23 "2021-02-28T10:07:39Z")

</div>

I have fixed the remaining failures and commited to the MR.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 2, 2021, 7:18pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/24 "2021-03-02T19:18:54Z")

</div>

I have created some webcomponents to implement Diagnostic-Report resource and a `get` webcomponent to assemble these components.

These are :

- [fhir-diagnosticreport-category](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-category.html)
- [fhir-diagnosticreport-code](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-code.html)
- [fhir-diagnosticreport-conclusion](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-conclusion.html)
- [fhir-diagnosticreport-conclusioncode](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-conclusioncode.html)
- [fhir-diagnosticreport-effectivedatetime](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-effectivedatetime.html)
- [fhir-diagnosticreport-get](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-get.html)
- [fhir-diagnosticreport-issued](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-issued.html)
- [fhir-diagnosticreport-media](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-media.html)
- [fhir-diagnosticreport-status](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-diagnosticreport-status.html)
- [fhir-reference](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/demos/fhir-reference.html)

the fields in the resource which are of reference type are used through the reference webcomponent created, some of the above mentioned component could possibly be replaced by the type components (some of which i had mentioned before) once they are created.

[link to MR](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/105)

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 10, 2021, 5:32pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/25 "2021-03-10T17:32:35Z")

</div>

I have made some mockups for the webcomponents i had mentioned before, also tried to show the utilised web-components (if any) used to create another web-component (RED ARROW)

 ![Screenshot from 2021-03-10 22-36-47](https://forums.librehealth.io/uploads/default/original/2X/9/927d3ac92b90e7856bedcc2619d8f5d833cbe26f.png) ![Screenshot from 2021-03-10 22-37-06](https://forums.librehealth.io/uploads/default/original/2X/d/dbb9d770708066f752966cd1da67eba4bec6a981.png) ![Screenshot from 2021-03-10 22-37-12](https://forums.librehealth.io/uploads/default/original/2X/4/4f54659467aa8be131c84b02a6adb2378bc40e42.png) ![Screenshot from 2021-03-10 22-37-58](https://forums.librehealth.io/uploads/default/original/2X/a/a23f4dcda005072b0f41a8e2b8b72dfea7abc979.png)

---

<div class="post-metadata">

**Author:** ![Adityakushwaha142](https://forums.librehealth.io/user_avatar/forums.librehealth.io/adityakushwaha142/32/1603_2.png) [@Adityakushwaha142](https://forums.librehealth.io/u/Adityakushwaha142)\
**Post date:** [March 11, 2021, 1:27pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/26 "2021-03-11T13:27:21Z")

</div>

Hey Everybody . I am not Able to understand is it the same project which is in gsoc this year [LibreHealth / LibreHealth Toolkit / lh-toolkit · GitLab](https://gitlab.com/librehealth/toolkit/lh-toolkit)  
but this repository is [LibreHealth / LibreHealth Toolkit / lh-toolkit-webcomponents · GitLab](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents) so this project thread is the extension of feature of lh-toolkit-webcomponent

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 14, 2021, 9:09am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/27 "2021-03-14T09:09:07Z")

</div>

@Adityakushwaha142 I think this project thread is just for the webcomponent part (the second link you have attached) :}

---

<div class="post-metadata">

**Author:** ![Adityakushwaha142](https://forums.librehealth.io/user_avatar/forums.librehealth.io/adityakushwaha142/32/1603_2.png) [@Adityakushwaha142](https://forums.librehealth.io/u/Adityakushwaha142)\
**Post date:** [March 14, 2021, 1:59pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/28 "2021-03-14T13:59:36Z")

</div>

ohk bro . Thanx a lot

---

<div class="post-metadata">

**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\
**Post date:** [March 15, 2021, 12:34am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/29 "2021-03-15T00:34:25Z")

</div>

> [@Shashwat](#):
>
> @Adityakushwaha142 I think this project thread is just for the webcomponent part (the second link you have attached) :}

FHIR is a standard for EHR interoperatability. We hope to add support to LibreHealth Toolkit.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 15, 2021, 7:48pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/30 "2021-03-15T19:48:02Z")

</div>

Hello everyone ! I have a doubt related to `create` type resource based webcomponent. Some of the fields in the resource are of Array prototype with nested objects, for webcomponents other than the create type these objects are shown one after the other but in these create type webcomponent we can only send one object as the request…

below is the patient-get webcomponent with multiple `name` and `telecom details` fields..

 ![Screenshot from 2021-03-16 00-56-31](https://forums.librehealth.io/uploads/default/original/2X/2/28d29c85129fa53cab2835e633775b2db688da26.png)

and now below is the create-patient webcomponent with max one element for any field…

 ![Screenshot from 2021-03-16 00-56-08](https://forums.librehealth.io/uploads/default/original/2X/3/3ab14245330905adf0734fa86d4dc64b0b7631b7.png)

so should we provide an addition type button (for all multiple value taking fields) which increases one more element with default empty values (only for these create type webcomponents)?

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [March 15, 2021, 9:34pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/31 "2021-03-15T21:34:34Z")

</div>

I think we should allow the developer implementing the UX using the web components should have a choice for that, like a repeat button or simply just add that subcomponent back to the page. i.e., this is implementation flexibility that should not be brought into the web component itself.

Does my reply make sense or did I not get what you are proposing?

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 16, 2021, 3:18am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/32 "2021-03-16T03:18:49Z")

</div>

> [@sunbiz](#):
>
> Does my reply make sense or did I not get what you are proposing?

Yes, this cleared my doubt and completely makes sense 👍

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 16, 2021, 12:52pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/33 "2021-03-16T12:52:50Z")

</div>

@r0bby what is the current status of this project, I mean is this a definite project ?

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [March 16, 2021, 2:15pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/34 "2021-03-16T14:15:19Z")

</div>

yes, it is a definite project, if we get good applicants.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 16, 2021, 6:42pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/35 "2021-03-16T18:42:17Z")

</div>

Are there any additions or changes that I should make to these (2nd pre task)? also should I create the datatype webcomponents I had made mockups on?

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [March 16, 2021, 7:49pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/36 "2021-03-16T19:49:27Z")

</div>

> [@Shashwat](#):
>
> also should I create the datatype webcomponents I had made mockups on?

Some of the mocked-up components are not very useful to build an EHR. e.g., money, annotation, timing, signature. It would be useful, if you could look at an EHR system, maybe the lh-radiology or lh-toolkit UI and think of components that will be useful to replace the existing JSP based web pages.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 19, 2021, 12:37pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/37 "2021-03-19T12:37:56Z")

</div>

I had a look at the above reference and some EHR systems and created a refined list of datatype that can be used:

- identifier (there is a `person-identifier` component present already, could use it for general purpose)
- code
- codeableconcept
- reference
- instant
- datetime
- attachment
- contact point
- quantity
- string (could be used for simple field that take simple number or text input )
- boolean (could be implemented like checked or unchecked boxes)

Some resouces that can help along with the already present ones:

- [Appointment](https://hl7.org/FHIR/appointment.html)
- [AppointmentResponse](https://hl7.org/FHIR/appointmentresponse.html)
- [Schedule](https://hl7.org/FHIR/schedule.html)
- [Slot](https://hl7.org/FHIR/slot.html)
- [Condition](https://hl7.org/FHIR/condition.html)
- [DiagnosticReport](https://hl7.org/FHIR/diagnosticreport.html)
- [ImagingStudy](https://hl7.org/FHIR/imagingstudy.html)
- [Immunization](https://hl7.org/FHIR/immunization.html)
- [MedicationRequest](https://hl7.org/FHIR/medicationrequest.html)
- [MedicationStatement](https://hl7.org/FHIR/medicationstatement.html)

Once the dataypes are ready, GET / POST component of the above can be created using the new and already created datatype webcomponents, only a few `resource-specific-component` will be required like :

- [Dosage](https://hl7.org/FHIR/dosage.html#Dosage)

---

<div class="post-metadata">

**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\
**Post date:** [March 19, 2021, 10:47pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/39 "2021-03-19T22:47:39Z")

</div>

Yup – ideally when this project is completed, we’ll have components for all FHIR Resources which will allow developers to build things out in any way they choose.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 20, 2021, 10:37am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/40 "2021-03-20T10:37:01Z")

</div>

I saw some open issues on the webcomponent repo [here](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/issues). Can we work on these ?

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [March 21, 2021, 6:37pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/41 "2021-03-21T18:37:22Z")

</div>

yes, sure, please feel free to create new issues, work on any existing issues and provide MRs. We are open-source, so no need to ask.

---

<div class="post-metadata">

**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\
**Post date:** [March 23, 2021, 12:15pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/42 "2021-03-23T12:15:03Z")

</div>

landed a MR for issue #44

> **[Draft: \[feat\]: Add utilities for fhir-reference custom type (!106) · Merge...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/106)**
>
> Solves #44 WORK DONE :

[Previous page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904.md?page=1)

[Next page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904.md?page=3)
