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 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));
}

HTML Form Builder

End-User Guide: Prevent Duplicate Form Submissions from the Same User

Columnize Choices of a Matrix Cell

Matrix Rows with Expandable Details Sections

Survey Creator: Add Custom Fonts

Form Library

• Screen readers do not announce question descriptions (#7881)
• Multi-Select Matrix: alternateRows applies incorrectly to a column with showInMultipleColumns: true (#7890)
• Choices with long text overflow the question box in static survey width mode (#7871)
• Composite components: setValueIf and setValueExpression do not support the composite 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

• PDF generation fails if HTML contains invalid markup (#287)
• Node.js throws an error when a survey contains an HTML question (#266)