# Project: Create web components for FHIR Resources **URL:** \ **Category:** Toolkit\ **Tags:** gsoc2021-project, toolkit, gsoc2021\ **Created:** [May 17, 2021, 9:13pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155 "2021-05-17T21:13:26Z")\ **Posts on this page:** 17\ **Page:** 4
**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:** [July 30, 2021, 6:06pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/63 "2021-07-30T18:06:28Z")
@MeeJ All of the components planned for this term are now created and merged, it would be great if you could provide some feedback for these components : - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-appointment.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-encounter.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-dosage.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-medicationstatement.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-medicationrequest.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-servicerequest.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-vitals.html) - [\ demo](https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-schedule.html) ---
**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:** [July 31, 2021, 6:46pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/64 "2021-07-31T18:46:23Z")
@sunbiz @MeeJ Would it be better if all the `text-fields` be either filled (preferably) or outlined ? like here below : won’t it look better if all the fields were filled rather than some being outlined and some filled ? ![sample](https://forums.librehealth.io/uploads/default/original/2X/6/623f564fb16f1e7f2e7429f4c21d2a6eb4f0d177.png) ---
**Author:** ![MeeJ](https://forums.librehealth.io/letter_avatar_proxy/v4/letter/m/839c29/32.png) [@MeeJ](https://forums.librehealth.io/u/MeeJ)\ **Post date:** [August 3, 2021, 1:37pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/65 "2021-08-03T13:37:36Z")
Hi @Shashwat Sure, I will go through them today and will get back to you with feedback. ---
**Author:** ![MeeJ](https://forums.librehealth.io/letter_avatar_proxy/v4/letter/m/839c29/32.png) [@MeeJ](https://forums.librehealth.io/u/MeeJ)\ **Post date:** [August 3, 2021, 1:44pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/66 "2021-08-03T13:44:50Z")
Hi, @Shashwat I do feel that in the input field space, instead of keeping the placeholder as “Text,” adding a status value in a lighter text color would be intuitive for the user to understand. For example, if you look at the code field in the attached screenshot, the user need not see the entire code, but an example with format would make it easier to fill forms. Also, if you could add asterisks to indicate mandatory fields, that would be a good practice. ![Screen Shot 2021-08-03 at 9.40.19 AM](https://forums.librehealth.io/uploads/default/original/2X/0/0ecb609d6200e8277901fec2b0153554e1a760cf.png) Kindly let us know what you think @sunbiz Thank you, Meenal J ---
**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:** [August 3, 2021, 2:47pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/67 "2021-08-03T14:47:28Z")
Thanks a lot for this feedback @MeeJ! * * * > [@MeeJ](#): > > if you could add asterisks to indicate mandatory fields, that would be a good practice. @sunbiz Almost all of the resources accept empty data values(all fields unfilled), without any validation error. So which fields should be put in the required category ? ---
**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:** [August 3, 2021, 11:35pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/68 "2021-08-03T23:35:56Z")
I can’t find the issue where we discussed this, but required fields should be left to the implementation of the web component on a page, and not on the element itself. There are probably many issues with this concept, but one that’s obvious is that the FHIR standard for a resource has many required fields. If an implementer does not make those required fields then will get an error from the API. Maybe we should require those fields that are required by the standard? ---
**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:** [August 4, 2021, 5:21am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/69 "2021-08-04T05:21:11Z")
@sunbiz As I had mentioned in the proposal, the last 2 weeks included working on some extra admin and user profile page and some bug fixing in the react application. As we are not using a real server / database (can’t modify existing user data) what should these pages contain? ---
**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:** [August 4, 2021, 6:52am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/70 "2021-08-04T06:52:11Z")
[https://geforce6t.github.io/blog/2021/08/04/Week8/](https://geforce6t.github.io/blog/2021/08/04/Week8/) ---
**Author:** ![MeeJ](https://forums.librehealth.io/letter_avatar_proxy/v4/letter/m/839c29/32.png) [@MeeJ](https://forums.librehealth.io/u/MeeJ)\ **Post date:** [August 5, 2021, 5:27am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/71 "2021-08-05T05:27:58Z")
Hi @Shashwat, I went through the components that you linked above and had similar feedback for almost all of them. I have added my comments in the attached screenshot that can help in improving the UI and UX of these forms. I felt the fields are not consistent; some had placeholders as value, whereas some had labels. This can confuse the user. Also, if could you improve the spacing as this might look cluttered for the user. The comments in the below image are applicable for other components too. ![FHIR Appointment](https://forums.librehealth.io/uploads/default/original/2X/f/fdb7fa57cb708bb991bf4c901ace6d3159bc2faa.png) I hope this helps! Regards, Meenal J ---
**Author:** ![MeeJ](https://forums.librehealth.io/letter_avatar_proxy/v4/letter/m/839c29/32.png) [@MeeJ](https://forums.librehealth.io/u/MeeJ)\ **Post date:** [August 5, 2021, 5:28am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/72 "2021-08-05T05:28:38Z")
![FHIR-Encounter](https://forums.librehealth.io/uploads/default/original/2X/9/911ca1e304b6632d024ee16499348e57aca8abdb.png) ---
**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:** [August 11, 2021, 1:18pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/73 "2021-08-11T13:18:32Z")
[https://geforce6t.github.io/blog/2021/08/11/Week9/](https://geforce6t.github.io/blog/2021/08/11/Week9/) ---
**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:** [August 13, 2021, 5:46pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/74 "2021-08-13T17:46:21Z")
@sunbiz can you please take a look at this MR before others .. > **[style(placeholder-text): add placeholder text and helper text, remove unused...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/130)** > > \#116 Made astrisk visible for required field.... I’ve implemented most of the above mentioned pointers in the Appointment component, I’ll do the same for all the components if this is fine. Thanks! ---
**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:** [August 19, 2021, 6:27am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/75 "2021-08-19T06:27:47Z")
@r0bby@sunbiz I have created the final report here : [GSoC\_2021\_Final\_Report.md · GitHub](https://gist.github.com/geforce6t/93b02ec14ef2c5613500049717d0f5cd). Just wanted your approval before submitting this along with the final evaluation. ---
**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:** [August 21, 2021, 7:54pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/76 "2021-08-21T19:54:43Z")
Thank you for doing this! I am really proud of all of you! ---
**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:** [August 30, 2021, 10:29am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/77 "2021-08-30T10:29:11Z")
@sunbiz, made some UI changes in this MR, wanted to know your thoughts about these.. thanks! > **[feat(ui-changes): add button to add participant entry, move demo to a dark...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/134)** > > \#116 the number of participant entry can... ---
**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:** [August 31, 2021, 5:51am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/78 "2021-08-31T05:51:49Z")
@sunbiz thanks a lot for your mentorship during the summer. I have had a great experience and would love to continue working on this project beyond the program. ---
**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:** [November 19, 2021, 2:04am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/79 "2021-11-19T02:04:35Z")
[Previous page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155.md?page=3)