SurveyJS v1.9.126
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.
Theme Editor: Basic and Advanced Modes
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:

New Design for Pop-Up Surveys
SurveyJS v1.9.126 introduces a new design for surveys displayed in a pop-up window:

Survey Creator: Create a custom message panel on the design surface
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");
};
});
New and Updated Demos
Bug Fixes and Minor Enhancements
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
andpanelRemoveText
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' asoptions.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)