Commit 32313f42 authored by Muhammad Kamran's avatar Muhammad Kamran

created appointment status component.

parent f161a85c
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../node_modules/@lh-toolkit/fhir-appointment-status/fhir-appointment-status.js"></script>
<h1>Default element without passing url</h1>
<h1>Default element without passing url but with JSON</h1>
<fhir-appointment-status value= "pending"></fhir-appointment-status>
<h1>Default element when url is passed</h1>
<fhir-appointment-status url=""></fhir-appointment-status>
......@@ -7,6 +7,7 @@
"version": "0.0.1",
......@@ -26,6 +26,7 @@
"dependencies": {
# fhir-appointment-status
The fhir-appointment-status adds status of appointment to page. It is commonly used
as a form field. It uses input type "select" and iron-ajax.It is a coded concept in FHIR and hence hard-coded into the pattern.
### Functionality
Default : shows a selectable input field for `display`. Options include : Proposed, pending, booked, arrived, fulfilled, cancelled, noshow, entered in error, checked-in, waitlist as options.
######a. GET:
- It selects and option from available select options when it receives a value. `value` can be passed as a string.
- It can also receive value from a 'url' which can be passed as property "url". The `status` key value is checked for in key-value pair of data.
- If it does not receive any matching value, it shows blank.
- Setting `typeField` property as true or false can help show and hide this component.
######b. SET:
- A selection of option sets the value of the component used for posting purposes.
### Properties of fhir-appointment-status
- `value`:`Array` - used to take the input value of each field.
- `url`:`String` - used to make AJAX call to FHIR resource. Default: null.
- `typeField`:`String` - selectable option category of allergy. Use this property to show/hide. Default: true.
### License
Mozilla Public License, v. 2.0.
### Typical Use:
- With url:
`<fhir-appointment-status url=""></fhir-appointment-status>`
- Without url:
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at
* `<fhir-appointment-status>` adds status of appointment to page. Uses select to choose options.
* It is a code concept in FHIR and hence hard-coded into the pattern.
* In typical use, just use `<fhir-appointment-status url=""></fhir-appointment-status>`
* @customElement
* @polymer
* @demo
import { LitElement, html } from '@polymer/lit-element/lit-element.js';
import '@material/mwc-textfield/mwc-textfield.js';
import '@lh-toolkit/fhir-period/fhir-period.js';
import '@polymer/iron-ajax/iron-ajax.js';
class FhirAppointmentStatus extends LitElement {
static get properties() {
return {
/**typeField is a selectable option type of allergy. Use this property to show/hide. Default: true */
typeField: String,
/**url is used to make AJAX call to FHIR resource. Default: null */
url: String,
/**value is used to take the input value of each field*/
value: Array
/**default value of properties set in constructor*/
constructor() {
this.typeField = 'true';
this.value = [];
/**_didRender() delivers only after _render*/
_didRender() {
.addEventListener('iron-ajax-response', function(e) {
var appointmentStatus =;
if (e.detail.response.status !== undefined) {
appointmentStatus.value = e.detail.response.category;
} else {
_render({ typeField, url, value }) {
return html`
<div id="appointmentStatus">
${typeField !== 'false'
? html`
on-change="${e => (this.value.status =}"
<option value="proposed">Proposed</option>
<option value="pending">Pending</option>
<option value="booked">Booked</option>
<option value="arrived">Arrived</option>
<option value="fullfilled">Fulfilled</option>
<option value="cancelled">Cancelled</option>
<option value="noshow">No Show</option>
<option value="entered-in-error">Arrived</option>
<option value="checked-in">Checked in</option>
<option value="waitlist">Waitlist</option>
: ''}
window.customElements.define('fhir-appointment-status', FhirAppointmentStatus);
"name": "@lh-toolkit/fhir-appointment-status",
"version": "0.0.1",
"description": "The custom element for FHIR appointment status",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"repository": {
"type": "git",
"url": ""
"license": "MPL-2.0",
"dependencies": {
"@polymer/lit-element": "^0.5.1",
"@polymer/iron-ajax": "^3.0.0-pre.19"
"publishConfig": {
"access": "public"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment