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. These demos use the FHIR® Questionnaire format to define the forms. For additional demos, see the LHC-Forms demo website.

  1. Single-question form: Click on the "JavaScript" tab to view this form's definition. This form only defines the question "Eye color".
    [Show Demo]
  2. Coded answer lists: Questions can have coded answer lists. In FHIR, list questions can either be of type "choice" (which limits answers to the list, or "open-choice", which allows entry of off-list answers).
    [Show Demo]
  3. Date fields & fields with units: Questions can also be date fields with a calendar input, or be numeric fields with units.
    [Show Demo]
  4. AJAX autocompletion fields: When answer lists are too large to be included directly in the form definition, they can be specified via a URL for an external FHIR ValueSet, and the field will show matches as the user types.
    [Show Demo]
  5. Sections (groups) and repeats: Questions can be grouped inside labeled sections and sections can have sub-sections. A "repeats" flag can be set on sections (or questions) to make them repeat.
    [Show Demo]
  6. Tables of fields: A group's questions can be shown as columns in a table by requesting using FHIR's itemControl extension and setting a value of "gtable".
    [Show Demo]
  7. 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.
    [Show Demo]
  8. 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]
  9. Multi-answer questions: Questions can be allowed to have multiple answers, by setting "repeats" to true (in the FHIR Questionnaire definition). For questions that do not have a list for the user to pick from, when "repeats" is set to true a button will appear which allows the user to add more blanks for that question.
    [Show Demo]
  10. One field controlling another field's list: This simple form has just 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]
  11. 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 "vital" to see a vital signs panel.) These form definitions are available from the Clinical Table Search Service, which provides them in LHC-Forms internal format. LOINC forms can also be obtained as FHIR Questionnaires from the LOINC terminology server.
    [Show Demo]
  12. FHIR Questionnaire support: As in most of the demos above, 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]