Unable to preload an existing survey

[ontanj]

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

To me it looks like a bug, but it might be insufficient documentation or me missing something. I've followed the guide at https://surveyjs.io/Documentation/Survey-Creator?id=Survey-Creator-Overview#loadsavesurvey as well as I can.

What is the current behavior?

Even if I set .text or .JSON, the creator always shows an empty survey.

What is the expected behavior?

I expect the creator tool to be loaded with whatever I save to .text or .json.

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

I created a fresh React application

$ npx create-react-app survey --template typescript
$ yarn add survey-creator

and changed App.tsx

import React, { useEffect } from "react";
import * as SurveyJSCreator from "survey-creator";
import "survey-creator/survey-creator.css";

function App() {
  useEffect(() => {
    var options = {}; //Use default options
    var surveyCreator = new SurveyJSCreator.SurveyCreator(null, options);
    var loadedSurvey = window.localStorage.getItem("survey-storage") || "";
    // var loadedSurvey =
    //   '{"pages": [{"name": "page1s","title": "simple survey"}]}';
    // var loadedSurvey = {
    //   pages: [
    //     {
    //       name: "pageA",
    //       title: "simple survey",
    //     },
    //   ],
    // };
    console.log("loading:");
    console.log(loadedSurvey);
    surveyCreator.text = loadedSurvey;
    // surveyCreator.JSON = loadedSurvey;
    surveyCreator.saveSurveyFunc = () => {
      window.localStorage.setItem("survey-storage", surveyCreator.text);
      console.log("saving:");
      console.log(window.localStorage.getItem("survey-storage"));
    };
    surveyCreator.render("surveyCreatorDivElementID");
  }, []);

  return (
    <div className="App">
      <div id="surveyCreatorDivElementID" />
    </div>
  );
}

export default App;

Specify your

• browser: Firefox 88.0, Chrome 90.0
• editor version: Visual Studio Code 1.55.2

[tsv2013]

creator.text assignment works ok for me, here is the working sample - https://plnkr.co/edit/Josp1aXKu6qM7QLe Probably issue is with your storage

[ontanj]

I tried without a storage as well, as seen on the commented lines. Also as seen in the code I print what I read from the storage, so that's not the problem.

However now I tried rendering by changing var surveyCreator = new SurveyJSCreator.SurveyCreator(null, options); -> var surveyCreator = new SurveyJSCreator.SurveyCreator("surveyCreatorDivElementID", options); and removing surveyCreator.render("surveyCreatorDivElementID"); and the problem was solved.

surveyCreator.render is the call creating this issue. However according to https://surveyjs.io/Documentation/Survey-Creator?id=Survey-Creator-Overview#show_survey_creator_options that is the recommended way to render if we are to set callbacks. Surely that must be a bug?

[lcfd]

Hi @ontanj 👋🏼

Even if I set .text or .JSON, the creator always shows an empty survey.

I've had a similar problem and found a solution that's actually working for me. Apparently, order matters, try to render before using the .text property.

surveyCreator.render('surveyCreatorContainer');
surveyCreator.text = JSON.stringify({...});

[andrewtelnov]

@lcfd Indeed, render() for some reason clears designer survey. I will take a look.

Thank you, Andrew

[andrewtelnov]

I have fixed it in v1.8.56. Here is the related issue.

Thank you, Andrew