LForms Demos

A widget for rendering feature-rich forms defined in JSON definition files

The following demos introduce LForms (a.k.a. LHC-Forms) a few features at a time using simple forms. For a set of demos showing the full feature set of LForms, including skip logic and score rules, see the LHC-Forms demo website, or see the last demo, which lets you pull in LOINC forms.

  1. Single-question form: Click on the "JavaScript" tab to view this form's definition. This form only defines the question "Eye color". By default, the form template includes some top level questions seen here (Date Done, etc.) Also, the form template includes some checkboxes above the form (to be discussed later). Both the checkboxes and the top-level questions can be removed, as shown in the next demo.
    [Show Demo]
  2. Top-level questions removed: This is the same form but configured to turn off both the checkboxes and the top-level questions. (In the form definition, showFormHeader is what controls the visibility of the top-level questions.)
    [Show Demo]
  3. Custom top-level questions: If you do want the top-level questions, but want different ones, that can be controlled as well. Here is an example with different fields.
    [Show Demo]
  4. Coded answer lists: Questions can have coded answer lists. The dataType for list questions should be set to either "CNE" ("coded with no exceptions", which limits input to list choices) or "CWE" ("coded with exceptions", which allows entry of off-list answers).
    [Show Demo]
  5. Date fields & fields with units: Questions can also be date fields with a calendar input, or be numeric fields with units.
    [Show Demo]
  6. AJAX autocompletion fields: When answer lists are too large to be included directly in the form definition, they can be specified via a URL which returns matches as the user types. Several such data sources are available from the Clinical Table Search Service. (If you wish to construct your own, the web service receiving the URL will need to understand certain parameters and return data in the expected format. For information on how to do that, see the documentation for the autocomplete-lhc search list, and look at the requirements for the "url" parameter to the constructor.)
    [Show Demo]
  7. Sections and repeats: Questions can be grouped inside labeled sections and sections can have sub-sections. A "cardinality" can be assigned to sections (or questions) to make them repeat.
    [Show Demo]
  8. Tables of fields: A section's questions can be shown as columns in a table by requesting a "horizontal" layout. For tables, it is often desirable to specify a width for one or more columns. This is supported by the "displayControl" property in the form definition.
    [Show Demo]
  9. Help text: Questions can have associated help text, which by default is shown when the user clicks on the help button next to the question. When the checkboxes above the form are shown, they provide an option for the user to show all of the help inline instead of being hidden by the buttons. (This is also configurable via the "templateOptions" parameter, if the checkboxes are hidden.) In this demo, which shows the checkboxes, you can also see the "Keyboard Navigation On Input Fields" checkbox. When checked, that checkbox limits the tab key so that it only stops on the "Value" fields (skipping most buttons and the "Units" fields). By default the tab behaves as usual.
    [Show Demo]
  10. Skip logic: Questions can be conditionally shown depending on the value in other questions. The condition can either be an exact value or a range (if the value is numeric). The skip logic is defined on the "target" question, which is initially hidden until the triggering condition from the other ("source") field is met. In the example below, try picking "Green" for "Favorite color".
    [Show Demo]
  11. Multi-answer questions: Questions can be allowed to have multiple answers. There are two ways of doing this. First, for questions with a list of answers, you can assign an answerCardinality maximum of '*' which will make the list be multi-select. Second, for any type of question you can set the questionCardinality maximum to a value higher than '1' (or '*'), which will cause a button to appear which allows the user to add more blanks for that question.
    [Show Demo]
  12. One field controlling another field's list: This simple form has just has two fields, one that provides a search autocompleter (using the RxTerms API from the Clinical Table Search Service) and one that obtains its list of strengths from the data associated with the selected drug name.
    [Show Demo]
  13. Ready-made form definitions from LOINC: The autocompleting field at the top lets you select a LOINC medical form which is then rendered below. (Try typing "vitamin" to see a vitamin D panel.) These form definitions are available from the Clinical Table Search Service.
    [Show Demo]
  14. FHIR Questionnaire support: The form you see in the first example below is specified by a FHIR Questionnaire definition. After filling in the field, click the button to see the FHIR QuestionnaireResponse output.
    [Show Demo]
    FHIR QuestionnaireResponse data can be merged with a FHIR Questionnaire to show a form with data from the QuestionnaireResponse. The following example shows how do to that.
    [Show Demo]