LHC-Forms

https://lhncbc.github.io/lforms
Admin
LHC-Forms is an open-source widget for web applications that creates feature-rich input forms from...
Tokens:44,129
Snippets:259
Trust Score:8.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### LHC-Forms Installation via npm

Source: https://lhncbc.github.io/lforms/versions/30.x/index

This command installs the LHC-Forms package using npm. After installation, the JavaScript files still need to be loaded via script tags in the HTML, as they are not directly importable yet.

```bash
npm install lforms

```

--------------------------------

### Install LForms with Bower

Source: https://lhncbc.github.io/lforms/versions/7.x/index

Demonstrates how to install the LForms widget using the Bower package manager. This is a common method for managing front-end dependencies.

```bash
bower install lforms
```

--------------------------------

### Including FHIR Support Scripts

Source: https://lhncbc.github.io/lforms/versions/13.x/index

Instructions on how to include FHIR support files for both prebuilt versions and Bower installations for FHIR R4 and STU3.

```APIDOC
## Including FHIR Support Scripts

To add support for FHIR (and multiple versions of FHIR) to the LHC-Forms library, include the following separate files.

### Prebuilt Versions

For FHIR version "R4", include:
```html
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.6.0/fhir/R4/lformsFHIR.min.js"></script>
```

For FHIR version "STU3", replace "R4" in the URL with "STU3". Both versions can be included if needed.

### Bower Installation

If installing via bower, include the following files:

*   **R4:** `bower_components/lforms/app/scripts/fhir/R4/lformsFHIR.js`
*   **STU3:** `bower_components/lforms/app/scripts/fhir/STU3/lformsFHIR.js`

Similar to prebuilt files, you can include either the R4 or STU3 version, or both.
```

--------------------------------

### Install FHIR Support via Bower

Source: https://lhncbc.github.io/lforms/versions/17.x/index

When installing LHC-Forms via Bower, these are the paths to the additional FHIR support files for R4 and STU3 versions. You can include either or both.

```bash
# For R4 version:
bower_components/lforms/app/scripts/fhir/R4/lformsFHIR.js

# For STU3 version:
bower_components/lforms/app/scripts/fhir/STU3/lformsFHIR.js
```

--------------------------------

### Include LForms CSS and JavaScript (CDN)

Source: https://lhncbc.github.io/lforms/versions/7.x/index

Shows how to include the LForms CSS and JavaScript files directly from a CDN. This is a simple way to integrate LForms without local installation.

```html
<link
 href="https://clin-table-search.lhc.nlm.nih.gov/lforms-versions/9.0.0/styles/lforms.min.css"
 media="screen" rel="stylesheet" />

<script
 src="https://clin-table-search.lhc.nlm.nih.gov/lforms-versions/9.0.0/lforms.min.js"
 ></script>
```

--------------------------------

### Example of Retrieved User Data Structure (JSON)

Source: https://lhncbc.github.io/lforms/versions/7.x/index

This is an example of the JSON structure returned by `getUserData` after a user partially fills a form. It demonstrates how form data is organized, including nested items and associated units or coded values. The structure includes 'itemsData' for form content and 'templateData' for additional fields like 'Date'.

```json
{
  "itemsData": [
    {
      "questionCode": "35094-2",
      "items": [
        {
          "questionCode": "8480-6",
          "value": "100",
          "unit": {
            "name": "mm[Hg]",
            "default": false,
            "normalRange": null,
            "absoluteRange": null
          }
        },
        {
          "questionCode": "8357-6",
          "value": {
            "label": null,
            "code": "LA24014-5",
            "text": "Oscillometry",
            "other": null
          }
        }
      ]
    }
  ],
  "templateData": [
    {
      "value": "2015-11-09T05:00:00.000Z"
    }
  ]
}
```

--------------------------------

### Render form with removed top-level questions using LForms JavaScript

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This example shows how to configure an LForms form to hide top-level questions and controls. It achieves this by setting `showFormHeader` to `false` and `hideFormControls` to `true` within the `templateOptions` of the form definition. The core form structure remains similar to the basic example.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }]
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### LForms Form with AJAX Autocompletion (JavaScript)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This example shows how to implement AJAX autocompletion in an LForms form. It specifies an external URL for answer lists that are too large to include directly, allowing dynamic fetching of options as the user types.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideFormControls: true,
    showFormHeader: false,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X123",
    "dataType": "CNE",
    "question": "Drug Name",
    "externallyDefined": "https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search",
  }]
};
LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Implement LForms AJAX Autocompletion with JavaScript

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This example demonstrates how to use LForms for AJAX autocompletion. It defines a form item for 'Drug Name' with an 'externallyDefined' property pointing to a URL for searching. This is useful when answer lists are too large to include directly in the form definition.

```JavaScript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideFormControls: true,
    showFormHeader: false,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X123",
    "dataType": "CNE",
    "question": "Drug Name",
    "externallyDefined": "https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search",
  }]
};
LForms.Util.addFormToPage(formDef, 'formContainer');

```

```HTML
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Render form with custom top-level questions using LForms JavaScript

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This LForms demo illustrates how to define custom fields for the form header. By using the `formHeaderItems` array within `templateOptions`, developers can specify the questions and their display controls, including CSS styling for column width. The example also includes `hideFormControls` to manage overall form appearance.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    viewMode: 'lg',
  	formHeaderItems: [{
      question: "First name",
      displayControl:  {
        "colCSS":   [ // colCSS is buggy in 11.2.0; fix planned
           {"name":"width","value":"24%"},
           {"name":"min-width","value":"2em"}
         ]
      }
    },
    {
      question: "Last name",
      displayControl:  {
        "colCSS":   [
           {"name":"width","value":"76%"},
           {"name":"min-width","value":"6em"}
         ]
      }
    }],
    hideFormControls: true
  },
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }]
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Form Rendering HTML Structure (AngularJS)

Source: https://lhncbc.github.io/lforms/versions/7.x/index

Example of the HTML structure required for rendering an LForms form within an AngularJS application. It utilizes the custom 'lforms' directive.

```html
<body ng-app="myApp">
  <div ng-controller="myController">
    <lforms lf-data="myFormDefinition"></lforms>
  </div>
</body>
```

--------------------------------

### Require FHIR Support Files via npm

Source: https://lhncbc.github.io/lforms/versions/17.x/index

If using npm for installation, these `require` statements will include the FHIR support files for R4 and STU3 versions. Both can be required if necessary.

```javascript
// For R4 version:
require('lforms/app/scripts/fhir/R4/fhirRequire.js');

// For STU3 version:
require('lforms/app/scripts/fhir/STU3/fhirRequire.js');
```

--------------------------------

### Include FHIR Support Scripts for LHC-Forms

Source: https://lhncbc.github.io/lforms/versions/13.x/index

This snippet shows how to include the necessary JavaScript files for FHIR support in LHC-Forms. Two versions, R4 and STU3, are available and can be included independently or together. The scripts can be included via a CDN link or by referencing local files if installed via bower.

```html
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.6.0/fhir/R4/lformsFHIR.min.js"></script>
```

```html
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.6.0/fhir/STU3/lformsFHIR.min.js"></script>
```

```html
<!-- Or using bower -->
<script src="bower_components/lforms/app/scripts/fhir/R4/lformsFHIR.js"></script>
<script src="bower_components/lforms/app/scripts/fhir/STU3/lformsFHIR.js"></script>
```

--------------------------------

### Basic LForms Initialization with JavaScript

Source: https://lhncbc.github.io/lforms/versions/17.x/demos

Demonstrates how to define a form structure using JavaScript and initialize it on the page using LForms. Includes form definition, item configuration, and template options. Requires the LForms library and CSS.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }],
  templateOptions:{viewMode: 'lg'}
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

--------------------------------

### Define and Render a Simple Form with JavaScript

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This JavaScript code defines a basic form ('formDef') with two questions ('Weight' and 'Eye color') and associated options, then renders it using LForms.Util.addFormToPage. It showcases simple data types and unit definitions.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  items: [{
    "questionCode": "X-004",
    "question": "Weight",
    "dataType": "REAL",
    units: [{name: 'lbs'}, {name: 'kg'}]
  }, {
    "questionCode": "X-002",
    "question": "Eye color",
    "codingInstructions": "Enter the closest match:  Blue, Green, or Brown"
  }],
  templateOptions: {viewMode: 'lg'}
};

LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### AngularJS Controller for LForms

Source: https://lhncbc.github.io/lforms/versions/7.x/index

Demonstrates how to set up an AngularJS controller to provide the LForms form definition. It includes the 'lformsWidget' module and initializes the form data.

```javascript
angular.module('myApp', ['lformsWidget'])
  .controller('myController', ['$scope', function ($scope) {
    $scope.myFormData = new LForms.LFormsData(myFormDefinition);
  }]);
```

--------------------------------

### Including FHIR Support Scripts

Source: https://lhncbc.github.io/lforms/versions/27.x/index

Instructions on how to include FHIR support scripts for R4 and STU3 versions when using prebuilt versions, Bower, or npm.

```APIDOC
## Including FHIR Support Scripts

LHC-Forms provides separate files for FHIR support to manage library size. These scripts depend on `lforms.min.js` and should be included after it.

### Prebuilt Versions

For FHIR version "R4":
```html
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.0.0/fhir/R4/lformsFHIR.min.js"></script>
```

For FHIR version "STU3", replace "R4" with "STU3" in the URL. Both versions can be included if needed.

### Bower Installation

*   For R4: `bower_components/lforms/app/scripts/fhir/R4/lformsFHIR.js`
*   For STU3: `bower_components/lforms/app/scripts/fhir/STU3/lformsFHIR.js`

Either or both versions can be included.

### npm Installation

*   For R4: `require('lforms/app/scripts/fhir/R4/fhirRequire.js');`
*   For STU3: `require('lforms/app/scripts/fhir/STU3/fhirRequire.js');`
```

--------------------------------

### Define and Render a Basic LForms Form with Skip Logic (JavaScript)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This snippet defines a form structure using JavaScript, including skip logic to conditionally display questions based on user input. It then uses LForms utility to render this form into a specified HTML container. Dependencies include the LForms library and its CSS.

```javascript
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-001",
    "question": "Favorite dessert (try ice cream)",
    "dataType": "ST"
  }, {
    "questionCode": "X-002",
    "question": "Ice cream flavor?",
    "dataType": "ST",
    "skipLogic": {"conditions":[{"source": "X-001", "trigger": {"value": "ice cream"}}],
       "action": "show"}
  }, {
    "questionCode": "X-003",
    "question": "Favorite color",
    "dataType": "CNE",
    "answers": [
      {text: "Green", code: "c"},
      {text: "Other", code: "o"}
    ],
  }, {
    "questionCode": "X-004",
    "question": "Which shade of green?",
    "dataType": "ST",
    "skipLogic": {"conditions":[{"source": "X-003", "trigger": {"code": "c"}}],
       "action": "show"}
  }, {
    "questionCode": "X-005",
    "question": "Favorite number (try > 10)",
    "dataType": "REAL"
  }, {
    "questionCode": "X-006",
    "question": "Favorite <= 10?  (shown if previous is > 10)",
    "dataType": "REAL",
    "skipLogic": {"conditions":[{"source": "X-005", "trigger": {"minExclusive": "10"}}],
       "action": "show"}
  }]
};

LForms.Util.addFormToPage('formDef', 'formContainer');

```

--------------------------------

### Define a Basic LForms Form (JavaScript)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This snippet demonstrates the basic structure for defining a form using LForms. It includes setting form properties and defining questions with their data types. The form is then added to a designated HTML container.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-003",
    "question": "Birth date",
    "dataType": "DT"
  },
  {
    "questionCode": "X-004",
    "question": "Weight",
    "dataType": "REAL",
    units: [{name: 'lbs'}, {name: 'kg'}]
  }]
};

LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Define and Display a Basic LForms Form with Skip Logic (JavaScript)

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

Defines a JSON structure for a form with multiple question types and implements skip logic to conditionally display questions based on user input. It then uses LForms utility to add this form to a specified HTML container. Dependencies: LForms library.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-001",
    "question": "Favorite dessert (try ice cream)",
    "dataType": "ST"
  }, {
    "questionCode": "X-002",
    "question": "Ice cream flavor?",
    "dataType": "ST",
    "skipLogic": {"conditions":[{"source": "X-001", "trigger": {"value": "ice cream"}}],
       "action": "show"}
  }, {
    "questionCode": "X-003",
    "question": "Favorite color",
    "dataType": "CNE",
    "answers": [
      {text: "Green", code: "c"},
      {text: "Other", code: "o"}
    ],
  }, {
    "questionCode": "X-004",
    "question": "Which shade of green?",
    "dataType": "ST",
    "skipLogic": {"conditions":[{"source": "X-003", "trigger": {"code": "c"}}],
       "action": "show"}
  }, {
    "questionCode": "X-005",
    "question": "Favorite number (try > 10)",
    "dataType": "REAL"
  }, {
    "questionCode": "X-006",
    "question": "Favorite <= 10?  (shown if previous is > 10)",
    "dataType": "REAL",
    "skipLogic": {"conditions":[{"source": "X-005", "trigger": {"minExclusive": "10"}}],
       "action": "show"}
  }]
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

--------------------------------

### Example Form Data Structure in JSON

Source: https://lhncbc.github.io/lforms/versions/5.5/index

This JSON object represents the structure of data retrieved from a partially filled LForm. It includes 'itemsData' for form content and 'templateData' for elements like 'Date' and 'Comment'. The nested 'items' array shows how data is organized within sections.

```json
{
  "itemsData": [{
    "questionCode": "35094-2",
    "items": [{
      "questionCode": "8480-6",
      "value": "100",
      "unit": {
        "name": "mm[Hg]",
        "default": false,
        "normalRange": null,
        "absoluteRange": null
      }
    }, {
      "questionCode": "8357-6",
      "value": {
        "label": null,
        "code": "LA24014-5",
        "text": "Oscillometry",
        "other": null
      }
    }]
  }],
  "templateData": [{
    "value": "2015-11-09T05:00:00.000Z"
  }]
}
```

--------------------------------

### Define and Render a Demo Form with JavaScript

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This JavaScript code defines a form structure ('formDef') with nested questions, template options, and then uses LForms.Util.addFormToPage to render it into a 'formContainer' div. It demonstrates a complex form structure with headers and repeating items.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideFormControls: true,
    showFormHeader: false,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X123",
    "question": "Family member",
    "header": true,
    "items": [{
    	"questionCode": "X124",
      "question": "Name"
    },{
      "questionCode": "X125",
      "question": "Surgical History",
      "header":  true,
      "layout": "horizontal",
      "questionCardinality": {"min": "1", "max": "*"},
      "items": [{
      	 "questionCode": "X126",
         "question": "Date",
         "dataType": "DT",
         "displayControl": {
            "colCSS": [{"name": "width", "value":"25%"}]
         }
      },{
      	 "questionCode": "X127",
         "question": "Surgery type"
      }]
    }]
  }]
};
LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Search and Render LOINC Forms with Autocomplete (JavaScript, HTML)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This snippet enables users to search for LOINC forms using an autocomplete input and render the selected form. It uses Def.Autocompleter to provide suggestions based on LOINC item searches and then fetches the form definition to render it with LForms. The HTML includes the input field, placeholder, and necessary scripts.

```javascript
var ac = new Def.Autocompleter.Search('loinc_item',
  'https://clinicaltables.nlm.nih.gov/api/loinc_items/v3/search?type=form&available=true', {
    nonMatchSuggestions: false
  });

Def.Autocompleter.Event.observeListSelections('loinc_item', function() {
  var formCode = ac.getSelectedCodes()[0];
  if (formCode) {
  	jQuery('#formContainer').html('Loading...');
    setTimeout(function() { // so the "loading" message has a chance to appear
      // Load the form definition
      jQuery.get('https://clinicaltables.nlm.nih.gov/loinc_form_definitions?loinc_num=' + formCode,
        function(data) {
          window.loincData = data;
          LForms.Util.addFormToPage('loincData', 'formContainer');
        });
    });
  }
});

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <p>
    Select a LOINC form display:
  </p>
  <input type="text" id="loinc_item" placeholder="LOINC item" autocomplete="off" role="combobox" aria-expanded="false" class="search_field">
  <p>
    Note: LOINC form definitions are subject to the LOINC <a href="http://loinc.org/terms-of-use">terms of use</a>.
  </p>
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Remove Top-Level Questions in LForms JavaScript

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This example shows how to configure an LForms form to hide the default top-level questions and checkboxes. The `showFormHeader: false` and `hideFormControls: true` options within `templateOptions` are used to achieve this. The snippet includes the JavaScript form definition and the corresponding HTML structure.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }]
};

LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Render Single Question Form with LForms JavaScript

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This snippet demonstrates how to define and render a simple form with a single question using LForms. It includes the JavaScript for the form definition and the HTML structure with LForms library inclusion. The form definition specifies the form code, name, and the item (question). The LForms.Util.addFormToPage function is used to render the form.

```javascript
// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }],
  templateOptions:{viewMode: 'lg'}
};

LForms.Util.addFormToPage('formDef', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Define a simple LForms form with basic items in JavaScript

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This JavaScript code defines a simple form with basic input fields like 'Weight' and 'Eye color' using LForms. It includes data types, units, and coding instructions for the questions. The form is then added to the page using LForms.Util.addFormToPage.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  items: [{
    "questionCode": "X-004",
    "question": "Weight",
    "dataType": "REAL",
    units: [{name: 'lbs'}, {name: 'kg'}]
  }, {
    "questionCode": "X-002",
    "question": "Eye color",
    "codingInstructions": "Enter the closest match:  Blue, Green, or Brown"
  }],
  templateOptions: {viewMode: 'lg'}
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

--------------------------------

### Get Form Definition and User Data with LForms

Source: https://lhncbc.github.io/lforms/versions/34.x/index

The LForms.Util.getFormData() method retrieves both user data and the complete form definition. This is useful for saving and re-displaying forms. It accepts an optional form element, a flag to exclude empty values, and a flag to exclude disabled items.

```javascript
LForms.Util.getFormData(formElement, noEmptyValue, noDisabledItem)
```

--------------------------------

### Get User Data as HL7 v2 OBR/OBX Segments with LForms

Source: https://lhncbc.github.io/lforms/versions/34.x/index

For versions 12.8 and later, LForms.Util.getFormHL7Data() can retrieve user-entered data along with some form definition data formatted as HL7 v2 OBR and OBX segments. The method accepts an optional HTML element or its ID.

```javascript
LForms.Util.getFormHL7Data(element)
```

--------------------------------

### Include LForms CSS and JavaScript

Source: https://lhncbc.github.io/lforms/versions/6.x/index

Links to the LForms CSS and JavaScript files are necessary for the widget to function. These can be hosted by a service or included locally.

```html
<link
 href="https://lforms-service.nlm.nih.gov/lforms-versions/6.0.2/styles/lforms.min.css"
 media="screen" rel="stylesheet" />

<script
 src="https://lforms-service.nlm.nih.gov/lforms-versions/6.0.2/lforms.min.js"
 ></script>
```

--------------------------------

### Set FHIR Context using LForms.Util.setFHIRContext

Source: https://lhncbc.github.io/lforms/versions/34.x/index

This utility function establishes the connection to a FHIR server, which is necessary when a Questionnaire references external FHIR resources or launchContext variables. It accepts an instance of 'client-js' (from the fhirclient npm package) for the FHIR connection and an optional map of launchContext variables. This setup is crucial for LForms to resolve external dependencies and provide context for form rendering and data population.

```javascript
LForms.Util.setFHIRContext(fhirContext, fhirContextVars)
```

--------------------------------

### HTML Structure for LForms Form Rendering

Source: https://lhncbc.github.io/lforms/versions/27.x/demos

This snippet provides the basic HTML structure required to render an LForms form. It includes the necessary CSS and JavaScript files for the LForms library and a `div` element that serves as the container for the form.

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Render RxTerms Form Definition with LForms (JavaScript, HTML)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This snippet demonstrates how to define and render an RxTerms form using LForms. It includes the form definition in JavaScript and the necessary HTML structure with LForms library inclusion. The form definition specifies fields for drug name and strength, with data control for dynamically populating strength based on the drug name.

```javascript
// This is the form definition
window.rxterms = {
  type: "LOINC",
  code: "X-001",
  name: "RxTerms Demo",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideFormControls: true,
    showFormHeader: false,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-002",
    "question": "Prescription entry",
    "header": true,
    "layout": "horizontal",
    "questionCardinality": {
      "min": "1",
      "max": "*"
    },
    "items": [{
        "questionCode": "itemWithExtraData",
        "dataType": "CNE",
        "header": false,
        "question": "Drug Name",
        "externallyDefined": "https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS,RXCUIS",
      },
      //an item that gets the extra LIST data whenever the source item has a data changes
      {
        "questionCode": "controlledItem_LIST",
        "dataType": "CNE",
        "header": false,
        "question": "Strength",
        "dataControl": [{
          "source": {
            "sourceType": "INTERNAL",
            "sourceItemCode": "itemWithExtraData",
          },
          "construction": "ARRAY",
          "dataFormat": {
            "code": "value.RXCUIS",
            "text": "value.STRENGTHS_AND_FORMS"
          },
          "onAttribute": "answers"
        }],
      }
    ]
  }]
};
LForms.Util.addFormToPage('rxterms', 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Setting FHIR Context

Source: https://lhncbc.github.io/lforms/versions/30.x/index

Configures the FHIR server connection and launch context variables for LForms.

```APIDOC
## LForms.Util.setFHIRContext

### Description
This method establishes the connection to the FHIR server and provides launch context variables, which are necessary if a Questionnaire references external FHIR resources or launch context variables. This connection is used when rendering forms with `LForms.Util.addFormToPage()`.

### Method
Utility Method

### Endpoint
N/A (Client-side JavaScript method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Arguments
- **fhirContext** (object) - Required - An instance of the `fhirclient` npm package (version 2 or later), initialized with a connection to the FHIR server. A browser-ready version is available at `https://cdn.jsdelivr.net/npm/fhirclient@2/build/fhir-client.min.js`. This parameter can be omitted if only launch context variables are needed and provided via `fhirContextVars`.
- **fhirContextVars** (object) - Optional - A map of launch context variable names to FHIR resources (objects). Values provided here take precedence over values retrieved from `fhirContext`. This parameter is used to make variables available to expressions within a Questionnaire.

### Request Example
```javascript
// Assuming 'fhirClient' is an initialized instance of the fhirclient library
const fhirClient = new FHIR.Client({ /* ... FHIR server configuration ... */ });

// Example with FHIR context and launch context variables
const launchVars = {
  patientId: { resourceType: "Patient", id: "123" },
  userId: "user-abc"
};
LForms.Util.setFHIRContext(fhirClient, launchVars);

// Example with only launch context variables (if FHIR server connection is not needed for context)
// LForms.Util.setFHIRContext(null, launchVars);
```

### Response
#### Success Response
This method does not return a value. It configures the global state for LForms.

#### Response Example
N/A
```

--------------------------------

### Include FHIR Support Scripts

Source: https://lhncbc.github.io/lforms/versions/17.x/index

Instructions for including FHIR support files for different versions (R4, STU3) when using prebuilt versions, Bower, or npm.

```APIDOC
## Include FHIR Support Scripts

### Description
Instructions for including FHIR support files for different versions (R4, STU3) when using prebuilt versions, Bower, or npm. These files depend on `lforms.min.js`.

### Prebuilt Versions
For FHIR version "R4":
```html
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.0.0/fhir/R4/lformsFHIR.min.js"></script>
```
For FHIR version "STU3", replace "R4" with "STU3". It is safe to include both versions.

### Bower Installation
Include the following files:
* For version R4: `bower_components/lforms/app/scripts/fhir/R4/lformsFHIR.js`
* For version STU3: `bower_components/lforms/app/scripts/fhir/STU3/lformsFHIR.js`
You may include either or both versions.

### npm Installation
Require the following files:
* For version R4: `require('lforms/app/scripts/fhir/R4/fhirRequire.js');`
* For version STU3: `require('lforms/app/scripts/fhir/STU3/fhirRequire.js');`
```

--------------------------------

### Define and Render RxTerms Form with LForms (JavaScript, HTML)

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This snippet shows how to define a complex form structure for RxTerms using JavaScript and then render it into an HTML div using LForms. It includes nested items, data types, and demonstrates how to pull external data for form fields.

```javascript
var rxterms = {
  type: "LOINC",
  code: "X-001",
  name: "RxTerms Demo",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideFormControls: true,
    showFormHeader: false,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-002",
    "question": "Prescription entry",
    "header": true,
    "layout": "horizontal",
    "questionCardinality": {
      "min": "1",
      "max": "*"
    },
    "items": [{
        "questionCode": "itemWithExtraData",
        "dataType": "CNE",
        "header": false,
        "question": "Drug Name",
        "externallyDefined": "https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS,RXCUIS",
      },
      //an item that gets the extra LIST data whenever the source item has a data changes
      {
        "questionCode": "controlledItem_LIST",
        "dataType": "CNE",
        "header": false,
        "question": "Strength",
        "dataControl": [{
          "source": {
            "sourceType": "INTERNAL",
            "sourceItemCode": "itemWithExtraData",
          },
          "construction": "ARRAY",
          "dataFormat": {
            "code": "value.data.RXCUIS",
            "text": "value.data.STRENGTHS_AND_FORMS"
          },
          "onAttribute": "answers"
        }],
      }
    ]
  }]
};
LForms.Util.addFormToPage(rxterms, 'formContainer');
```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>
```

--------------------------------

### Dynamically Load LOINC Forms with Autocomplete (JavaScript, HTML)

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This snippet demonstrates how to implement an autocomplete search field that allows users to select a LOINC form. Upon selection, the chosen form definition is fetched and rendered dynamically into the page using LForms. It utilizes jQuery for DOM manipulation and AJAX requests.

```javascript
var ac = new Def.Autocompleter.Search('loinc_item',
  'https://clinicaltables.nlm.nih.gov/api/loinc_items/v3/search?type=form&available=true', {
    nonMatchSuggestions: false
  });

Def.Autocompleter.Event.observeListSelections('loinc_item', function() {
  var formCode = ac.getSelectedCodes()[0];
  if (formCode) {
  	jQuery('#formContainer').html('Loading...');
    setTimeout(function() { // so the "loading" message has a chance to appear
      // Load the form definition
      jQuery.get('https://clinicaltables.nlm.nih.gov/loinc_form_definitions?loinc_num=' + formCode,
        function(data) {
          LForms.Util.addFormToPage(data, 'formContainer');
        });
    });
  }
});
```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <p>
    Select a LOINC form display:
  </p>
  <input type="text" id="loinc_item" placeholder="LOINC item" autocomplete="off" role="combobox" aria-expanded="false" class="search_field">
  <p>
    Note: LOINC form definitions are subject to the LOINC <a href="http://loinc.org/terms-of-use">terms of use</a>.
  </p>
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>
```

--------------------------------

### HTML Structure for LForms Form Rendering (HTML)

Source: https://lhncbc.github.io/lforms/versions/11.x/demos

This HTML snippet provides the basic structure required to render an LForms form. It includes linking the LForms CSS for styling and the LForms JavaScript library, as well as a div element that serves as the container for the form.

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/11.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Include LHC-Forms CSS and JavaScript

Source: https://lhncbc.github.io/lforms/index

To use LHC-Forms, include the necessary CSS and JavaScript files in your HTML. The zone.min.js file can be omitted if already present (e.g., in Angular applications).

```html
<link rel="stylesheet" href="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.3.2/webcomponent/styles.css">
<script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.3.2/webcomponent/assets/lib/zone.min.js"></script>
<script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.3.2/webcomponent/lhc-forms.js"></script>
```

--------------------------------

### HTML Structure for LForms

Source: https://lhncbc.github.io/lforms/versions/17.x/demos

Provides the essential HTML structure required to render an LForms form. It includes linking the LForms CSS and JavaScript files and a container div for the form.

```html
<!DOCTYPE html>
<html>
<head>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
</head>
<body>
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>
</html>

```

--------------------------------

### Render basic form with LForms JavaScript

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

This snippet demonstrates how to define a simple form with a single question ('Eye color') using LForms JavaScript. It utilizes the `LForms.Util.addFormToPage` function to render the form into a specified container. The form definition includes basic properties like `code`, `name`, and `items`.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }],
  templateOptions:{viewMode: 'lg'}
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```

```html
<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

```

--------------------------------

### Define LForms Form with Multi-Answer Questions (JavaScript)

Source: https://lhncbc.github.io/lforms/versions/13.x/demos

Defines a JSON structure for an LForms form that supports multi-answer questions. It demonstrates setting `answerCardinality` for multi-select dropdowns and `questionCardinality` for allowing multiple entries of a question type. Dependencies: LForms library.

```javascript
// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    showFormHeader: false,
    hideFormControls: true,
    viewMode: 'lg'
  },
  items: [{
    "questionCode": "X-001",
    "question": "Favorite desserts",
    "dataType": "CWE",
    "answers": [
      {text: "Brownies", code: "b"},
      {text: "Cake", code: "ca"},
      {text: "Chocolate", code: "ch"},
      {text: "Cookies", code: "c"},
      {text: "Ice cream", code: "i"},
      {text: "Pudding", code: "p"}
    ],
    "answerCardinality": {"min": "0", "max": "*"}
  }, {
    "questionCode": "X-002",
    "question": "Favorite book",
    "questionCardinality": {"min": "1", "max": "*"},
    "dataType": "ST"
  }]
};

LForms.Util.addFormToPage(formDef, 'formContainer');

```
Tokens:
Raw