lforms
Version:
[LForms](http://lhncbc.github.io/lforms/), a.k.a. LHC-Forms, is a feature-rich, open-source Web Component that creates input forms, based on definition files, for Web-based applications. In addition to its native form-definition format, it partially sup
98 lines (90 loc) • 5.6 kB
Markdown
* **Web Component** The new LHC-Forms is a Web Component widget created with angular.
It is no longer developed with angularjs.
* **questionnaire** - A JSON object of a FHIR Questionnaire (including FHIR SDC Questionnaire),
or the above LHC-Forms internal format.
* **options** - Optional, a JSON object. The options defined in [templateOptions](#templateOptions).
* **prepop** - Optional, a boolean value. A flag indicating whether to run the pre-populate operation
for the FHIR Questionnaire. The default value is false.
* **fhirVersion** - Optional, a string value. The specified FHIR version of the data provided in
'questionnaire'. If this is not provided, a FHIR version will be determined from
the 'questionnaire'. The supported FHIR versions are 'R4' and 'STU3'.
#### **Emitted Events:**
* **onFormReady** - emitted when the form is fully initialied, and FHIRPath expressions
are run if any, data are pre-populated if any, and the form is ready for user interactions.
No data is returned in this event.
#### **How to use properties and events:**
* In HTML:
```
<wc-lhc-form id='test-form'></wc-lhc-form>
```
* JavaScript Code:
```
lhcFormWidget = document.getElementById('test-form');
lhcFormWidget.questionnaire = aQuesionnaire;
...
lhcFormWidget.addEventListener('onFormReady', e => {
// do something
...
});
```
* **AngularJS Directive** The new LHC-Forms does not includes an AngujarJS directive.
* **templateOptions** - The following options within templateOptions are not supported:
* showColumnHeaders - a boolean that controls whether to show the header row
with the "Name", "Value", and "Unit" column labels. The default is true.
* tabOnInputFieldsOnly - a boolean that controls whether to control TAB keys
to stop on the input fields only (neither buttons, nor units fields).
The default is false.
* hideFormControls - a boolean that controls whether to hide the controls section
on top of the form. The default is true.
* hideUnits - a boolean that controls whether to all the Units column to
be hidden from the data table. The default is false.
* showFormOptionPanel - a boolean that controls whether to show the option panel
that displays all the form options.
* showFormOptionPanelButton - a boolean that controls whether to show the button
next to the form title that hides/shows the form options panel.
* useAnimation - a boolean that controls whether to use animation on the form.
The default is true.
* <a name="showFormHeader"></a>showFormHeader - a boolean that controls whether to
show a row fields above the actual form like "Date Date", "Comment", etc.
The default is false.
* formHeaderItems - an array defining fields above the form (see
[showFormHeader](#showFormHeader)). If you omit templateOptions, a default will be
provided which will have the fields "Date Done", "Time Done", "Where
Done", and "Comment". If you wish to specify your own definitions,
a complete array should be provided where each
element in the array should be a hash with the following keys:
* question - the field label
* dataType - the kind of field. This can be DT for a date field with a
calender widget, ST for a normal input field, CNE for a list field in
which values are required to match the list, or CWE for a list field in
which values can be off the list.
* answers - For data types CNE or CWE, this is an array with the list
data. Each element in the array is a hash with the following keys:
* text - the display string for the list item
* code - (optional) a code that identifies the list item
* displayControl - This controls display styles of the column or the field.
It is a hash with the keys of "colCSS" for columns styles and "css" for field
styles. The values are an array of hashes of valid CSS styles. Here is an example:
`{"colCSS": [{"name":"width","value":"30%"},{"name":"min-width","value":"4em"}]}`
* <a name="answerCardinality"></a>answerCardinality - For lists, this
allows you to control whether list is multi-select or not. It is a hash
that takes two keys, "min" and "max". If you "min" to "1", then the
user will be required to provide an answer. If you set "max" to "*",
the list becomes multi-select. (Other possibilities are not yet
supported.)
* **Emitted (AngularJS) Events**
* **LF_EVENT_REPEATING_ITEM_ADDED** - emitted when a repeatable item or section is added to the form by clicking
the "add" button. An event attr object is associated with the event, with the following fields:
* event - the event name, 'LF_EVENT_REPEATING_ITEM_ADDED'
* formId - the code of the form
* itemId - the _elementId of the newly added item or section
* time - the time stamp when the event happens
* **LF_EVENT_REPEATING_ITEM_DELETED** - emitted when a repeatable item or section is deleted from the form by clicking
the "delete" button. The event attr object has the same set of the fields:
* event - the event name, 'LF_EVENT_REPEATING_ITEM_DELETED'
* formId - the code of the form
* itemId - the _elementId of the item or section that has just been deleted.
* time - the time stamp when the event happens