Released: December 19, 2023

SurveyJS v1.9.122 adds a capability to align the minimum and maximum rate value descriptions in Rating Scale questions, a Dynamic Panel API that allows you to specify a position for a new panel, and an event to get notified when users switch between panels in Dynamic Panel.

In a Rating Scale question, the minimum and maximum rate values can have descriptions specified by the minRateDescription and maxRateDescription properties. Previously, these descriptions could only be positioned on the sides of all rate values. The new release adds a rateDescriptionLocation property that allows you to specify different alignments for the descriptions.

const surveyJson = {
  "elements": [{
    "type": "rating",
    "name": "satisfaction-score",
    "title": "How satisfied are you with our product?",
    "minRateDescription": "Not satisfied",
    "maxRateDescription": "Completely satisfied",
    "rateDescriptionLocation": "leftRight" // or "top" | "bottom" | "topBottom"
  }]
}

View CodeSandbox

Dynamic Panel allows you to add panels programmatically using the addPanel() method. Previously, this method always added new panels to the end of the panels array. Since SurveyJS v1.9.122, you can specify a desired index for the new panel:

const survey = new Model(surveyJson);
const dynamicPanel = survey.getQuestionByName("my-dynamic-panel");

// Add a new panel to the beginning of the `panels` array
dynamicPanel.addPanel(0);

// Add a new panel to the end of the `panels` array
dynamicPanel.addPanel(-1);

// Add a new panel to the end of the `panels` array or insert it after the current panel if `renderMode` is `"tab"`
dynamicPanel.addPanel();

The latest SurveyJS release adds a new event for Dynamic Panel—onDynamicPanelCurrentIndexChanged. Handle this event if you need to perform actions when users switch the current panel:

const survey = new Model(surveyJson);
survey.onDynamicPanelCurrentIndexChanged.add((_, options) => {
  const question = options.question; // A Dynamic Panel for which the event is raised.
  const panel = options.panel; // A panel that has become current
  const visiblePanelIndex = options.visiblePanelIndex; // The panel's index in the `visiblePanels` array
  // ...
});

How to connect data within a form or survey

Integrate a Third-Party Rich Content Editor into Survey Creator

Form Library

• Timer doesn't stop at 0 when a survey has validation errors (#7507)
• A specialized question's value is reset to the default value in preview (#7508)
• Pop-up survey: The allowClose property doesn't show the "Close" button (#7530)
• Pop-up survey: The "Minimize" and "Close" buttons have an incorrect order (#7506)
• Specialized components: Localized strings from nested questions are not included into used locales (#7510)

Survey Creator

• An exception is thrown on an attempt to open the Themes tab after assigning a custom theme to the creator.theme property (#4972)
• [React] undefined appears within elements with the svc-toolbox__tool class (#4992)
• Page navigation doesn't work when the scrollbar is hidden (#4672)
• A specialized question's properties can be edited while they should be read-only (#4985)
• Diacritics appear incorrectly in the Designer tab (#4949)
• maxNestedPanels: 0 is ignored if a panel doesn't contain any elements (#4979)