# Project: Create web components for FHIR Resources **URL:** \ **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:** 1
**Author:** ![judywawira](https://forums.librehealth.io/user_avatar/forums.librehealth.io/judywawira/32/264_2.png) [@judywawira](https://forums.librehealth.io/u/judywawira)\ **Post date:** [January 26, 2021, 2:00am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/1 "2021-01-26T02:00:00Z")
**Background** 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](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents) (code for the web components) This was the demo application for the web components - [paru M / lh-toolkit-app · GitLab](https://gitlab.com/parumenon.pm/lh-toolkit-app) An example of a postposed way to build the components is available here - [GitHub - namratanehete/librehealth-signin: This is login page polymer component.](https://github.com/namratanehete/librehealth-signin) A very extensive discussion of the project which is a MUST read is here - [Project: Web Components for FHIR Resources - #102 by SuKSW](https://forums.librehealth.io/t/project-web-components-for-fhir-resources/2336/102) 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](https://radiology.librehealth.io/lh-toolkit/) 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 ([https://www.polymer-project.org](https://www.polymer-project.org)) but any javascript language of choice can be used including Angular, JQuery, or React **Technical Requirements** 1. Javascript 2. Web components 3. REST - Join our community and introduce yourself here [Meet the community: Introduce yourself here!](https://forums.librehealth.io/t/meet-the-community-introduce-yourself-here/45/) - Join our chat for live feedback and access to a larger team of mentors [here](https://chat.librehealth.io/group/gsoc). **Resources** 1. Please review FHIR, specifically on the FHIR components [Overview - FHIR v4.0.1](https://www.hl7.org/fhir/overview.html) 2. Implement components based on the FHIR resources 3. An example component - [GitHub - namratanehete/librehealth-signin: This is login page polymer component.](https://github.com/namratanehete/librehealth-signin), 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 ---
**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:** [January 26, 2021, 2:02am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/2 "2021-01-26T02:02:27Z")
---
**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:** [January 26, 2021, 9:15pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/3 "2021-01-26T21:15:26Z")
This is preliminary and is not a definite project. ---
**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 9, 2021, 3:00am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/4 "2021-02-09T03:00:41Z")
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 ? ---
**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:** [February 9, 2021, 4:43am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/5 "2021-02-09T04:43:05Z")
yes, depends on the data. It is up to the implementing developer of the web component to set the attribute as _disabled_. ---
**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:** [February 14, 2021, 4:15am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/6 "2021-02-14T04:15:15Z")
can we use new technology like react, angular in place of using polymer. can we make web components with new technology ---
**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:** [February 14, 2021, 4:46am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/7 "2021-02-14T04:46:14Z")
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. ---
**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:** [February 14, 2021, 7:39am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/8 "2021-02-14T07:39:44Z")
sure,then we can stick with polymer ---
**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 15, 2021, 2:58pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/9 "2021-02-15T14:58:51Z")
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](https://www.hl7.org/fhir/datatypes.html). (\*) = These datatypes are not normative . ---
**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:** [February 15, 2021, 8:07pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/10 "2021-02-15T20:07:55Z")
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 ---
**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:** [February 15, 2021, 8:34pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/11 "2021-02-15T20:34:44Z")
> [@Adityakushwaha142](#): > > 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. ---
**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:** [February 16, 2021, 4:28pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/12 "2021-02-16T16:28:08Z")
sure then am starting porting to web components to React ---
**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:** [February 17, 2021, 3:38am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/13 "2021-02-17T03:38:33Z")
Bonus points if you deploy to GitLab Pages using GitLab CI so we can test your code easily. ---
**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:** [February 17, 2021, 4:53pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/14 "2021-02-17T16:53:40Z")
hey robby this project is in gsoc 2021.??? ---
**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:** [February 17, 2021, 9:20pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/16 "2021-02-17T21:20:34Z")
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. ---
**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:** [February 18, 2021, 5:17am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/17 "2021-02-18T05:17:17Z")
sure !!! Thanx a lot ---
**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:** [February 21, 2021, 8:28pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/18 "2021-02-21T20:28:28Z")
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. ---
**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 22, 2021, 5:40am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/19 "2021-02-22T05:40:35Z")
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. ---
**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 26, 2021, 6:04pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/20 "2021-02-26T18:04:28Z")
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 : ![allergy-category](https://forums.librehealth.io/uploads/default/original/2X/2/254530428fcdc926482e279f75eceeeee267c07e.jpeg) 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 ![correct](https://forums.librehealth.io/uploads/default/original/2X/1/17948ca84bf825dcdd022cd0f3984203d1be9be9.jpeg) 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: ![wrongvalue](https://forums.librehealth.io/uploads/default/original/2X/9/97b54869aff32fbac3749556946c88587c15d113.jpeg) 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 ? ---
**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:** [February 26, 2021, 10:15pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904/21 "2021-02-26T22:15:12Z")
> [@Shashwat](#): > > 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 [Next page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/3904.md?page=2)