Creating custom elements for the FHIR Observation resource

I created four custom elements this week, including fhir-observation-effectivedatetime, fhir-observation-category,fhir-observation-issued and fhir-observation-valuequantity. fhir-observation-effectivedatetime adds data and time an observation was made to the page. fhir-observation-category specifies the category of an observation ranging from laboratory to imaging. There are a total of 8 observation categories. The fhir-observation-issed is the datetime an observation was made available to providers, typically after the results have been reviewed and verified. fhir-observation-valuequantity adds the actual value of an observation to a page.

The figure below shows an implementation of the fhir-observation-valuequantity. In this component, the value of an observation can be added to the page by passing the value html attribute or a url. The value is a JSON object that contains the actual value of the observation, the unit of measurement, the measurement system and code. All these object fields are passed to the element but only the value and the units are displayed by default. The observation value can also be added to the page through a URL. When the url value is passed, the element makes an AJAX call and populates the appropriate textfield based on the JSON object returned.

The figure below shows the code behind the figure above.

More components will be created next week and I will also start the unit testing of all the elements.