SurveyJS v1.9.132
Released: February 27, 2024
SurveyJS v1.9.132 introduces an API to customize the Property Grid in Theme Editor and features minor enhancements and bug fixes.
Theme Editor: Property Grid Customization API
Theme Editor v1.9.132 introduces an onPropertyGridSurveyCreated
event, which allows you to customize the Property Grid. In the following code example, this event is used to create an independent editor for matrix title font settings and separate it from the question title font editor. To implement this, you need to first create two custom editors that edit different CSS variables and then remove the built-in editor:
import { SurveyCreatorModel } from "survey-creator-core";
import { Serializer } from "survey-core";
const creatorOptions = { ... };
const creator = new SurveyCreatorModel(creatorOptions);
creator.themeEditor.onPropertyGridSurveyCreated.add((_, { survey, model }) => {
// Get the default question title font editor. We will reuse it both new custom editors.
const defaultEditor = survey.findQuestionByName("questionTitle").defaultValue;
// Create a custom substitute class for question title font settings
// The `name` property value will be used in the names of the CSS variables
const questionFontSettings = Serializer.createClass("fontsettings", { name: "custom-question-title" });
model.addPropertyGridEditor({ element: questionFontSettings, insertBefore: "questionTitle" });
questionFontSettings.title = "Question title font";
questionFontSettings.value = defaultEditor;
// Create a custom class for matrix font settings
const matrixFontSettings = Serializer.createClass("fontsettings", { name: "matrix-title" });
model.addPropertyGridEditor({ element: matrixFontSettings, insertAfter: "questionTitle" });
matrixFontSettings.title = "Matrix title font";
matrixFontSettings.value = defaultEditor;
// Remove the built-in question title font editor from the Property Grid
model.removePropertyGridEditor("questionTitle");
});
Now that the custom editors edit new CSS variables, you need to use these variables in the CSS rules applied to matrix and question headers, as shown in the following code listing. Note that the variable names include the name
property values from the code example above. In addition, each variable declaration lists fallbacks that apply if the variable is unspecified.
.sd-table__cell--header,
.sd-matrix__cell:first-of-type {
color: var(--sjs-font-matrix-title-color, var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, #161616)));
font-family: var(--sjs-font-matrix-title-family, var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family))));
font-size: var(--sjs-font-matrix-title-size, var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px)));
font-weight: var(--sjs-font-matrix-title-weight, var(--sjs-font-questiontitle-weight, 600));
}
.sd-title.sd-element__title {
color: var(--sjs-font-custom-question-title-color, var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, #161616)));
font-family: var(--sjs-font-custom-question-title-family, var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family))));
font-size: var(--sjs-font-custom-question-title-size, var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px)));
font-weight: var(--sjs-font-custom-question-title-weight, var(--sjs-font-questiontitle-weight, 600));
}
New Blog Post
New Help Topics
End-User Guide: Prevent Duplicate Form Submissions from the Same User
New Demos
Columnize Choices of a Matrix Cell
Matrix Rows with Expandable Details Sections
Survey Creator: Add Custom Fonts
Bug Fixes and Minor Enhancements
Form Library
- Screen readers do not announce question descriptions (#7881)
- Multi-Select Matrix:
alternateRows
applies incorrectly to a column withshowInMultipleColumns: true
(#7890) - Choices with long text overflow the question box in static survey width mode (#7871)
- Composite components:
setValueIf
andsetValueExpression
do not support thecomposite
prefix (#7888) - Single-Select Matrix in Modern theme: Rows are highlighted with red when selecting an option (#7889)
Survey Creator
- Drop-down menus do not close on second click (#5219)
- [Knockout] Translation tab throws a warning: An attempt to set a property "isEmpty" of a disposed object "translation" (#5232)
- The
categoryIndex
property doesn't work for custom property grid categories (#5265) - Survey Creator appears incorrectly when a parent container's height is unspecified (#5225)
- Translation: Default panel title is exported incorrectly (#5236)
- Toolbox disappears if you dynamically change the visibility of Survey Creator (#5243)
Dashboard
- The
onStateChanged
event is not raised for a Text question visualizer (Text in table/Wordcloud) and Gauge/Histogram visualizers (#397)
PDF Generator