Project: Web Components for FHIR Resources

toolkit
gsoc2018-project
gsoc2018

(Parvati Ravindranathan Naliyatthaliyazchayil) #34

Yes i did post what you suggested on my blog post at


(Parvati Ravindranathan Naliyatthaliyazchayil) #35

Is anyone joining the meeting now?


(Saptarshi Purkayastha) #36

Recording of the call - https://iu.mediaspace.kaltura.com/media/Webcomponents+for+FHIR/1_bp3ey6hu


(Subhashinie) #37

This is the blog post regarding the resources I am currently working on.

Also for those who are working on Polymer 3.0, a stable version has been released four days ago. So Polymer 3.0 templates are now available via 'polymer init`.


(Subhashinie) #38

@sunbiz @judywawira Will it be alright if we use https://github.com/FHIR/fhir.js to request data from the HAPI-FHIR server?


(Subhashinie) #39

Also is it necessary to use material web components for textfields as well? With material it is something like image 1 and we could get a similar thing with only css like image 2. Can’t we use pure css at least for the text fields? We can maintain uniformity by using a single css file. (Although we can get image 2 with material, won’t it then import unnecessary amount of styles we do not need?)

Image 1: textfield

Image 2: inputcss


(Saptarshi Purkayastha) #40

I think it is necessary to use the material components. We will have a common style for all the elements and will be easy to integrate them in the EHR that @parumenon1 needs to start working on after the mid-term.

If all fields on the page use the same styles, it won’t be a problem of loading in the browser, since browsers are intelligent to download this once.


(Subhashinie) #41

Okay… I’ll continue with the material components.


(Namratanehete) #42

I also agree to use material components.


(Subhashinie) #43

I temporarily created a github repository to store what I have done upto now. It currently contains a few partially complete components for the schedule resource and a basic demo. Below is the demo using those components. Did not add the FHIR functionality yet. I guess the documentation of “dom-repeat” have not yet been updated for polymer 3.0. Until I figure that out, I’ll be working on schedule-add component and the components for Appointment this week, while improving the components shown below.


(Parvati Ravindranathan Naliyatthaliyazchayil) #44

Hello @sunbiz, @namratanehete, @judywawira I have made the blog post of this week where I have written about the components I worked on the past week and its functionalities. Would like to request you to give suggestions if something doesn’t seem correct.


(Art Eaton) #45

I am not going to sign up for Medium, but pretend a whole lot of clapping was added. In the meantime, add a really cool rock riff as background music.

  "I was working just yesterday", "But I just bought it.", "My cousin said that can't be the problem."  Yeah.  No shortcuts, and sometimes you have to backtrack to get your eyeglasses and lunch-box.

  -Excellent patience for the patients.  One component at a time.  Now, you can just script the implementation of one, run a quick compile and just have all the rest done in a few minutes..

…or just keep plugging away…

  Two weeks in, and you have something that WORKS.  That is awesome!

(Subhashinie) #46

Those who are building web components, how did you take input through the material web component “textfiled” (mwc-textfield)? This was what I tried. When the native “input” and “mwc-textfield” were given inputs and the button is clicked, only the input from the native can be printed in the console. Here the button simply logs the value of the attribute “inputValue” in the console. The material “textfield” only logs an empty string. Was anyone able to work that out?


(Saptarshi Purkayastha) #47

It is the usual <input> way. Just use the value property to get/set the value in the mwc-textfield. Whats the error that you are receiving?

I will soon be posting here - https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents , an example custom element, unit test and packing scripts that I suggest both of you fork, clone and then follow as a pattern for other custom elements. Please send Merge Requests from your fork, when you have created new custom elements.


(Subhashinie) #48

It does not give an error regarding that, not in the browser console or in the cmd terminal. When I type in both “input” and “mwc-textfield” and click the button which prints the received values in the console, text from “input” is printed and text from “mwc-textfield” is not. It only a blank space is printed. It is not the initially assigned value either. This is my code.

import {LitElement, html} from '@polymer/lit-element';
import {Button} from "@material/mwc-button";
import {Textfield} from "@material/mwc-textfield";

/**
 * `lhwc-search-with-options element`
 * web component for all FHIR resources
 */
class SearchWithOptions extends LitElement {
    constructor() {
        super();
        this.inputValue = "";
        this.inputValue2 = "a";
        this.optionSelected = "";
    }

    static get properties() {
	    return {
	        inputValue: String,
	        inputValue2: String,
                optionSelected: String,
	        inputLabel: String,
	        optionsToSelect: Object
	    }
    };

    _render({inputLabel, optionsToSelect}) {
        var optionsArr = JSON.parse(optionsToSelect);
        return html`
            <style>
             .search-input {
                width: 180px;
             }
             .search-gap-tiny {
                margin-left: 5px;
             }
            </style>
            <label class="search-gap-tiny" for="search-input">${inputLabel}</label>
            <input class="search-input" id="search-input"
                on-input=${e => this.inputValue = e.target.value}></input>
            <mwc-textfield on-input=${e => this.inputValue2 = e.target.value}></mwc-textfield>

            <select class="search-gap-tiny" id="search-select">
                ${optionsArr.map((i) => html`<option value$=${i.id}>${i.name}</option>`)}
            </select>
            <mwc-button class="search-gap-tiny" raised label="Search"
                on-click=${() => this.showTheInput()}>
            </mwc-button>
        `;
    }

    showTheInput() {
        console.log(this.inputValue);
        console.log(this.inputValue2);
    }
}

window.customElements.define('lhwc-search-with-options', SearchWithOptions);

This is the output.


(Subhashinie) #49

Until we find a workaround for this or material web components releases “textfield” in npm, is it okay if I continue with the native “input”, then later replace all the “inputs” with “mwc-textfields”? Or is it better to continue with “mwc-textfield” from now itself?


(Subhashinie) #50

This is my blog post for coding week 2 & 3. I built a component named . It is just like the component that is in the librehealth repo. I am currently adding the tests.


(Saptarshi Purkayastha) #51

I wrote to you in chat, but I will write here again. Do you have a repo where I can look at this and other code. I dont understand what do you mean by received text is not printed. I am not sure I understand why you have used the arrow functions on the mwc-button on-click.


(Subhashinie) #52

I just made a commit including,

The code tries to print input from all three into the console. This is the link to the repository : https://github.com/SuKSW/lh-web-components . I used the arrow functions because the other way did not work for me. I thought maybe it was different in LitElements compared to PolymerElements. Also using arrow functions worked.

The code for the new component as mention in the blog post is in : https://gitlab.com/SuKSW/lh-toolkit-webcomponents/tree/newcomponent . It is a fork of the main repo but not in the master branch.

Regarding the reply I got in the chat, I am sorry. Truly didn’t see it. I also left a reply there.


(Subhashinie) #53

Oh… the arrow functions can be found here also : https://github.com/Polymer/lit-element/blob/master/README.md