search

LHNCBC / lforms

See the project website at http://lhncbc.github.io/lforms/, or view the demo website at https://lhcforms.nlm.nih.gov/lhcforms.
Other
107 stars 56 forks source link

dataTypes CNE and CWE not transmitting user answers #13

Closed GitHubUNCStudent closed 5 years ago

GitHubUNCStudent commented 5 years ago

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>
lhcye commented 5 years ago

I saved your form definition data as a JSON file and uploaded it to our demo system (https://lhcforms.nlm.nih.gov/). The form is rendered correctly and the captured data also appears to be correct. One of the ways to get user data out of the widget is to call LForms.Util.getFormData(). Could you show me what was involved when you clicked the "Submit" button in your application?

GitHubUNCStudent commented 5 years ago

Hi Ye,

What I am doing is:

Within the Javascript of my shortqstn.html page,

A. Posting the form data via:

with a submit button B. The page http://fhirsirbtesting.pythonanywhere.com/process_shortqstn is using Python flask to retrieve the form results via: @app.route("/process_shortqstn", methods=["POST"]) def json_processshortqstn(): # assign the data from a HTML post form or JavaScript request into variable a a = request.form # jsonify variable a res = jsonify(a) # return result return res I have attached my shortqstn.html page with contains my Javascript. Questions for you: 1. Does your testing environment allow you to POST the form input? Is it posting correctly? I have tried looking at the raw POST in the Firefox developer tools and I am getting the same issue with the raw POST where the dataTypes CNE and CWE are empty even though the user populated these in the form. { "Hazards_64": "", "Locations_113": "", "Multi-site_75": "Yes", "PI Name": "Test", "Study Type_43": "C. Clinical" } 2. Before POSTING the data to http://fhirsirbtesting.pythonanywhere.com/process_shortqstn do I need to call LForms.Util.getFormData() first? I didn't know where in my attached shortqstn.html page I would put this so that when I submit the form, the POST understands to send the content of LForms.Util.getFormData(). 3. Is there a way to make the data FHIR compliant before I POST it? I looked at the developer pages and saw LForms.Util.getFormFHIRData(resourceType, fhirVersion, formDataSource, options) but as with my question 2, I didn't know where in my attached shortqstn.html page I would put this so that when I submit the form, the POST understands to send the content of LForms.Util.getFormFHIRData. Diane Rodden MSIS candidate 2019 School of Information and Library Science University of North Carolina at Chapel Hill mail to: rodden@live.unc.edu ________________________________ From: Ye Wang Sent: Monday, July 29, 2019 10:49 AM To: lhncbc/lforms Cc: Rodden, Diane Judith ; Author Subject: Re: [lhncbc/lforms] dataTypes CNE and CWE not transmitting user answers (#13) I saved your form definition data as a JSON file and uploaded it to our demo system (https://lhcforms.nlm.nih.gov/). The form is rendered correctly and the captured data also appears to be correct. One of the ways to get user data out of the widget is to call LForms.Util.getFormData(). Could you show me what was involved when you clicked the "Submit" button in your application? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread. Study Questionaire Demo Skip to Content

Study Submission Form Demo

lhcye commented 5 years ago

Diane,

The LHC-Forms widget does not support POSTing data directly to back-end server. You need to get the data out of the widget using JavaScript code (by calling LForms.Util.getFormData, for example). The resulting data is a JSON object, which can be processed before and/or after you send it to the back-end. See details here: http://lhncbc.github.io/lforms/.

I cannot see the shortqstn. It returns an error message: "Method Not Allowed". I guess it is only allowed within your dev environment.

You can get FHIR QuestionnaireResponse from the LHC-Forms widget, by call LForms.Util.getFormFHIRData. Currently we partially support DSTU 3 and R4 and SDC Questionnaire. Again, you need JavaScript code to retrieve the data from the widget, and process it whatever you want. The HTML version of your form does not matter here if you want to use LHC-Forms. A JSON file with the form definition data you posted should just work with the LHC-Forms widget.

Hope it helps.

Ye

GitHubUNCStudent commented 5 years ago

Is this (below in large font in green color) where I would place the LForms.Util.getFormFHIRData method? Thanks for the explanation that direct POST to the backend is not supported.

Diane Rodden MSIS candidate 2019 School of Information and Library Science University of North Carolina at Chapel Hill mail to: rodden@live.unc.eduhttp://mail%20to:%20rodden@live.unc.edu

From: Ye Wang notifications@github.com Sent: Monday, July 29, 2019 1:54 PM To: lhncbc/lforms lforms@noreply.github.com Cc: Rodden, Diane Judith rodden@live.unc.edu; Author author@noreply.github.com Subject: Re: [lhncbc/lforms] dataTypes CNE and CWE not transmitting user answers (#13)

Diane,

The LHC-Forms widget does not support POSTing data directly to back-end server. You need to get the data out of the widget using JavaScript code (by calling LForms.Util.getFormData, for example). The resulting data is a JSON object, which can be processed before and/or after you send it to the back-end. See details here: http://lhncbc.github.io/lforms/.

I cannot see the shortqstn. It returns an error message: "Method Not Allowed". I guess it is only allowed within your dev environment.

You can get FHIR QuestionnaireResponse from the LHC-Forms widget, by call LForms.Util.getFormFHIRData. Currently we partially support DSTU 3 and R4 and SDC Questionnaire. Again, you need JavaScript code to retrieve the data from the widget, and process it whatever you want. The HTML version of your form does not matter here if you want to use LHC-Forms. A JSON file with the form definition data you posted should just work with the LHC-Forms widget.

Hope it helps.

Ye

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/lhncbc/lforms/issues/13?email_source=notifications&email_token=AMWYACFHHJLKA2WYSUSHPGTQB4VEVA5CNFSM4IHPUHPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3BQAHI#issuecomment-516096029, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMWYACC5Y4V4PVJEEFXPBDDQB4VEVANCNFSM4IHPUHPA.

plynchnlm commented 5 years ago

You could change your submit button to type="button" and add an onclick="..." attribute. The "..." would be the call to get the FHIR data, and then code to send it back to your server (probably with an AJAX call). Getting the FHIR data would look like "var qr = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'R4')' after which variable "qr" will have the FHIR QuestionnaireResponse structure. (I am assuming you wanted the output in FHIR.) As Ye mentioned, getFormFHIRData is documented at http://lhncbc.github.io/lforms/#retrieving-fhir-data. To convert that to a JSON string, you might use "var qrJSON = JSON.stringify(qr, null, 2)". Do you know how to send qrJSON back to your server via AJAX? You could alternatively stuff it into a field value and post.

GitHubUNCStudent commented 5 years ago

I worked on this last night and all today, but it is not working.

I have attached my html with the Javascript. Right now, I am just trying to get the data from the form into the variable qr without POSTING it anywhere. I have changed the button as suggested by you to what is shown below in large green font.

I am supposed to be demonstrating the LHC-Forms solution to executive leadership in my organization on Thursday, so I am in a panic.

My Firefox console is showing these 2 error messages. Why am I getting the error LForms is not defined?:

Diane Rodden MSIS candidate 2019 School of Information and Library Science University of North Carolina at Chapel Hill mail to: rodden@live.unc.eduhttp://mail%20to:%20rodden@live.unc.edu

From: plynchnlm notifications@github.com Sent: Monday, July 29, 2019 6:08 PM To: lhncbc/lforms lforms@noreply.github.com Cc: Rodden, Diane Judith rodden@live.unc.edu; Author author@noreply.github.com Subject: Re: [lhncbc/lforms] dataTypes CNE and CWE not transmitting user answers (#13)

You could change your submit button to type="button" and add an onclick="..." attribute. The "..." would be the call to get the FHIR data, and then code to send it back to your server (probably with an AJAX call). Getting the FHIR data would look like "var qr = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'R4')' after which variable "qr" will have the FHIR QuestionnaireResponse structure. (I am assuming you wanted the output in FHIR.) As Ye mentioned, getFormFHIRData is documented at http://lhncbc.github.io/lforms/#retrieving-fhir-data. To convert that to a JSON string, you might use "var qrJSON = JSON.stringify(qr, null, 2)". Do you know how to send qrJSON back to your server via AJAX? You could alternatively stuff it into a field value and post.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/lhncbc/lforms/issues/13?email_source=notifications&email_token=AMWYACBGIY2AI4B7CTIYMTLQB5S55A5CNFSM4IHPUHPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3CEZ3Q#issuecomment-516181230, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMWYACHL6YQEKXSIYDTPZI3QB5S55ANCNFSM4IHPUHPA.

<!DOCTYPE html>

Study Questionaire Demo Skip to Content

Study Submission Form Demo

plynchnlm commented 5 years ago

The script “lformsFHIR.min.js” depends on the script “lforms.min.js”, so you should reverse the order of those tags. That is likely the cause of “LForms not deined”.

plynchnlm commented 5 years ago

Also, in your "onclick" handler, "var qr" establishes a local variable, so later when you are trying to log it, the variable is not accessible. You could put it on the window varaible in onclick (window.qr = ... instead of var qr = ...).

plynchnlm commented 5 years ago

I can see there is a need for a small example of using the FHIR part to get people started. We do have an app at https://lhncbc.github.io/lforms-fhir-app/, which is open-source (https://github.com/lhncbc/lforms-fhir-app) but that is probably not simple enough to be a good example.

plynchnlm commented 5 years ago

I created a small example here https://jsfiddle.net/lforms/8f754jhy/15/ which should hopefully get you unstuck.

plynchnlm commented 5 years ago

Note that in that example the form is in FHIR Questionnaire format (which is one of the output formats the form builder generates for you), so there is an extra call to convert from Questionnaire to the LHC-Forms format.

plynchnlm commented 5 years ago

Updated example (with some options to turn off the top-level questions and controls): https://jsfiddle.net/lforms/8f754jhy/21/

GitHubUNCStudent commented 5 years ago

Thank you for getting me unstuck. Your examples were very valuable. I greatly appreciate your help.

The LHC-Forms documentation has great demos for creating and adding the forms to a web page, so I had no problems with that portion of my project.

But there was no documentation on how to go about retrieving the user answers using LForms.Util.getFormFHIRData(resourceType, fhirVersion, formDataSource, options).

Your example of how to include LForms.Util.getFormFHIRData in one's html page was extremely useful and would be a great addition to the LHC-Form demos.

Diane Rodden MSIS candidate 2019 School of Information and Library Science University of North Carolina at Chapel Hill mail to: rodden@live.unc.eduhttp://mail%20to:%20rodden@live.unc.edu

From: plynchnlm notifications@github.com Sent: Tuesday, July 30, 2019 5:50 PM To: lhncbc/lforms lforms@noreply.github.com Cc: Rodden, Diane Judith rodden@live.unc.edu; Author author@noreply.github.com Subject: Re: [lhncbc/lforms] dataTypes CNE and CWE not transmitting user answers (#13)

Updated example (with some options to turn off the top-level questions and controls): https://jsfiddle.net/lforms/8f754jhy/21/

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/lhncbc/lforms/issues/13?email_source=notifications&email_token=AMWYACH5SMDDV4RBXO7RLS3QCCZSXA5CNFSM4IHPUHPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3FNM6Q#issuecomment-516609658, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMWYACH362LLR74ZSDAT2OLQCCZSXANCNFSM4IHPUHPA.

plynchnlm commented 5 years ago

I am glad it helped, and I am planning to add that as one of the demos soon.

The documentation for getFormFHIRData is here: http://lhncbc.github.io/lforms/#retrieving-fhir-data But maybe something wasn't clear? Or maybe it just needed an example.

almajoy commented 5 years ago

Hi, When I change the version of LForms script like this,

It's return a error message is Uncaught TypeError: $(...).tooltip is not a function. Why ?

plynchnlm commented 5 years ago

That seems to be a new, unrelated problem. Please open a new issue, and I will reply there. I am closing this one, as I added the demo requested by GitHubUNCStudent.