JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<html>
<head>
    <link
       href="https://lhcforms-static.nlm.nih.gov/lforms-versions/43.1.0/webcomponent/styles.css"
       media="screen" rel="stylesheet" />
</head>
<body>
  <button onclick="showQR()">
  Show FHIR QuestionnaireResponse
  </button>
  <div id=formContainer></div>
  
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/43.1.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/43.1.0/webcomponent/lhc-forms.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/43.1.0/fhir/R4/lformsFHIR.min.js"></script>
</body>
</html>

CSS

body {
  padding: 0.5em;
}

JavaScript

// Define a FHIR Questionnaire
var fhirQ = {
  "resourceType": "Questionnaire",
  "title": "Patient Information",
  "name": "Patient Information",
  "item": [{
    "type": "string",
    "required": false,
    "linkId": "name",
    "text": "Name"
  }]
};


// Add the form to the page
LForms.Util.addFormToPage(fhirQ, 'formContainer');


// Define the function for showing the QuestionnaireResponse
function showQR() {
  var qr = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'R4');
  window.alert(JSON.stringify(qr, null, 2));
}