Released: January 16, 2024

SurveyJS v1.9.126 implements Basic and Advanced modes in Theme Editor, introduces a new design for pop-up surveys, adds an API to create a custom message panel on the design surface in Survey Creator, and includes other enhancements and bug fixes.

In order to let you configure your theme in every little detail, Theme Editor supports a great many settings, which may be overwhelming for an unprepared user. To enable any survey author, regardless of their experience, create themes with ease, Theme Editor now divides appearance settings between Basic and Advanced modes.

The Basic mode includes only the core appearance settings, while the rest of the settings will be computed automatically. The Advanced mode reveals all appearance settings and allows users to specify them. To switch between these two modes, use the "Advanced mode" switch in the Appearance category header:

SurveyJS v1.9.126 introduces a new design for surveys displayed in a pop-up window:

View Demo

A message panel is displayed within a question box on the design surface. It contains a text message and an optional action link. The following image illustrates a built-in message panel that appears when a question sources its choice options from another question or from a web service:

The new release introduces an onCreateCustomMessagePanel event that enables you to create a custom message panel. This event is raised for questions whose isMessagePanelVisible property set to true. The following code shows how to enable this property based on a condition. This code implements a custom data source selector for select-based questions (Dropdown, Checkboxes, Radio Button Group). When a survey author selects any data source other than "Custom", the isMessagePanelVisible property becomes enabled, indicating that the onCreateCustomMessagePanel event must be raised. A function that handles this event specifies custom message and action button texts and onClick event handler:

import { Serializer } from "survey-core";
import { SurveyCreatorModel } from "survey-creator-core";

Serializer.addProperty("selectbase", {
  name: "choicesDataSource",
  displayName: "Data source",
  category: "choices",
  choices: [
    { text: "Country", value: "country" },
    { text: "Region", value: "region" },
    { text: "City", value: "city" },
    { text: "Custom", value: "custom" }
  ],
  onSetValue: function (obj: any, value: any) {
    // Set the custom property value 
    obj.setPropertyValue("choicesDataSource", value);
    // Display the message panel based on a condition
    obj.setPropertyValue("isMessagePanelVisible", value !== "custom");
  }
});

const creator = new SurveyCreatorModel({});

creator.onCreateCustomMessagePanel.add((_, options) => {
  options.messageText = "Choices for this question are loaded from a predefined data source. ";
  options.actionText = "Go to settings";
  // Focus the "Data source" editor within the Property Grid
  options.onClick = () => {
    creator.selectElement(options.question, "choicesDataSource");
  };
});

HTML Field

Form Library

• Multi-Select Dropdown (Tag Box): It's impossible to review all selected values in read-only mode (#7655)
• An error is thrown when instantiating TOC for a preview in Survey Creator (#7669)
• Matrix rows have different height when alternateRows is enabled (#7564)
• Single-Select Matrix: The enableIf rule doesn't work for individual rows (#7617)
• Checkboxes/Tag Box with Select All and None: Survey results contain an unexpected empty string (#7657)
• Dynamic Panel: The panelAddText and panelRemoveText properties are not reactive (#7658)
• Dynamic Panel: Create panels based on a template on demand instead of at startup to enhance performance (#7662)
• Choices loaded from web are updated even if data is the same (#7674)

Survey Creator

• The onQuestionAdded event receives 'undefined' as options.reason when a question is converted from another question (#5065)
• Theme Editor: Survey font settings do not serialize the #FFFFFF color (#5056)
• Image Picker: When an image cannot fit the Edit and Delete icons, its appearance in the Designer tab becomes confusing (#4862)
• Logic tab doesn't allow you to disable sorting for questions in question selectors (#5066)