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.
- Single-question 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
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.)
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.
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).
Date fields & fields with units: Questions
can also be date fields with a calendar input, or be numeric fields with units.
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
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.
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.
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.
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".
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.
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.
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
FHIR Questionnaire support: The form you see
comes from a FHIR
Questionnaire definition. After filling in the field,
click the button to see the FHIR QuestionnaireResponse output.