Commit b6dc840f authored by Muhammad Kamran's avatar Muhammad Kamran

created create-appointment component

parent b6343953
Pipeline #67618740 passed with stages
in 5 minutes and 31 seconds
<!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-create-appointment/fhir-create-appointment.js"></script>
<h1>Register a new appointment</h1>
......@@ -62,6 +62,7 @@
<li><a href="demos/fhir-positiveInt.html">fhir-positiveInt</a> </li>
<li><a href="demos/fhir-reference.html">fhir-reference</a> </li>
<li><a href="demos/fhir-appointment-participant.html">fhir-appointment-participant</a> </li>
<li><a href="demos/fhir-create-appointment.html">fhir-create-appointment</a> </li>
<h6>*If you don't see the elements after clicking on the link, you probably forgot
to do: <code>lerna bootstrap --use-workspaces</code></h6>
# fhir-create-appointment
The fhir-create-appointment creates a form/page to create a new patient with all reusable components like fhir-instant, fhir-positiveint, fhir-appointment-status, fhir-appointment-participant
### Functionality
Default : shows a group of fields used in the components stated above for `display` along with a "Submit" button.
- Typing in the value in textfield sets the value of the component.
- "url" can be provided using url property to direct where the data is to be posted.
- Pressing the button helps to post data to the desired url passed using url property.
- Data is posted in JSON format with `resourceType` as appointment.
### Properties of fhir-create-appointment
- `url`:`String` - used to make AJAX call to FHIR resource. Default: null.
### License
Mozilla Public License, v. 2.0.
### Typical Use:
- With url:
`<fhir-create-appointment url=""></fhir-create-appointment>`
- 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-create-appointment>` creates a form/page to create a new appointment with all reusable components.
* Uses fhir-components,mwc-button and iron-ajax.
* In typical use, just use `<fhir-create-appointment url=""></fhir-create-appointment>`
* @customElement
* @polymer
* @demo
import { LitElement, html } from '@polymer/lit-element/lit-element.js';
import '@material/mwc-button/mwc-button.js';
import '@lh-toolkit/fhir-appointment-status/fhir-appointment-status';
import '@lh-toolkit/fhir-instant/fhir-instant.js';
import '@lh-toolkit/fhir-positiveint/fhir-positiveint';
import '@lh-toolkit/fhir-appointment-participant/fhir-appointment-participant.js';
import '@polymer/iron-ajax/iron-ajax.js';
class FhirCreateAppointment extends LitElement {
static get properties() {
return {
/**url is used to make AJAX call to FHIR resource. Default: null */
url: String
_render({ url }) {
return html`
<fhir-appointment-status id="appointmentStatus"></fhir-appointment-status>
<fhir-instant id="start"></fhir-instant>
<fhir-instant id="end"></fhir-instant>
<p>Minutes Duration:</p>
<fhir-positiveint id="minutes"></fhir-positiveint>
<br />
<mwc-button id="button" raised on-click=${() => this.doPost()}
doPost() {
var status = this.shadowRoot.getElementById('appointmentStatus').value;
var start = this.shadowRoot.getElementById('start').value;
var end = this.shadowRoot.getElementById('end').value;
var minutes = this.shadowRoot.getElementById('minutes').value;
var participant = this.shadowRoot.getElementById('participant').value;
this.shadowRoot.getElementById('ajax').contentType = 'application/json';
this.shadowRoot.getElementById('ajax').body = {
resourceType: 'appointment',
status: status,
start: start,
end: end,
minutesDuration: minutes,
participant: participant
window.customElements.define('fhir-create-appointment', FhirCreateAppointment);
"name": "@lh-toolkit/fhir-create-appointment",
"version": "0.0.1",
"description": "The custom element helps to create a page for registering a appointment",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"repository": {
"type": "git",
"url": ""
"license": "MPL-2.0",
"dependencies": {
"@polymer/lit-element": "^0.5.1",
"@material/mwc-button": "^0.6.0",
"@polymer/iron-ajax": "^3.0.0-pre.19"
"publishConfig": {
"access": "public"
......@@ -58,7 +58,7 @@ class FhirInstant extends LitElement {
<div id="instantDiv">
${instant !== 'false'
? html`
<mwc-formfield class="instant" alignEnd label="Date Time:">
<mwc-formfield class="instant" alignEnd>
......@@ -55,7 +55,7 @@ class FhirPositiveInt extends LitElement {
<div id="positiveIntDiv">
${positiveInt !== 'false'
? html`
<mwc-formfield class="positiveInt" alignEnd label="Positive Int:">
<mwc-formfield class="positiveInt" alignEnd">
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