JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/lhc-forms.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/fhir/R4/lformsFHIR.min.js"></script>
</body>

CSS

body {
  padding: 0.5em;
}

JavaScript

// This is the form definition (as a FHIR Questionnaire)
var rxterms = {
  "resourceType": "Questionnaire",
  "id": "rxterms",
  "title": "RxTerms Lookup",
  "status": "draft",
  "item": [ {
    "extension": [ {
      "url": "http://hl7.org/fhir/StructureDefinition/terminology-server",
      "valueUrl": "https://clinicaltables.nlm.nih.gov/fhir/R4"
    }, {
      "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
      "valueCodeableConcept": {
        "coding": [ {
          "system": "http://hl7.org/fhir/questionnaire-item-control",
          "code": "gtable",
          "display": "Group Table"
        } ],
        "text": "Group Table"
      }
    }, {
      "url": "http://hl7.org/fhir/StructureDefinition/variable",
      "valueExpression": {
        "name": "strengthFormLookup",
        "language": "application/x-fhir-query",
        "expression": "https://clinicaltables.nlm.nih.gov/fhir/R4/CodeSystem/$lookup?system=https://clinicaltables.nlm.nih.gov/fhir/CodeSystem/rxterms&code={{item.where(linkId='medication').answer.valueCoding.code}}&property=STRENGTHS_AND_FORMS"
      }
    }],
    "linkId": "medications_table",
    "text": "Medications",
    "type": "group",
    "repeats": true,
    "item": [ {
      "extension": [ {
        "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
        "valueCodeableConcept": {
          "coding": [ {
            "system": "http://hl7.org/fhir/questionnaire-item-control",
            "code": "autocomplete",
            "display": "Auto-complete"
          } ],
          "text": "Auto-complete"
        }
      } ],
      "linkId": "medication",
      "text": "Medication Name",
      "type": "choice",
       "answerValueSet": "https://clinicaltables.nlm.nih.gov/fhir/R4/ValueSet/rxterms"
    }, {
      "extension": [ {
        "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-answerExpression",
        "valueExpression": {
          "language":...