Support multiple entities form / questionnaire

[IDIBuild]

Are you requesting a feature, reporting a bug or ask a question?

feature / question

What is the current behavior?

We would like to support multiple entities questionnaire forms.

In our situation, it's a medical form that the questionnaire form should display for each of the entities.

we discussing if the solution should be UI based only or be part of surveryjs solution API

for example, if there was an API that we can ask the same question for 1..N entities and upon survey submission, we will get the data for each entity.

also - it could be much more complex because each entity can get a different survey path as each entity answer can result in a different UI based on visibleIf condition.

Any idea/comment will be more than helpful.

best

[andrewtelnov]

@IDIBuild Do you mean you have the same survey, but you have only one additional invisible value, the entity? Then you may simply set survey.setValue("entityName", entitity1"); and you will get it in the final json data. Additionally you may use entityName in visibleIf property. You may set visibleIf on question/panel/page level, in case you want to hide/show several questions at one time.

Sorry, if I do not get you. Then please explain your scenario in another way.

Thank you, Andrew

[IDIBuild]

Hi @andrewtelnov

What I mean is that in our business scenario we got two major requests: let's take a health insurance for example:

relevant questionnaire form may ask about more than one entity - for example - a family of father + mother + child.

each entity in the family need to answer the questionnaire and we want to be able to fill the answers on the same survey and not fill separately.

hoping it's more clear this time :-)

[andrewtelnov]

@IDIBuild Yes, I have got it now. Again, there are other questions. How are you going to store the data? If it is a JSON and the format something like this:

var entitiesData  = {
   "FamilyName": "Millers",
   "EntityCount" : "3",
   "EntitiesInfo" : [
      {"Name" : "Mark",
      "FullAge": "43",
      ....},  .....    
    ]
}

In this case you may run N surveys. Create the JSON object and on completing every survey, push the survey.data (survey JSON result) into entitiesData.EntitiesInfo. You have to use survey.onComplete event. On completing the N-th survey, you may save entitiesData on your server.

The initial data entry, family name and information about person, could be done by using SurveyJS as well. On completing it, you may start N-th survey and add EntitiesInfo array into the initial/main survey data.

Let me know if you need more help.

Thank you, Andrew

[andrewtelnov]

@IDIBuild I have created a plunker example: https://plnkr.co/edit/n9FRZC?p=preview It should do exactly what you are trying to do.

Thank you, Andrew

[andrewtelnov]

@IDIBuild just want to followup. Does the example help or I did not get you correctly?

Thank you, Andrew

[IDIBuild]

Hi @andrewtelnov. sorry for not responding. Saw the plnkr solution and very cool. My case's somehow different - let me try to explain.

I will define my entities as a predefined condition - for example, father + mother. the question is: "Do you use any medical drugs?" the layout should display this question for each entity separately. and now for the more complex stuff - if the answer to the following question is true there will be a follow-up question - let's say "Do you use a cholesterol reduce drug?" but the question should be displayed only for the father that says Yes to the previous question and not to the mother that answered No. what can cause a different survey tree path and can be challenging at the UI level and the survey.js engine

what do u think? do I make any sense?

best

[andrewtelnov]

@IDIBuild I have added a new column into the matrix and new question into the entity survey with visibleIf criteria: https://plnkr.co/edit/n9FRZC?p=preview

We are currently working on our website redesign and we are looking for real and complex surveys. We feel that our platform is already good enough, but since it is open source, new and texts are written by non-native speakers, there is not enough trust in it. I would be happy to create the full survey for you, in case you allow us to publish it on our new web site. You may remove some questions or change the design/text before publishing. Additionally, I see that we may do some new features into the library. Your survey will look and work perfectly and our library becomes better. For example: 1) the code on mainSurvey.onMatrixRowAdded event can be removed if we add some options into matrix question/matrix column objects. 2) Right now I use a radiogroup for "Yes", "No". I may use the checkbox, but in this case the data will be stored as ["value"] and not as "Yes" or "No". An option to checkbox question is needed.

Do you have any interest in this? I would be happy to work together.

Thank you, Andrew

[eladh]

Hi, Andrew.

we will be more than welcome to discuss it and display a demo.

took a simple document that describes a common form used by the insurance industry.

I will try to breakdown the main challenges:

the main challenge here is how to display a usable UI Survey that asks about more than one entity (in this case its' a family) and doesn't separate the UI to multiple instances of the survey. the main issue here is that the customer will be able to share the same survey for all of the family and in some cases, we will be able to ask some more details (follow-up questions) about a specific family member.

as for the business point of view, we will need a different survey data structure for each of the entities so we can process it for each of the members.

1. see Family Members columns (page 3) - how can we supply a predefined list to be answered separately by each member.

2. see Systems Review table (page 4) - how can we handle a form questions based on a common category such as Hem/ID/Lymph? we need to display this questions as collapse that can be open/closed.

3. the main challenge here - how can we display a follow-up question? a) in some cases it will be simple as you showed in the demo that in the next step we will ask a specific entity about his condition and then return to the main flow. b) but what about a more complex scenario that the follow-up step is more than one question or even a sub-survey. we thought about displaying the survey as a flow that will help the user to understand that this part or even be able to say: I will complete this part later and in this case, at the end of the survey we will display the user with an option to continue where he's left

c) this brings me to the part of continuing where I left - when the user needs to fill a complex sometimes the user will want to stop and continue later - we also looking for a solution to rerun the survey from the part will left.

[eladh]

Hi @andrewtelnov

first of all and as I didn't manage to say it before - your project is amazing and didn't saw such advanced and friendly solution.

If I may I wanted to ask more technical questions:

1. I saw the feature/ng branch and it's will be really helpful to us if it will be integrated as part of the master as there are still allot of AngularJS developers.

2. in our case with have been created dedicated UI components framework based on Angular 1 and we want to use the same components as part of the survey framework and the same for the styling system - we using angular material 1.x. is it going to be possible? can we use all the features with our custom widgets?

3. reduce the footprint of the framework - as we are planning to use our UI+Style frameworks, is there any way in the build process to remove default widgets and styling system in order to reduce the size of the target artifact?

Best,

[andrewtelnov]

@eladh Thank you for pdf document. I have now a better understanding what you are trying to do. Let's make this survey. I would suggest to create several small parts in plunker first. So all issues with workflow and UI (I am talking about widgets and layout, not design) will be solved and cleared up. After that we may create the full survey and at the last stage apply the design/css. We may do some experience with design/css in plunker as well in parallel.

1. Family Members. I will do a demo in plunker that does what you need. I understand that it should look as one survey. I will propose my UI and we will discuss it.
2. System Review. There are two solutions:
   • We may have a radio group question that ask: Do you fill the System Review? ["Yes" "No"] and a page or panel that is shown/hidden based on the answer
   • I may add a new property to the Panel object, expandState: string ('none", "expanded", "collapsed"). By default it is "none" and content of the Panel (questions and other Panels) are shown. Expanded - similar to "none" but a " - " button will be rendered before the title. On pressing it the Panel will be collapsed and only title is shown. Collapsed - opposite to expanded. If you think it is a better way, we implement it. I have just added it in our TODO list, since I think it is cool and we will do it sooner or later.
3. I need real examples to find out the solution. visibleIf or enableIf (this property will be in the next minor) properties may handle complex Boolean expressions like: {a} != 'aaa' or {b} contains 2 and ({a} = "ccc" or {c} < 3)
4. It is not a problem at all. This question has been asked not the first time. All you need to store current page index, additionally to the data. On restarting the survey, apply the data: survey.data = savedDataasJson; and survey page index: survey.currentPageNo = savedPageNoAsNumber. I would store the data in the system on every "next" page and additionally on timer, every x minutes.

Technical questions:

1. Angular 1.x. To be honest we don't want to work on Angular 1.x by ourselves. We have already Angular 2+ support. A company has asked us to help them with Angular 1.x. They do not want to use jQuery or Knockout versions. We have agreed to help them and created the branch so they may start. We promised to provide them any kind of help. They agreed to make it as Open Source project. We have created the branch, they said thank you and disappeared :-). The current Angular 2 is based on react version + preact. You may use the same approach. It is probably the easiest way.
2. Yes, custom widgets are possible. We did not try it with Angular 1.x widgets. The widgets that work with DOM directly are easy. We need to see what you are trying to do.
3. We are using webpack: https://github.com/surveyjs/surveyjs/tree/master/src/entries. Questions and localization are done as plug-ins. It should not be a problem to remove or replace the most of them. I think it is doable.

I will be waiting for your comments. I will make a plunker demo for "Family Members", hopefully today.

Thank you, Andrew

[eladh]

hi @andrewtelnov

About point 2 – adding new attribute seems to be the best flexible solution. About point 3 – What I was trying to say, in a more specific way: let’s say that the father answered question “Do you have a heart condition” – Yes, and the mother answered – No our logic decided that in this case a Panel (inner survey) need to be displayed. This brings complex UI Decisions to make: • Do we saying to the user that we starting a new sub/inner survey about his heart condition? • A more explanatory flow navigation bar may need? • A complex survey can cause the user to ABEND the survey – a “Continue later” flow can be very helpful in this cases. Do you think that in this cases (sub/inner survey) we will need to use the enableIf?

About point 4– it may be more complex to resolve – but let’s discuss it only if you think that the “Continue Later” makes sense in your end.

[andrewtelnov]

@eladh I have created a new example: https://plnkr.co/edit/j5DKTy?p=preview. It is about (1) (2) - ok, we will do it. I think we will implement it in 5-10 days. (3) It is not a problem. You may always ask do you want to answer these questions or continue (by pass them). If he says continue, just make those questions/panels/pages invisible by using visibleIf property. At the end of the survey, you may ask him about entering those question again, if he doesn't answered them yet.

Thank you, Andrew

[eladh]

Hi @andrewtelnov

see the example: Family History (page 3), is there a possibility to display question matrix with Family Members columns?

as I stated in my last comment, in a case of an inner survey (as a follow-up procedure): a) is there API to display some kind of a flow header that will display the current stage in the survey?

we are planning to allow our Super-Users to edit/modify the survey. in this case supporting capabilities such as "Continue later" or supporting "Follow-up" questions/survey without support from the framework.

we thinking to display a tree based editor that will help the users to understand the flow of the survey/ also in this case, if it makes sense I will be glad to supply more information

best.

[andrewtelnov]

@eladh Yes I will modify the display question matrix and will add the Family Members columns. I will do it today. I think, I may modify the first matrix as well, so there will be only one survey and subsurvey will go away. Do you need this?

And I do not quite understand about the flow API. Do you mean show hide the progress bar or do you want to have an event to control the progress bar (% + page count and current page)?

Thank you, Andrew

[andrewtelnov]

@eladh I will add visibleIf property into column first. It will allow to have a matrix as: Relative | Name | Is Alive? | Age | Deceased Age | Cause of Death | I will work on it right now. I remember several people have been asked about it as well. I did not completely understand the scenario. After that I will make an example with Family Members as columns in the matrix.

Thank you, Andrew

[andrewtelnov]

@eladh column.visibleIf property issue is here: https://github.com/surveyjs/surveyjs/issues/515

[eladh]

hi @andrewtelnov . thanks for the time and effort its quite amazing :-)

a. when i define a Panel Entity (with sub-survey) it would be great if will be flow indication in the flow toolbar. some kind of a breadcrumbs. if i understood you expose a progress.html template that can only display progress but is there any possibility to display flow.html that will represent the header as flow.

b. the survey will be maintained by "Super Users" that will make changes such as questions/answers/visibleIf.... c. in this case how can i support generic "Entity based flows" & "Continue Later" in a more generic way. i would love to here your thoughts about it.

best, elad.

[andrewtelnov]

@eladh I have implemented the column.visibleIf and here is the first matrix now (all custom code was gone): https://plnkr.co/edit/SYJBdx7AkjqOnXXrqTmV?p=preview Please note, it uses the dev version. However, before we go further, I just got another idea. I think it will be easy enough to add a feature as repeatable/dynamic Panel. Right now Panel is just a container and nothing more. However, I believe I may create a dynamic Panel, that in fact will work exactly like matrix dynamic. Panels instead of Rows and Questions instead of Columns.

So for every Family Member you will have the Panel, with questions similar to the columns in the current example + illness matrix. It will be done naturally, without any custom code.

What do you think? I guess it would solve the issue completely and will not need custom progress.

Thank you, Andrew

[eladh]

hi @andrewtelnov. i will try to explain - we have two modes of entities:

1. the first is Matrix based - Questions * Number of entities in this case we will display the questions as the rows and the entities as columns. the visibleIf at the column level will be great help to display only relevant entities. in this scenario - we will not support a follow up questions in the same Matrix Question.

2. the second is Follow-Up questions based - very similar to what you have done in this Plunker after user submitted data we may decide that a follow up survey should be presented , and if I'm right survey.js Panel with VisibleIf condition will do the job , I'm i wrong ?

also - because "Follow-up" Questions may cause more complicated flow i ask for :

a) generic "Continue Later" - as explained before b) some more advanced survey toolbar/header that can display the current state.

my last issue was about how can we integrate "Continue Later" + "Follow Up questions" as part of the framework (Editor/JSON) for example - how can i define the following : for each on the entities i would like to display a "Follow up questions" Panel if condition X is true.

for example - mark some part of the Questions as "Continue Later" without custom based VisibleIf complex rules.

best, elad.

[andrewtelnov]

@eladh You want to have one Panel for one entity. At the current moment it will require to write a lot of tricky code. I do not know about your deadline, but if you have a week, then I'm pretty sure, we will be able to create a new question type: QuestionDynamic. This question will have a template panel - actually the typical panel you have it now. In the template panel you will have a radio group question and another nested panel. A radio group is a question: Do you want to feel information about {relative} {name}? - Yes/No If yes, the nested panel with all required questions about the Family Member will be shown. The template panel will be generated for every Family Member. In this case, an user may do not fill these information initially and do it later or do it for any Family Member(s) he wants by skipping the first x. Does it make sense?

Thank you, Andrew

[eladh]

hi @andrewtelnov

we have enough time - we only on the design stage. as for the main issue - your idea seems great and seems that is solving the issue in a generic way.

1. what about the "Continue Next" option - do u see it as a framework capability so we can mark elements in the survey with this attribute without the need to write custom VisibleIf rule?

2. make the toolbar/header API more reach - so we can indicate certain events such as an inner panel or QuestionDynamic?

best, Elad.

[andrewtelnov]

@eladh (1) I think you will not need "Continue Next". Family Members question (panel dynamic) will be on separate page. By default for every family member only one radio group will be shown. If an end user press 'Yes' on this question then the panel with all questions for this family member will be shown. We will introduce expand/collapse feature for the panel, then an end-user may always collapse/expand the internal/nested panel with a lot of questions and keep the page not too long. (2) Lets create the first version of QuestionDynamic and then we will what is missed here and add the required functionality.

Thank you, Andrew

[andrewtelnov]

@eladh Here is the link to the PanelDynamic developement: https://github.com/surveyjs/surveyjs/issues/525

You may add your thoughts about PanelDynamic there.

Thank you, Andrew

[andrewtelnov]

@eladh Here is the prototype with QuestionPanelDynamic: https://plnkr.co/edit/aMcSnl?p=preview I am going to work on design time right now for this question type. There are several open design issues that has to be solved. We may discuss them: 1) Where to place the "Remove" button 2) Right now all questions inside QuestionPanelDynamic are treated as one question. I think it is better to change and number them as they were not inside the QuestionPanelDynamic.

There are some further improvements that I want to add: 1) "Do you want to enter the detail information?" Right now it is a radio group question. I want to make it as QuestionBoolean. The check will be next to the title and you may do no have a question number 2) age dropdown choices property look weird. I want to add a property with nested properties "startNumber", "endNumber" and step (1) by default. So you may define only 2 properties instead of a lot of choices items.

Thank you, Andrew

[andrewtelnov]

@eladh I have updated the example: https://plnkr.co/edit/aMcSnl?p=preview There are two new properties now: renderMode: string, the default is list. In the example it equals to: progressTop (you can use progressBottom and progressTopBottom) showQuestionNumbers: string, in this example it equals to "onPanel", but default it is "off". You may use "onSurvey" as well.

I think, I am mostly done with QuestionPanelDynamic. Could you please review the example and tell what is missed here?

Thank you, Andrew

[eladh]

thanks .

will do

[eladh]

Hi @andrewtelnov . i checked the examples and API and its a great fit to our scenario.

10x