Running Multiple Surveys in a React App and Sharing Data Across surveys

[kc-nxtbig]

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

Question

What is the current behavior?

1. We are trying to run multiple mini-surveys in a react App - as the length of a single survey can get too long. Each mini-survey is triggered by a selector (say Button) - only one mini-survey running at a time.

2. However, we have a case, wherein the data of one survey can impact the visibleIf conditions of questions in other surveys. Also, the calculatedValues/ expression type questions in other surveys depend on the input data provided by survey(s) in the current view.

3. We are logging the data of each mini-survey to a redux store onValueChage. The state is accessible to all surveys (the one in currentView as also to other Components.

4. We are using the survey properties to update visual indicators (respective button colours) to show surveys that have errors/ currently active/ and visible page count.

5. We are unable to update/ run the expression tree of surveys that are not in the current view, eventhough the data on which some of the questions in those surveys is being passed as state - thereby, we are not able to update visual indicators of other survey states/ visible page count/ error state.

6. Is there a way that we can trigger recomputation of the expression trees, update visblePage state, and get the latest errorState of surveys not in the current view - onValueChanges in the survey in current View?

What is the expected behavior?

Hoping to be able to update the survey object not in current view with latest state and recompute expressions, update visiblePages, and get latest their latest errorState from changes in data of survey in view

How would you reproduce the current behavior (if this is a bug)?

Not a bug.

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser: Chrome (latest)
• browser version: Latest
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: Latest

[andrewtelnov]

@kc-nxtbig I would start to solve the problem that you are facing in another way. If you beleive that survey is too long for a user to answer it at one time, then you can still have one survey, but show only part of it by introducing your own navigation. You can disable the default navigation and create your own. Here is the example. You can still have one survey, but emulate several mini-surveys introducing your own navigation and show/hide survey based on your logic. You can introduce a new property to the page object. It can tell that this page is last in the current mini-survey or new in the next mini-survey. Based on that you can hide/show "Previous" button and show/hide "Next"/"Complete" buttons. You can have your own buttons or navigation elements.

Thank you, Andrew

[kc-nxtbig]

@andrewtelnov ,

Thank you very much.

The UI we like to build is as follows.

1. Three-level Nav Buttons.

<FirstLevelNavButtons>
               <SecondLevelNavButtons>
                     <ThirdLevelNavButtons>
                            <CollectionOfSurveyPages>

2. Each FirstLevelNavButton controls render of its own set of SecondLevelNavButtons , each SecondLevelNavButton controls render of its own children ThirdLevelNavButtons and click of any ThirdLevelNavButton shows the collection of survey pages under it (the custom navigation in the example cited).

3. One problem of interest to us is to mark the corresponding buttons up the hierarchy if any of the pages under it have errors or incomplete.

4. We were attempting to use page.hasErrors() method to get the state of each page on any valueChange and update the error state of the buttons. Likewise visiblePages property to get visible pages under each thirdLevel nav buttons to show/ hide that button.

5. We found the performance a bit laggy. Survey is about 600 odd questions currently with some basic computations. In future we expect it to scale to about 2000 odd questions.

Any suggestions?

Thank you very much KC

[kc-nxtbig]

@andrewtelnov ,

An update. We went ahead with the multiple-mini surveys option which seems to be working fine.

• For updating Navigation button states, we are using inbuilt survey properties, events and methods - visblePageCount , onVisibleChanged and hasErrors.
• For passing data of one survey to others - we are using a common data store, that updates onValueChange - and is passed as a variable to all surveys using setVariable method
• The setVariable method is triggering expression tress of surveys not rendered

This appeared to be working fine.

If you don't have any suggestions/ views - I guess this issue can be closed.

Have a suggestion though -

Can the team consider adding a survey property - pagesWithErrors, that provides a list of all pages with errors currently. Maybe on similar lines as visiblePages property

Thank you