Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.38
Try
Buy
v 1.9.38

Migration to Survey Creator V2

Migration in React

Survey Creator V2 introduces a native implementation for React. Although this is a major update, the changes mostly affect rendering and UI customization. The rest of your code for V1 should work fine in V2.

To migrate to the new Survey Creator, uninstall survey-creator and install the survey-creator-react package. Its dependencies (survey-core, survey-creator-core, and survey-react-ui) are installed automatically:

npm uninstall survey-creator
npm install survey-creator-react --save

Most of the imports will break after this operation. Run your application and fix import errors shown in the console. As a result, the Survey Creator code should look as follows:

import "survey-core/defaultV2.css";
import "survey-creator-core/survey-creator-core.css";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";

const options = {
  showLogicTab: true
};

export default function SurveyComponent() {
  const creator = new SurveyCreator(options);
  // ...
  // Add event handlers, survey JSON, and customizations here
  // ...
  return <SurveyCreatorComponent creator={creator} />;
}

Migration in Angular, jQuery, Knockout, and Vue

Replace Packages / Source Links

Survey Creator versions for Angular, jQuery, and Vue continue to use the Knockout engine. The new version does introduce a change though. We separated the Knockout monolith module into a platform-independent core (survey-creator-core) and platform-specific view models (survey-creator-knockout). You need to change references to SurveyJS and Survey Creator scripts and style sheets or replace npm packages accordingly:

Angular
npm uninstall survey-creator
npm install survey-creator-knockout --save
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  // ...
  "projects": {
    "project-name": {
      "projectType": "application",
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "styles": [
              "src/styles.css",
              "node_modules/survey-core/defaultV2.min.css",
              "node_modules/survey-creator-core/survey-creator-core.min.css"
            ],
            // ...
          }
        }
      }
    }
  }
}
Vue
npm uninstall survey-creator
npm install survey-creator-knockout --save
<script>
import "survey-core/defaultV2.min.css";
import "survey-creator-core/survey-creator-core.min.css";
</script>
Knockout / jQuery
<!-- Previously -->
<!-- <script src="https://unpkg.com/survey-knockout/survey.ko.min.css"></script> -->
<!-- <script src="https://unpkg.com/survey-knockout/survey.ko.min.js"></script> -->

<!-- <link  href="https://unpkg.com/survey-creator/survey-creator.css" type="text/css" rel="stylesheet"> -->
<!-- <script src="https://unpkg.com/survey-creator/survey-creator.min.js"></script> -->
<!-- Now -->
<script src="https://unpkg.com/survey-core/survey.core.min.css"></script>
<script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
<script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>

<link  href="https://unpkg.com/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>

In Angular and Vue, most of the imports will break after you uninstall the old and install the new packages. Run your application to find all broken imports and change them to imports from "survey-core" or "survey-creator-knockout".

Update the Survey Creator Constructor

Previously, the constructor accepted two arguments: the element ID in which to render the Survey Creator and an object with Survey Creator configuration. When the constructor was called, it both instantiated and rendered the Survey Creator.

Now, the constructor only accepts the configuration object. Thus, we separate the instantiation from the rendering. To render the Survey Creator, call the render(elementId) method on the Survey Creator instance:

// Previously
// const creator = new SurveyCreator.SurveyCreator("creatorElement", options);
// Now
const creator = new SurveyCreator.SurveyCreator(options);
// ...
// Add event handlers, survey JSON, and customizations here
// ...
creator.render("creatorElement");

// In modular applications:
import { SurveyCreator } from "survey-creator-knockout";
const creator = new SurveyCreator(options);
// ...
// Add event handlers, survey JSON, and customizations here
// ...
creator.render("creatorElement");

Customized Property Editors

In Survey Creator V2, we changed the internal design of the Property Grid. You need to rewrite most of your old customization code. On the other hand, we simplified customization. The Property Grid is now a survey. To add a new property editor, you simply need to add a question to the survey. Refer to the following help topic for more information: Add Custom Properties to the Property Grid.

Customized Adorners

We changed how adorners are rendered on the design surface. We now use native framework techniques to render the adorners (templates in Knockout and React components in React). If you added custom adorners in V1, your code won't work in V2. Replace it with the onDefineElementMenuItems event handler. Within this handler, you can add a new action or customize a predefined action. Refer to the following example for more information:

View Custom Adorner example

Localization

Previously, localization utilities were part of the main Survey Creator module. We decided to separate them to make the main module lighter. Refer to the Localization & Globalization help topic for information on how to enable localization after you migrate to the new Survey Creator.

Other Features

To facilitate migration, the new Survey Creator logs backward-compatibility warnings into the console. These warnings suggest how you can replace deprecated properties and outdated functionality. Please follow these suggestions to keep your code up to date.

Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey