lhncbc / lforms

See the project website at http://lhncbc.github.io/lforms/, or view the demo website at https://lhcforms.nlm.nih.gov/lhcforms.

What is LForms?

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 supports the HL7 FHIR Questionnaire standard (SDC profile), and work is in progress to expand that support.

It is being developed by the Lister Hill National Center for Biomedical Communications (LHNCBC), National Library of Medicine (NLM), part of the National Institutes of Health (NIH), with the collaboration and support from the Regenstrief Institute, Inc. and the LOINC Committee.

For features and demos, please visit the project page.

Licensing and Copyright Notice

See LICENSE.md.

Customizing and Contributing

If you wish to revise this package, the following steps will allow you to make changes and test them:

• Install Node.js (version 14 is what we are currently using, but it should work with later versions)
• Clone the lforms repository and cd to its directory
• source bashrc.lforms (make sure node dir is available at ~/)
• npm ci
• source bashrc.lforms # to add node_modules/.bin to your path
• npm run build # build both FHIR libs and LHC-Forms web component
• npm run start # starts the app we use for testing
• npm run test # runs the unit tests and e2e tests

If you are planning to contribute new functionality back to us, please coordinate with us, so that the new code is in the right places, and so that you don't accidentally add something that we are also working on.

Development server

• Run npm run start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

• Run npm run start-public if you need to access to the dev server from a different machine. For example, to run Narrator from a Windows PC.

Build

• Run npm run build to build the project and generate a production version of the js files, which are much smaller than the development version. It generates an ES2017 version of the js files under dist/lforms. For details on the files to load, see "Usng the LHC-Forms Web Component".
  The dist directory is deleted and recreated during the process.

  The build also concatenates all the js files (except for zone.min.js and the FHIR support files) into a single lhc-forms.js file, and it works, but we don't currently recommend their use because the source maps don't work with these files. Also, there is a dist/webcomponent directory that is created with a copy of the files in dist/lforms, but that is only needed for the tests.

Running tests

1. Run npm run test to run unit tests and e2e tests, which also copies the FHIR lib files and built files in places for testing.

Running unit tests

1. Run npm run test:unit to execute the unit tests via Karma.

Running end-to-end tests

1. Run npm run test:e2e to execute the end-to-end tests via Cypress. The e2e tests are configured to use Chrome.

Using the LHC-Forms Web Component

There are several script files to load. If you are building this, these files will be under dist/lforms. If you are using the pre-built versions from https://clinicaltables.nlm.nih.gov/lforms-versions, then the file paths below are relative to those versioned directories.

1. webcomponent/styles.css

You need to include the following files in your project:

1. webcomponent/styles.css
2. webcomponent/assets/lib/zone.min.js (unless you already have zone.min.js on the page)
3. webcomponent/runtime.js
4. webcomponent/polyfills.js
5. webcomponent/main.js
6. One of the FHIR support library files, assuming you are planning to use FHIR Questionnaires:
   • fhir/lformsFHIRAll.min.js
   • fhir/R5/lformsFHIR.min.js
   • fhir/R4B/lformsFHIR.min.js
   • fhir/R4/lformsFHIR.min.js
   • fhir/STU3/lformsFHIR.min.js

There is an example of an app using these files at https://lhcforms.nlm.nih.gov/lforms-fhir-app/. For details about how to work with this library, and for information about an announcements list, see the documentation.

lforms npm package

A complete npm package that you can use with import/require statements in your code is not ready yet. The current lforms npm package only contains built files in /dist/lforms directory. You can use those files as described in above section Using the LHC-Forms Web Component.

Related Documents

• form_definition.md The internal data format of the LHC-Forms widget.
• changed-features.md The list of features that changes between the new version (v30.0.0) and previous versions.
• r4-support.md The FHIR R4 features supported by LHC-Forms widget.
• sdc-support.md The FHIR SDC features supported by LHC-Forms widget.

lforms's Issues

AutoComplete example using LOINC API not working for recent versions.

Uncaught ReferenceError: Def is not defined

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

Example 13 not working for versions over about 13.
https://lhncbc.github.io/lforms/demos.html

Decimal question type returns no answer property when 0 is enterred

I have a form in which I have several decimal types. when a 0 is entered, as shown, the response item has no answer proprty. 0 should be a valid value.

demo with angular instead of Purejs

Would it be possible to provide an example similar to demo page that works when you change the framework to "Javascript + AngularJS" ?

Thanks

Validation rule definition in a demo form

Is there any example of how to specify and validate field rules in any of the elements of the SDC profile?
http://hl7.org/fhir/us/sdc/sdc-questionnaire.html
https://github.com/lhncbc/lforms-fhir-app

For example, if we have a string element in a combo-box and we want to specify the minLength/maxLength or a regex pattern that will also be used represented in the form builder generated code.

"type": "choice", "extension": [ { "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl", "valueCodeableConcept": { "coding": [ { "system": "http://hl7.org/fhir/questionnaire-item-control", "code": "Combo-box", "display": "Combo-box" } ], "text": "Combo-box" } } ]

QuestionnaireResponse rendering broken for some item types

Hi Team,

I am experiencing some issues with the QuestionnaireResponse resources being rendered in the view.

My QR resource has answer fields filled, see below:

But they are not filled when I attempt to merge the data in the QR resource with the LForm data when using LForms.Util.mergeFHIRDataIntoLForms("QuestionnaireResponse", , <qr's corresponding questionnaire>, "R4")

@plynchnlm Please advise on where this might be going wrong. I am looking in to the processQrItemAndLFormsItem() function definition in sdc-import-common.js

Formation of questionnaire response

Consent-questionnaire.lforms 2020jan10.json.txt
Consent.questionnaire.response 2020.01.17.json.txt

We are having a new issue where some of the items (but not all) in the questionnaire response have an unusual formation as the beginning.

In the past, the response for a question was not embedded in an "answer" array. Is this new? Some of our other repeating elements do not have this "answer" array. Some do and some don't.

Also, the linkID is nested much deeper than in the past. Is this new? Is the developer able to safely assume that the link ID that applies to the whole element will always be found at answer[item][0][linkId] because the linkID at answer[item][2][linkId] is for a child question and generally the linkIDs nested this deeply are for the child questions.

Is this a problem with LHC Forms or how the questionnaire was built?

I have attached a screen shot, the questionnaire LHC Code and the questionnaire response.

This is the formation that I am concerned about:

  "answer": [

    {

      "item": [

        {

          "linkId": "9.1",

          "text": "Risk List",

          "item": [

            {

              "linkId": "9.1.1",

              "text": "Name of the risk",

              "answer": [

                {

                  "valueString": "Unanticipated reactions"

                }

              ]

            },

{etc.}

FHIR SDC Support

Is there any plans or work taking place to support the FHIR SDC Questionnaire profiles? Especially WRT supporting the expression extensions defined here: http://hl7.org/fhir/uv/sdc/2019May/expressions.html

Migrating away from Angular 1.x?

Are there any immediate plans to migrate lforms away from Angular 1.x?

dataTypes CNE and CWE not transmitting user answers

When I use LHC Forms, the dataTypes CNE and CWE are displaying correctly, but when the user selects choices, none of them are being transmitted in the JSON. The user's answers for other dataTypes are correctly being transmitted.

An example is my form at http://fhirsirbtesting.pythonanywhere.com/processshortqstn

For example, if I populate the form with
Study Type = B. Behavioral

   PI Name =  Test PI

  Hazards = Radiation,  Lethal Doses of Medications

  Multi-site=  Yes

  Locations = Duke, UAMS

and click on the Submit button, the JSON transmitted is:

{
"Hazards_64": "",
"Locations_113": "",
"Multi-site_75": "Yes",
"PI Name": "Test PI",
"Study Type_43": "B. Behavioral"
}

Below is my form definition:

<script>
  // This is the LForms form definition for the form on this page.
  var PSFDemo = {
    type: "Trying FHIR",
    code: "A",
    name: "Study Submission Form Demo",
    template: "form-view-b",
    templateOptions: {
      allowMultipleEmptyRepeatingItems: true,
      hideHeader: true,
      obrHeader: false,
      obxTableColumns: []
    },






    items: [
	    {
	      "question": "Study Type",
	      "questionCodeSystem": "Custom",
	      "questionCode": "1",
	      "codingInstructions": "Please indicate the type of study",
	      "questionCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "header": false,
	      "editable": "1",
	      "answerCardinality": {
	        "min": "0",
	        "max": "1"
	      },
	      "dataType": "CNE",
	      "answers": [
	        {
	          "text": "Behavioral",
	          "code": "Behavioral",
	          "label": "B",
	          "score": null
	        },
	        {
	          "text": "Clinical",
	          "code": "Clinical",
	          "label": "C",
	          "score": null
	        }
	      ]
	    },
	    {
	      "question": "PI Name",
	      "questionCodeSystem": "Custom",
	      "questionCode": "Question 2",
	      "codingInstructions": "Type the full name of the PI. This is required.",
	      "questionCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "header": false,
	      "editable": "1",
	      "answerCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "dataType": "ST"
	    },
	    {
	      "question": "Hazards",
	      "questionCodeSystem": "Custom",
	      "questionCode": "Question3",
	      "codingInstructions": "Are hazards involved?",
	      "questionCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "header": false,
	      "editable": "1",
	      "answerCardinality": {
	        "min": "1",
	        "max": "*"
	      },
	      "dataType": "CNE",
	      "answers": [
	        {
	          "text": "Radiation",
	          "code": "Radiation",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "Amputations of Body Parts",
	          "code": "Amputations of Body Parts",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "Lethal Doses of Medications",
	          "code": "Lethal Doses of Medications",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "Medical Devices Implanted",
	          "code": "Medical Devices Implanted",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "None of these hazards",
	          "code": "0",
	          "label": null,
	          "score": null
	        }
	      ]
	    },
	    {
	      "question": "Multi-site",
	      "questionCodeSystem": "Custom",
	      "questionCode": "Question4",
	      "codingInstructions": "Is this a multi-site study?",
	      "questionCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "header": false,
	      "editable": "1",
	      "answerCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "dataType": "CNE",
	      "answers": [
	        {
	          "text": "Yes",
	          "code": "Yes",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "No",
	          "code": "No",
	          "label": null,
	          "score": null
	        }
	      ]
	    },
	    {
	      "question": "Locations",
	      "questionCodeSystem": "Custom",
	      "questionCode": "Question5",
	      "codingInstructions": "If multi-site, select the other locations",
	      "questionCardinality": {
	        "min": "1",
	        "max": "1"
	      },
	      "header": false,
	      "editable": "1",
	      "answerCardinality": {
	        "min": "1",
	        "max": "*"
	      },
	      "dataType": "CWE",
	      "answers": [
	        {
	          "text": "Duke",
	          "code": "Duke",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "UAMS",
	          "code": "UAMS",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "Vanderbuilt",
	          "code": "Vanderbuilt",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "University of Utah",
	          "code": "University of Utah",
	          "label": null,
	          "score": null
	        },
	        {
	          "text": "Harvard",
	          "code": "Harvard",
	          "label": null,
	          "score": null
	        }
	      ],
	      "skipLogic": {
	        "action": "show",
	        "logic": "ALL",
	        "conditions": [
	          {
	            "source": "Question4",
	            "trigger": {
	              "code": "Yes"
	            }
	          }
	        ]
	      },
	      "displayControl": {
	        "answerLayout": {
	          "type": "RADIO_CHECKBOX",
	          "columns": 1
	        }
	      }
	    }
	  ]




  };




</script>

questions about the functionality of LHC forms with repeating elements

Hi,

I have some questions about the standard functionality of LHC forms with respect to numbering of items in the questionnaire response when there are repeating elements.

For instance, see our sample questionnaire response (available at https://lforms-fhir.nlm.nih.gov/baseR4/QuestionnaireResponse/355762/_history/1)

If the person answering the questionnaire inputs these answers for the repeating element of Risks:

(for the first risk):
Physical risk
Pain from injections
Effects will become apparent during the study
No

(for the second risk):
Physical risk
Lowered immunity from the medication
Effects will become apparent during the study
Yes

(for the third risk):
Psychological or Emotional
Stress over the effects of the medication
Effects will become apparent during the study
No

(for the fourth risk):
Physical risk
Liver damage from the medication
Effects will become apparent during the study
Yes

(for the fifth risk):
Physical risk
Cancer developing after treatment with the medication
Effects may become apparent many years after the study
Yes

what we are seeing is that the numbering of the link IDs is not making the answers unique, because the link IDs are repeating whenever a new risk is added, as in:

(for the first risk):
linkId: "/1/1.1" Physical risk
linkId: "/1/1.2" Pain from injections
linkId: "/1/1.3" Effects will become apparent during the study
linkId: "/1/1.4" No

(for the second risk):
linkId: "/1/1.1" Physical risk
linkId: "/1/1.2" Lowered immunity from the medication
linkId: "/1/1.3" Effects will become apparent during the study
linkId: "/1/1.4" Yes

(for the third risk):
linkId: "/1/1.1" Psychological or Emotional
linkId: "/1/1.2" Stress over the effects of the medication
linkId: "/1/1.3" Effects will become apparent during the study
linkId: "/1/1.4" No

(for the fourth risk):
linkId: "/1/1.1" Physical risk
linkId: "/1/1.2" Liver damage from the medication
linkId: "/1/1.3" Effects will become apparent during the study
linkId: "/1/1.4" Yes

(for the fifth risk):
linkId: "/1/1.1" Physical risk
linkId: "/1/1.2" Cancer developing after treatment with the medication
linkId: "/1/1.3" Effects may become apparent many years after the study
linkId: "/1/1.4" Yes

But, my team was under the impression that the pieces of the repeating elements would have unique link IDs assigned to distinguish each risk by its own link IDs, such as:

(for the first risk):
linkId: "/1_01/1_01.1" Physical risk
linkId: "/1_01/1_01.2" Pain from injections
linkId: "/1_01/1_01.3" Effects will become apparent during the study
linkId: "/1_01/1_01.4" No

(for the second risk):
linkId: "/1_02/1_02.1" Physical risk
linkId: "/1_02/1_02.2" Lowered immunity from the medication
linkId: "/1_02/1_02.3" Effects will become apparent during the study
linkId: "/1_02/1_02.4" Yes

(for the third risk):
linkId: "/1_03/1_03.1" Psychological or Emotional
linkId: "/1_03/1_03.2" Stress over the effects of the medication
linkId: "/1_03/1_03.3" Effects will become apparent during the study
linkId: "/1_03/1_03.4" No

(for the fourth risk):
linkId: "/1_04/1_04.1" Physical risk
linkId: "/1_04/1_04.2" Liver damage from the medication
linkId: "/1_04/1_04.3" Effects will become apparent during the study
linkId: "/1_04/1_04.4" Yes

(for the fifth risk):
linkId: "/1_05/1_05.1" Physical risk
linkId: "/1_05/1_05.2" Cancer developing after treatment with the medication
linkId: "/1_05/1_05.3" Effects may become apparent many years after the study
linkId: "### /1_05/1_05.4" Yes

What is the default functionality of LHC forms for repeating elements? Did we make an error in how we defined our form in the NLM Form Builder? Is there any way that we can create our questionnaire in LHC forms so that the link IDs for repeating elements can have the answers appended with a suffix to make them unique? It is very confusing to refer to JSON elements that all have the same link IDs.

Can't update the Lform values using JQuery

I have updated the form filed values using JQuery , I can see the values changed in the DOM. But when I'm trying to access the form values using LForms.Util.getFormData the changed values are not getting.

For example, the initial value of my phone number is 'XXX-XXXXX' and changed to 'YYYY-YYYY' using JQuery.But When I trying to get the form values using LForms.Util.getFormData the value of phone number is still 'XXX-XXXXX' .

How can I get the values without rendering the Lform?

Is it possible to use the lforms npm module within a React app?

I wanted to explore the possibilities of the lforms functionality outside of bringing the CDN in to an html page and working within those constraints.

Would it be possible to leverage the lforms npm module within a React application created, and still successfully render the LForms widget on the view?

Lform API Documentation

Hi could you share link to API documentation. Also Is this project suspended??

Updated protractor tests?

Do some of the protractor tests need to be updated? I got most working after building on a windows machine, but ran into issues with lforms_directive_attr.spec.js. Specifically shouldn't the route parameters include the default hash prefix? So here instead of:

tp.openDirectiveAttrTest('#/horizontal-form-default');

include a bang after the hash:

tp.openDirectiveAttrTest('#!/horizontal-form-default');

Reference: https://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash-in-angular-1-6

Can not require Fhir support files it throughs an Error

From the documentation, using npm we will need to 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'); but in my nextjs react implementation i actually idid import('lforms/app/scripts/fhir/R4/fhirRequire') but it throws an error of an invalid token {. i am using version 28.1.2 any ways around this please

Module not found: Error: Can't resolve 'fs' in 'node_modules\antlr4' Laravel 6

ERROR in ./node_modules/antlr4/CharStreams.js
Module not found: Error: Can't resolve 'fs' in 'D:\node_modules\antlr4'
@ ./node_modules/antlr4/CharStreams.js 11:20-33
@ ./node_modules/antlr4/index.js
@ ./node_modules/fhirpath/src/parser/index.js
@ ./node_modules/fhirpath/src/fhirpath.js
@ ./node_modules/lforms/app/scripts/fhir/R4/fhirRequire.js
@ ./resources/js/bootstrap.js
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

checkValidity() output should include linkId values

Here is the output checkValidity() generated when validating our form:
["Medicare ID: requires a value","Date of F2F encounter requires a value","Intermittent Home Health Procedures Skilled Nursing requires a value","Signature requires a value","Service Name requires a value","Service Name requires a value","Service Name requires a value","Service Name requires a value","Signature requires a value"]

It would be very helpful to include linkId values in the output to distinguish the questions since different questions may have sub-questions that have the same text.

Is LHC form support custom Attributes in elements

We tried out questionnaire using LHC form and thanks for its nice features
Can we add a custom attribute like "questionCode" in each question element ?

How to use a new FIHR server?

Hi,

I created an FHIR server and I want to connect to this server through your app and use my own data.
Is it possible? If yes, could you please guide me and tell me how?

LG
Sohrab

LHC Form Builder and answer data type Boolean (Yes/No)

https://lhcformbuilder.nlm.nih.gov/ LHC Form Builder doesn't seem to support conditional show logic when the Source Field Answer Data Type is Boolean (Yes/No). We had to use a time-consuming workaround of changing all of the Answer Data Types (for Source Fields of Conditional Questions) to List with no exceptions (CNE) in order to get the conditional show logic to work. Will conditional show logic when the Source Field Answer Data Type is Boolean (Yes/No) functionality be added soon?

DTM protractor test failing on windows

The following test in lforms_datatype.spec.js is failing for me:
https://github.com/lhncbc/lforms/blob/master/test/protractor/spec/lforms_datatype.spec.js#L48

I'm running the protractor tests on windows/chrome.

The expect statement is looking for the input element to have a class of ng-invalid-datetime, however that class does not get applied in my build. I do get both ng-invalid and ng-invalid-parse, which makes me think the datetime parser is returning undefined. When I take a closer look it does appear things are working correctly (red border on input and user-displayed error message) with the exception of the ng-invalid-datetime class.

I noticed that the preceding test is very similar in intent, but only looks in the CSS for the red border:
https://github.com/lhncbc/lforms/blob/master/test/protractor/spec/lforms_datatype.spec.js#L32

I was thinking that may be a more robust way to test this case. Either that, or perhaps just looking for the ng-invalid-parse class.

Support for EnableWhenExpression not found ..

In Lforms enableWhenExpression extension support is not added.Please assist..

How to validate the form data before sending and displaying errors?

Hello, how can I validate the form data before sending and displaying errors?

Local setup instructions in README.MD

I couldn't run this app in local. Please post the instructions to run the application in local. It will be helpful for the beginners to explore the application by making changes in index.html file.

TypeError: Cannot read property 'trim' of null

TypeError: Cannot read property 'trim' of null
at a.prefetchList (autocomplete-lhc.js:286)
at a.initialize (autocomplete-lhc.js:105)
at new a (prototype_api.js:130)
at autocomplete-lhc.js:454
at u.$digest (angular.js:19207)
at u.$apply (angular.js:19568)
at angular.js:1966
at Object.invoke (angular.js:5208)
at a (angular.js:1964)
at Object.Ae [as bootstrap] (angular.js:1984)

https://jsfiddle.net/tnikolai/swruceq3/2/

Can form be rendered with no indentation markers

I would like the form rendered with no side markers at all. I found the template option to not use tree view, but really want nothing on the left. Is this possible ?

currently using these settings
lformsQ.templateOptions = {
showFormHeader: false,
hideFormControls: true,
useTreeLineStyle: false,

Any example for FHIR conversion on HTML w/ "No-Angular" route?

Just wondering if there were any small examples that anyone had, which guide how to implement the steps for setting up the LForms widget and how to ingest a FHIR questionnaire resource through the widget?

Validation on hidden/disabled fields

Required fields that are disabled via the "enableWhen" property are throwing validation errors when empty (LForms.Util.checkValidity() response). No validation should be applying to these fields when hidden.
Here is the form I'm working on with a bunch of conditional fields: https://jsfiddle.net/ryfgek6n

Thanks.

NIH Lform not working in ionic mobile application

We need to use the LHC forms in an ionic framework. It seems some conflicts with ionic JS and ionic CSS while including library files of lforms. The issue we faced is that the drop down selection will not apply to HTML value. Anybody please suggest a solution, if you have already used lforms in an ionic framework.

Thanks

How can I send the generated QuestionnaireResponses to an online server without running in to CORS/CORB issues?

I am able to successfully load a FHIR Questionnaire resource in to LForm format, using this project as a script in my web page. I can then use the LForms.Util.getFormFHIRData('QuestionnaireResponse', 'R4') method to create a QuestionnaireResponse resource.

What can I do to send this data to an online server without running in to CORS issues? I am lost on this currently.

Translation file?

I am trying to translate and build the partials. Is there another method?

Does LHC forms support data type html?

I want to integrate my custom html field, so that I can trigger that html element.
is there any option to add custom html?

Bootstrap 4 migration?

I am developing a system with bootstrap 4 and lhc forms generates conflicts for me due to having version 3

Any example to get these forms working in angular 6+

Hi ! Please pardon if I sound silly but I have been going nuts in trying to include them in angular 7 application. Is there any example or documentation available.?

Comboboxes not opened in dialog page

I open form inside el-dialog element(element.io vue framework).
But combobox items list z-index is smaller than dialog element. So cannot see combobox items.

Validation on required item with child items

LForms.Util.checkValidity() wrongly issued validation error when a required item has at least one child item already filled in with a value.

Consider the following portion of my questionnaire. The top-level question is required and has at least one sub-question with an answer provided. When I use LForms.Util.checkValidity() to validate the QuestionnaireResponse, I would get an error pointing to the top-level question.

Confirmation of reviewing the written report and usage of the device: *
Have you reviewed and signed the written report of adherence data? * Yes
… (other sub-questions)

Merging Questionnaire with QuestionnaireResponse voids initial[x] in Questionnaire

I have Questionnaire with three items. Two of them have initial[x] values. I also have QuestionnaireResponse which contains value for the 3rd item. After merging Questionnaire with QuestionnaireReponse, the merged form has the value from QuestionnaireResponse, but the two initial values in Questionnaire are ignored. Is this by design?

Sample Questionnaire:

{
  "resourceType": "Questionnaire",
  "id": "VentilatorsProgressNote",
  "meta": {
    "profile": [
      "http://hl7.org/fhir/StructureDefinition/cqf-questionnaire",
      "http://hl7.org/fhir/us/davinci-dtr/StructureDefinition/dtr-questionnaire-r4"
    ]
  },
  "contained": [
    {
      "resourceType": "ValueSet",
      "id": "yes-no",
      "url": "#yes-no",
      "name": "YesNo",
      "status": "draft",
      "expansion": {
        "timestamp": "2020-06-08",
        "contains": [
          {
            "system": "http://terminology.hl7.org/CodeSystem/v2-0136",
            "code": "Y",
            "display": "Yes"
          },
          {
            "system": "http://terminology.hl7.org/CodeSystem/v2-0136",
            "code": "N",
            "display": "No"
          }
        ]
      }
    }
  ],
  "extension": [
    {
      "url": "http://hl7.org/fhir/us/davinci-dtr/StructureDefinition/valueset-reference",
      "valueReference": {
        "reference": "#yes-no"
      }
    }
  ],
  "status": "draft",
  "item": [
    {
      "linkId": "3",
      "text": "Encounter",
      "type": "group",
      "item": [
        {
          "linkId": "3.1",
          "text": "Date of encounter (MM/DD/YYYY):",
          "type": "date"
        },
        {
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "coding": [
                  {
                    "system": "http://hl7.org/fhir/questionnaire-item-control",
                    "code": "radio-button"
                  }
                ]
              }
            }
          ],
          "linkId": "3.2",
          "text": "Is this an evaluation of the patient’s need for a ventilator?",
          "type": "choice",
          "answerValueSet": "#yes-no",
          "initial": [
            {
              "valueCoding": {
                "system": "http://terminology.hl7.org/CodeSystem/v2-0136",
                "code": "Y",
                "display": "Yes"
              }
            }
          ]
        }
      ]
    },
    {
      "linkId": "5",
      "text": "For continued coverage",
      "type": "group",
      "item": [
        {
          "linkId": "5.2",
          "text": "Describe",
          "type": "text",
          "initial": [
            {
              "valueString": "test initial"
            }
          ]
        }
      ]
    }
  ]
}

Sample QuestionnaireResponse

{
  "resourceType": "QuestionnaireResponse",
  "status": "draft",
  "item": [
    {
      "linkId": "3",
      "item": [
        {
          "linkId": "3.1",
          "answer": [
            {
              "valueDate": "2020-06-12"
            }
          ]
        }
      ]
    }
  ]
}

Here is the generated LHC form

{
  "lformsVersion": "23.0.0",
  "PATH_DELIMITER": "/",
  "code": null,
  "codeList": null,
  "identifier": null,
  "name": "Ventilator Progress Note Questionnaire",
  "type": null,
  "template": "table",
  "items": [
    {
      "header": true,
      "dataType": "SECTION",
      "question": "Encounter",
      "questionCode": "3",
      "questionCodeSystem": "LinkId",
      "linkId": "3",
      "questionCardinality": {
        "max": "1",
        "min": "1"
      },
      "items": [
        {
          "dataType": "DT",
          "question": "Date of encounter (MM/DD/YYYY):",
          "questionCode": "3.1",
          "questionCodeSystem": "LinkId",
          "linkId": "3.1",
          "questionCardinality": {
            "max": "1",
            "min": "1"
          },
          "codeList": [],
          "answerCardinality": {
            "min": "0",
            "max": "1"
          },
          "value": "2020-06-12"
        },
        {
          "dataType": "CNE",
          "question": "Is this an evaluation of the patient’s need for a ventilator?",
          "questionCode": "3.2",
          "questionCodeSystem": "LinkId",
          "linkId": "3.2",
          "answerCardinality": {
            "max": "1",
            "min": "0"
          },
          "displayControl": {
            "answerLayout": {
              "type": "RADIO_CHECKBOX"
            }
          },
          "answers": [
            {
              "code": "Y",
              "text": "Yes",
              "system": "http://terminology.hl7.org/CodeSystem/v2-0136"
            },
            {
              "code": "N",
              "text": "No",
              "system": "http://terminology.hl7.org/CodeSystem/v2-0136"
            }
          ],
          "defaultAnswer": {
            "code": "Y",
            "text": "Yes",
            "system": "http://terminology.hl7.org/CodeSystem/v2-0136"
          },
          "codeList": [],
          "questionCardinality": {
            "min": "1",
            "max": "1"
          }
        }
      ],
      "codeList": [],
      "displayControl": {
        "questionLayout": "vertical"
      },
      "answerCardinality": {
        "min": "0",
        "max": "1"
      }
    },
    {
      "header": true,
      "dataType": "SECTION",
      "question": "For continued coverage",
      "questionCode": "5",
      "questionCodeSystem": "LinkId",
      "linkId": "5",
      "questionCardinality": {
        "max": "1",
        "min": "1"
      },
      "items": [
        {
          "dataType": "TX",
          "question": "Describe",
          "questionCode": "5.2",
          "questionCodeSystem": "LinkId",
          "linkId": "5.2",
          "questionCardinality": {
            "max": "1",
            "min": "1"
          },
          "defaultAnswer": "test initial",
          "codeList": [],
          "answerCardinality": {
            "min": "0",
            "max": "1"
          }
        }
      ],
      "codeList": [],
      "displayControl": {
        "questionLayout": "vertical"
      },
      "answerCardinality": {
        "min": "0",
        "max": "1"
      }
    }
  ],
  "templateOptions": {
    "showQuestionCode": false,
    "showCodingInstruction": false,
    "tabOnInputFieldsOnly": false,
    "hideFormControls": true,
    "showFormOptionPanel": false,
    "showFormOptionPanelButton": true,
    "showItemOptionPanelButton": false,
    "hideUnits": true,
    "allowMultipleEmptyRepeatingItems": false,
    "allowHTMLInInstructions": false,
    "useAnimation": true,
    "displayControl": {
      "questionLayout": "vertical"
    },
    "viewMode": "auto",
    "showFormHeader": false,
    "showColumnHeaders": false,
    "defaultAnswerLayout": {
      "answerLayout": {
        "type": "COMBO_BOX",
        "columns": "0"
      }
    },
    "useTreeLineStyle": true,
    "columnHeaders": [
      {
        "name": "Name"
      },
      {
        "name": "Value"
      },
      {
        "name": "Units"
      }
    ]
  },
  "hasSavedData": true
}

Merge QuestionnaireReponse could not hand valueDate

I met a very strange issue. I generate the LHC from from a pair of R4 Questionnarie and QuestionnaireResponse. Then I save QuestionnaireResponse from the form. Strangely the valueDate answer is missing.
Here is the Questionnaire:

{
  "resourceType": "Questionnaire",
  "id": "urn:hl7:davinci:crd:ventilator-questionnaire-r4",
  "title": "Ventilator Questionnaire",
  "status": "draft",
  "date": "2020-02-04",
  "publisher": "Da Vinci DTR",
  "subjectType": [
    "Patient"
  ],
  "item": [
    {
      "linkId": "1",
      "type": "group",
      "text": "Patient Information",
      "item": [
        {
          "linkId": "1.1",
          "text": "Date of Birth:",
          "type": "date",
          "required": true
        }
      ]
    }
  ]
}

and here is the input QuestionnaireReponse which contains previous answer:

{
  "resourceType": "QuestionnaireResponse",
  "status": "draft",
  "item": [
    {
      "linkId": "1",
      "item": [
        {
          "linkId": "1.1",
          "answer": [
            {
              "valueDate": "1976-02-23"
            }
          ]
        }
      ]
    }
  ]
}

Here is a screen shot of generated form (the date is correct)

Then, I use this statement to create a QR from the form:

var qr = window.LForms.Util.getFormFHIRData('QuestionnaireResponse', 'R4');

And this is the QR created

{
  "resourceType": "QuestionnaireResponse",
  "meta": {
    "profile": [
      "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaireresponse|2.7"
    ]
  },
  "status": "completed",
  "authored": "2020-03-18T20:33:03.723Z",
  "item": [
    {
      "linkId": "1",
      "text": "Patient Information",
      "item": [
        {
          "linkId": "1.1",
          "text": "Date of Birth:"
        }
      ]
    }
  ]
}

Strangely, the answer for 1.1 is gone.
I found a solution is to actually select the date in the form, even the same date, then the date showed in the final QR.

Backend resources PostgreSQL

Are there any existing resources to help with creating a PostgreSQL backend database tables or table structures to store the JSON data captured from the Lforms? Would one assume a Smart on FHIR backend?

How deploy demo to my local environment

How to deploy to my PC. I install bower+grunt, but grunt doesn't build

Cannot pull value from anserValueSet

I create a questionnaire with contained value set:

{
  "resourceType": "Questionnaire",
  "id": "HomeOxygenTherapy",
  "name": "HomeOxygenTherapy",
  "meta": {
    "profile": [
      "http://hl7.org/fhir/StructureDefinition/cqif-questionnaire",
      "http://hl7.org/fhir/us/davinci-dtr/StructureDefinition/dtr-questionnaire-r4"
    ]
  },
  "title": "Home Oxygen Therapy",
  "status": "draft",
  "subjectType": [
    "Patient"
  ],
  "contained": [
    {
      "resourceType": "ValueSet",
      "id": "gender",
      "name": "Gender",
      "status": "draft",
      "expansion": {
        "contains": [
          {
            "code": "male",
            "system": "http://hl7.org/fhir/administrative-gender",
            "display": "Male"
          },
          {
            "code": "female",
            "system": "http://hl7.org/fhir/administrative-gender",
            "display": "Female"
          },
          {
            "code": "other",
            "system": "http://hl7.org/fhir/administrative-gender",
            "display": "Other"
          }
        ]
      }
    }
  ],
  "item": [
    {
      "linkId": "1",
      "text": "Patient Information",
      "type": "group",
      "item": [
        {
          "linkId": "1.5",
          "text": "Gender",
          "type": "choice",
          "required": true,
          "answerValueSet": "#gender"
        }
      ]
    }
  ]
}

I tested this on https://lhcforms.nlm.nih.gov/lhcforms. The form does NOT show the list of options from the contained value set. I tried to change answerValueSet to http://hl7.org/fhir/ValueSet/administrative-gender. The result is the same.

Unable to map FHIR enableWhen operator: undefined

I got this error when import a FHIR R4 Questionnaire resource with enableWhen element. Does LHC widget support Questionnaire.item.enableWhen?

AJAX autocompleter field with text from the another field in externallyDefined URL

I want fill the AJAX autocompleter field based on a previous Item's input value. So i want to pass value from the previous input to the externallyDefined URL. Is this possible?

ie, Currently term value is the text from the field. I want a parameter like these that value will be text from the another field.

Ways to render a QuestionnaireResponse resource?

I have been doing some practicing/testing with the various built-in methods from this project. During a collaborative meeting, one of my peers questioned if there were any possibility to render QuestionnaireResponse resources similarly to how Questionnaires are rendered as LForms.

Is there any such functionality within this project? I want to be able to display the QuestionnaireResponse resources that were generated on my app in some sort of view.

I have attempted to pass my QuestionnaireResponse JSON data in to the "fhirToLformConversion()" method, and while it doesn't throw errors, it seems to render it as a form to add input rather than a read-only display of a QuestionnaireResponse.

I would love to know your thoughts on this, thank you so much!

Is there a way to hide empty group header?

I created a horizontal layout using gtable. Here is the sample Questionnaire

{
  "resourceType": "Questionnaire",
  "id": "VentilatorsProgress",
  "status": "draft",
  "item": [
    {
      "linkId": "1",
      "text": "Patient Information",
      "type": "group",
      "item": [
        {
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "coding": [
                  {
                    "system": "http://hl7.org/fhir/questionnaire-item-control",
                    "code": "gtable"
                  }
                ]
              }
            }
          ],
          "linkId": "1a",
          "type": "group",
          "item": [
            {
              "linkId": "1.1",
              "text": "Last Name",
              "type": "string",
              "required": true
            },
            {
              "linkId": "1.2",
              "text": "First Name",
              "type": "string",
              "required": true
            },
            {
              "linkId": "1.3",
              "text": "Middle Initial",
              "type": "string",
              "required": true
            }
          ]
        }
      ]
    }
  ]
}

The display is almost correct, except the blank title bar for item "1a" (the blue area between Patient Information and the table header)

Is it possible to hide title bar for group item without text (pure group)?

Does not support multiple default answer?

In my FHIR Questionnaire form, some open-choice questions has multiple initial answers. Example:
{ "resourceType": "Questionnaire", "id": "1", "title": "Ventilator Questionnaire", "status": "draft", "date": "2020-02-04", "subjectType": [ "Patient" ], "item": [ { "linkId": "4", "text": "Patient diagnosis:", "type": "group", "item": [ { "extension": [ { "url": "http://hl7.org/fhir/StructureDefinition/cqf-expression", "valueExpression": { "language": "text/cql", "expression": "\"VentilatorDevice\".RelevantDiagnoses" } } ], "linkId": "4.1", "type": "open-choice", "repeats": true, "answerOption": [ { "valueCoding": { "code": "36485005", "system": "http://snomed.info/sct", "display": "Restrictive lung disease" } }, { "valueCoding": { "code": "G12.0", "system": "http://hl7.org/fhir/sid/icd-10-cm", "display": "Infantile spinal muscular atrophy, type I" } }, { "valueCoding": { "code": "J98.4", "system": "http://hl7.org/fhir/sid/icd-10-cm", "display": "Other disorders of lung" } } ], "initial": [ { "valueCoding": { "code": "36485005", "system": "http://snomed.info/sct", "display": "Restrictive lung disease", "_type": "Coding" } }, { "valueCoding": { "code": "G12.0", "system": "http://hl7.org/fhir/sid/icd-10-cm", "display": "Infantile spinal muscular atrophy, type I", "_type": "Coding" } }, { "valueCoding": { "code": "J98.4", "system": "http://hl7.org/fhir/sid/icd-10-cm", "display": "Other disorders of lung", "_type": "Coding" } } ] } ] } ] }
After load to https://lhncbc.github.io/lforms-fhir-app/, only the first initial value is shown.
I also checked the converted LHC form, there is only one defaultAnswer.
Is it possible to preselect multiple values for open-choice type?

Does LHC form autofill the all content on focus using externallyDefined URL

Created a CWE type Item with externallyDefined Url as data. It appears as search box appear the results while typing.

We need to show all options from the url when focus input first time (prefetch AJAX autocompleter). Is it available now?

item._otherValueChecked not true inside updateRadioListForOther()

Ran into another test which is failing on my windows/chrome build:
https://github.com/lhncbc/lforms/blob/master/test/protractor/spec/lforms_display_controls.spec.js#L81

From what I can gather, clicking on the OTHER radio button should cause value.code and value.text to be null/undefined in $scope. However this doesn't happen on my installation and thus the above test fails. Clicking on any other radio button in the question fires $scope.updateRadioList which sets item._otherValueChecked to false:
https://github.com/lhncbc/lforms/blob/master/app/scripts/lforms-controllers.js#L1068

Clicking on the OTHER radio button I can see within $scope.updateRadioListForOther that item._otherValueChecked is still false:
https://github.com/lhncbc/lforms/blob/master/app/scripts/lforms-controllers.js#L1077
Clicking the OTHER radio button a second time or entering characters into the text input box causes $scope.updateRadioListForOther to fire again and this time item._otherValueChecked is true.

So for whatever reason item._otherValueChecked isn't getting toggled until after $scope.updateRadioListForOther on my system. This was easy to tell since I can see the text input box showing up after clicking on OTHER. Would it make sense to set _otherValueChecked to true directly within $scope.updateRadioListForOther? This seems to work for me, but wondering if it breaks anything on linux.

if the text at the top of the section header is not populated by the user, then missing data

I will send an email to plynchnlm with the specifics to accompany this ticket.
This is a question about LHC Forms functionality. I don't know if it is an issue or a bug or it might be functioning as intended.

For the Assessments section and the Risks section of our questionnaire, if the text at the top of the section header is not populated by the user but the user populates the rest of the section, the following is noted:

A. The FHIR questionnaire response does not contain the answers from the user.
B. Of course, the database does not contain the answers from the user

Please see the attached screen shots for what I am referring to as the "text at the top of the section".

Is this normal behavior of LHC Forms?

repeat=true/false

I tried this simple Questionnaire at https://lhcforms.nlm.nih.gov/lhcforms

{
  "resourceType": "Questionnaire",
  "id": "HomeOxygenTherapy",
  "status": "draft",
  "item": [
    {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-answerRepeats",
          "valueBoolean": true
        }
      ],
      "linkId": "4",
      "text": "Patient diagnosis:",
      "type": "open-choice",
      "repeat": "false",
      "answerOption": [
        {
          "valueCoding": {
            "code": "36485005",
            "system": "http://snomed.info/sct",
            "display": "Restrictive lung disease - SNOMED - 36485005"
          }
        },
        {
          "valueCoding": {
            "code": "G12.0",
            "system": "http://hl7.org/fhir/sid/icd-10-cm",
            "display": "Infantile spinal muscular atrophy, type I - ICD-10 - G12.0"
          }
        },
        {
          "valueCoding": {
            "code": "J98.4",
            "system": "http://hl7.org/fhir/sid/icd-10-cm",
            "display": "Other disorders of lung - ICD-10 - J98.4"
          }
        }
      ]
    }
  ]
}

I noticed that no matter what I change the repeat, either true, false, or remove repeat elements, the form display and the QR generated are the same.
So does repeat has any effects on open-choice item?