What's New in Survey Creator V2

This help topic gives a detailed overview of UI, UX, and internal design changes that we introduced into the latest major update of the Survey Creator.

Knockout - we addressed your concerns

Survey Creator V1 depended on Knockout. This fact was one of the most frequent concerns we heard from our customers. Indeed, the dependency raised the following important issues.

Issue 1: Use of the eval() function

Knockout uses the eval() function to process templates. This fact opens a possibility of running malicious code on the user's machine if an application developer forgets to sanitize the template code. Such security risks might prevent companies from using Knockout and, therefore, SurveyJS.

Issue 2: Component as a black box

Although Survey Creator for Knockout included a rich API, the component was perceived by Angular, Vue, and React developers as a black box that in many cases did not fit well into the application lifecycle.

Issue 3: Knockout adoption decline

Knockout enriches a pure JavaScript application with features like templates, declarative binding, and automatic UI updates. It was very popular when SurveyJS development started back in 2015. However, with the advent of more powerful front-end frameworks (Angular, Vue, React), Knockout popularity started to decline. Nowadays, JavaScript developers rarely use Knockout in new projects.

Solution

The new Survey Creator introduces a native implementation for React (more on this below). Implementations for Angular and Vue are planned for future development. For those customers who still use Knockout in their applications, we also ship an updated Survey Creator for Knockout with new look and feel that matches the React version.

Native Survey Creator for React

New Survey Creator for React is a composition of true React components. The native implementation became possible because we separated the platform-independent model code (now distributed as the survey-creator-core package) from the platform-specific rendering code (the survey-creator-react package). You can override the default rendering functions of our React components and integrate your own React components (view the Override the Property Grid Component example). We implemented the same concept in the SurveyJS Library earlier.

Most of the UI elements in the new Survey Creator (Property Grid, Translation and Logic Tabs, modal editors) are stylized surveys from our own SurveyJS Library for React. This feature allows you to integrate any 3rd-party React component into the SurveyJS library and then reuse the same configuration to integrate the component into the Survey Creator. View examples that show how to integrate the React Select component into a standalone survey or into the Survey Creator.

Major UI/UX changes

We redesigned most parts of the Survey Creator to make its UI more adaptive and UX more intuitive. Refer to new feature descriptions in this section for details.

New Toolbox and Property Grid design

Re-designed Toolbox and Property Grid look modern and adapt themselves to different layouts.

Survey Creator - Toolbox and Property Grid

Action buttons

We now display action buttons within their corresponding questions (instead of above the questions). Programmatic access to the buttons is now possible.

Survey Creator - Action buttons rearranged

If you click the button that changes the question type, you will see a drop-down list of all supported types. In Survey Creator V1, this list was limited to the types that were interchangeable with the current element type. With the full list, you can now add multiple default questions to the survey to specify their types afterwards.

Survey Creator - Question types dropdown

If you switch between non-interchangeable question types, the question configuration may be lost. Use Undo and Redo buttons to roll back or reinstate the previous configuration. Alternatively, you can revert to old behavior. Use the following code to limit the list to interchangeable types only:

SurveyCreator.settings.questionConvertMode = 1;

Page navigation

Previously, users configured each survey page in an individual tab. In the new Survey Creator, pages are displayed one under another. To reach a certain page, users can scroll the design surface or select the page in the page navigator.

Survey Creator - Page navigator update

Adorners

Adorners are design-surface controls for survey element manipulation. In the new Survey Creator, adorners allow users to edit text inline.

Survey Creator - Element creation

Adorners also implement the capability to change column cell properties directly in the designer.

Survey Creator - Element creation

Survey element creation

In the designer, users can click Add Question to quickly add new survey elements. The ellipsis button allows users to select the type of new questions.

Survey Creator - Element creation

Survey element selector

The survey element selector now displays the survey structure as a tree. In addition, users can use the search box to filter elements. The search box appears if the element list contains more than 10 items.

Survey Creator - Element selector in the Property Grid

Translation tab

Previously, the Translation tab had individually-designed layout and controls. In the new Survey Creator, this tab displays our own survey component with Matrix questions. In addition, the Translation tab now includes a Property Grid that allows users to select required languages.

Survey Creator - Translation tab

Logic tab

Users can now create and edit logic rules within the same view.

Survey Creator - Logic tab

We also added the capability to filter rules by questions or action types. This capability is useful for surveys with complex logic.

Survey Creator - Question selector in the Logic tab

Preview survey on different devices

We renamed the Test Survey tab to Preview and added a device selector that allows users to preview the created survey on most popular devices.

Survey Creator - Preview tab

Technical changes

Survey Creator UI elements are surveys

In the new Survey Creator, we use our own SurveyJS Library to render most of the UI elements. The main benefit of this approach is that we didn't have to implement native rendering because the SurveyJS Library already supports it for all frameworks.

This new internal design also prompted us to extend the Library with new features used in the Survey Creator. For example, question titles can now contain context actions, and Comment questions can automatically grow or shrink the input field to accommodate the content.

Since Survey Creator UI elements are surveys, you can customize them as you would customize surveys. For example, the Property Grid is a one-page survey in which every property is a question. To introduce a new or override an existing property editor, you need to define a custom question JSON configuration and implement functions that survey events call internally.

View Custom Property Editor example

Lazy Rendering

To improve performance on large multi-page surveys, we introduce support for Lazy Rendering to our SurveyJS Library. This feature allows the survey to render questions outside the viewport as skeletons instead of rendering them in full.

View Lazy Rendering example

Alternative Rendering for Adorners

Previously, we used to render survey elements first, and only then added adorners. This wasn't a very effective solution because we modified the DOM twice. The new version only modifies the DOM once and adds adorners right away. This was made possible because the new Survey Creator allows you to register new element rendering functions that override the default functions. For example, to implement in-place text editing in the Designer, we render an element that supports editable content instead of the default string element.

Native Survey Creator for Angular and Vue (Planned)

The new Survey Creator includes native support for React and Knockout. We also plan to develop native versions for Angular and Vue in the future. For now, you can integrate the Knockout version into your Angular or Vue application as described in the following articles:

Migration to the New Survey Creator

If you already have a commercial license for the Survey Creator or a SurveyJS Pro subscription, and you purchased them within a year of the new Survey Creator release, then you can migrate to the new version now without additional payment.

If your subscription has ended, you can continue using the old Survey Creator version as long as you wish. To upgrade to the latest SurveyJS releases that include the new Survey Creator, renew your subscription.

Refer to the following help topic for information on how to migrate from Survey Creator V1 to V2: Migration from Survey Creator V1 to V2.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.