JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<html>
<head>
    <link
       href="https://clinicaltables.nlm.nih.gov/lforms-versions/27.1.0/styles/lforms.min.css"
       media="screen" rel="stylesheet" />
</head>
<body>
  <button onclick="showQR()">
  Show FHIR QuestionnaireResponse
  </button>
  <div id=formContainer></div>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/27.1.0/lforms.min.js"></script>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/27.1.0/fhir/R4/lformsFHIR.min.js"></script>
  <script>
     // Define a FHIR Questionnaire
     var fhirQ = {
      "resourceType": "Questionnaire",
      "meta": {
        "profile": [
          "http://hl7.org/fhir/us/sdc/StructureDefinition/sdc-questionnaire|2.7"
        ]
      },
      "title": "Patient Information",
      "name": "Patient Information",
      "identifier": [
        {
          "value": "paitentInfo"
        }
      ],
      "item": [
        {
          "type": "string",
          "required": false,
          "linkId": "/name",
          "text": "Name"
        }
      ]
    };
    
    // Sample QuestionnaireResponse
    var qr = {
      "resourceType": "QuestionnaireResponse",
      "meta": {
        "profile": [
          "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaireresponse|2.7"
        ]
      },
      "status": "completed",
      "authored": "2019-12-19T19:47:54.655Z",
      "item": [
        {
          "linkId": "/name",
          "text": "Name",
          "answer": [
            {
              "valueString": "Abe"
            }
          ]
        }
      ]
    };
    
    // Convert FHIR Questionnaire to LForms format
    var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(fhirQ, 'R4');
    // Merge QuestoinnaireResponse
    var formWithUserData = LForms.Util.mergeFHIRDataIntoLForms("QuestionnaireResponse", qr, lformsQ, "R4");
    
    // Add the form to the page
    LForms.Util.addFormToPage(formWithUserData, formContainer);

  </script>
</body>
</html>