Released: June 6, 2024

SurveyJS v1.11.1 introduces a breaking change: Theme Editor now internally uses data models for easier Property Grid customization. New features include search in Theme Editor's Property Grid, enhanced accessibility for read-only surveys, custom item component support in Ranking questions, and a new dateDiff function for expressions.

In previous versions, Theme Editor didn't have any data model based on which Theme Editor's Property Grid could be constructed. Instead, the Property Grid was assembled from separate editors whose values synchronized with theme SCSS variables without any data binding involved. Such design made it difficult to customize the Property Grid.

With SurveyJS v1.11.1, we introduce two data model classes for Theme Editor: ThemeModel (implements the ITheme interface) and HeaderModel (implements IHeader). Both classes extend the Base class, which means that you can apply the same customization techniques that you apply to other survey elements.

The following code shows how you can customize Theme Editor's Property Grid in Survey Creator v1.11.1 and later:

import { Serializer } from "survey-core";

// Hide the "Background image" and related settings for the survey
Serializer.getProperty("theme", "backgroundImage").visible = false;
Serializer.getProperty("theme", "backgroundImageFit").visible = false;
Serializer.getProperty("theme", "backgroundImageAttachment").visible = false;
Serializer.getProperty("theme", "backgroundOpacity").visible = false;

// Hide the "Background image" and related settings for the survey header
Serializer.getProperty("header", "backgroundImage").visible = false;
Serializer.getProperty("header", "backgroundImageFit").visible = false;
Serializer.getProperty("header", "backgroundImageOpacity").visible = false;
Serializer.getProperty("header", "overlapEnabled").visible = false;

View Demo

This breaking change affects only those Survey Creator users who previously customized Theme Editor's Property Grid.

The search functionality in Theme Editor's Property Grid enables form designers to quickly find required theme settings.

View Demo

Previously, it wasn't possible to navigate between form fields and read their values in read-only / display mode. Since SurveyJS v1.11.1, read-only form fields support navigation, and accessibility tools can read form field values.

View Demo

A Ranking survey question asks respondents to arrange a set of choices in order of preference, importance, or other criteria, or assign a numerical value to each choice based on their relative rank. The new release adds a capability to customize rank items using custom components. To apply a custom component, assign its name to the itemComponent property.

View Demo

SurveyJS v1.11.1 introduces a new built-in function—dateDiff(startDate: any, endDate: any, type: 'days' | 'months' | 'years'). You can use it in expressions to calculate the difference between two date fields in days (default), months, or years.

Example: expression: "dateDiff({firstDate}, {secondDate}, 'years')"

Form Library

• Support sticky positioning for the Table of Contents and do not scroll it with the main survey content (#7033)
• Support sub-menus in popup elements (#8129)
• File Upload - Update the position of a file delete button (#8121)
• [Knockout] Texts for carry forward choices are not changed immediately on changing survey locale (#8367)
• Pattern Input Mask (9999) doesn't allow entering values when textUpdateMode is set to "onTyping" (#8326)
• Yes/No question shows Yes/Yes when the swap option is enabled (#8346)
• [Vue 3] A Form contains a duplicate header when applying a custom theme (#8332)
• Boolean question appears incorrectly when it shares the value with a Radio Button Group question (#8333)
• Invalid progress bar layout with default theme within a Bootstrap 5-based project (#8298)
• Do not expand panels on validation if they do not contain errors (#8341)
• Multi-Select Matrix: Cell values are not updated when using defaultValueExpression (#8339)
• Multi-Select Matrix: A checkbox column with showInMultipleColumns: true produces an incorrect response (#8348)
• The useDisplayValuesInDynamicTexts property doesn't work for a Dynamic Panel's title bound to a checkbox item (#8361)
• Radio Button Group: Selecting the "Other" item produces an error if checkErrorsMode is "onValueChanged" (#8369)

Survey Creator

• An empty page placeholder and page adorners are unavailable in strict mode (#5523)
• Reordering / Dragging of ranking questions in logic builder has poor placement #5545

npm i survey-core@1.11.1 survey-angular-ui@1.11.1 --save
npm i survey-creator-core@1.11.1 survey-creator-angular@1.11.1 --save
npm i survey-analytics@1.11.1 --save
npm i survey-pdf@1.11.1 --save

npm i survey-core@1.11.1 survey-react-ui@1.11.1 --save
npm i survey-creator-core@1.11.1 survey-creator-react@1.11.1 --save
npm i survey-analytics@1.11.1 --save
npm i survey-pdf@1.11.1 --save

npm i survey-core@1.11.1 survey-vue3-ui@1.11.1 --save
npm i survey-creator-core@1.11.1 survey-creator-vue@1.11.1 --save
npm i survey-analytics@1.11.1 --save
npm i survey-pdf@1.11.1 --save

npm i survey-core@1.11.1 survey-vue-ui@1.11.1 --save
npm i survey-creator-core@1.11.1 survey-creator-knockout@1.11.1 --save
npm i survey-analytics@1.11.1 --save
npm i survey-pdf@1.11.1 --save

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

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

<link href="https://unpkg.com/survey-analytics@1.11.1/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@1.11.1/survey.analytics.min.js"></script>

<script src="https://unpkg.com/survey-pdf@1.11.1/survey.pdf.min.js"></script>