Released: January 28, 2025

SurveyJS v1.12.21 introduces support for conditional visibility of Rating Scale items, a new onDynamicPanelValueChanging event in Form Library, and bug fixes in Survey Creator.

With this release, you can set conditional visibility rules for Rating Scale items. To conditionally show a rating scale item, specify the visibleIf expression within a rate item configuration object.

The following example demonstrates how to use conditional visibility in a Rating Scale, allowing respondents to select their preferred minimum and maximum number of rooms in an apartment:

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "minRooms",
          "title": "What is the minimum number of rooms you require in an apartment for rent?",
          "isRequired": true,
          "autoGenerate": false,
          "rateCount": 6,
          "rateValues": [
            { "value": "0", "text": "Studio" },
            1, 2, 3, 4,
            { "value": 5, "text": "5+" }
          ]
        },
        {
          "type": "rating",
          "name": "maxRooms",
          "visibleIf": "{minRooms} notempty and {minRooms} < 5",
          "title": "What is the maximum number of rooms you would like in an apartment for rent?",
          "isRequired": true,
          "autoGenerate": false,
          "rateCount": 6,
          "rateValues": [
            {
              "value": "0",
              "text": "Studio",
              "visibleIf": "{minRooms} = 0"
            },
            {
              "value": 1,
              "visibleIf": "{minRooms} <= 1"
            },
            {
              "value": 2,
              "visibleIf": "{minRooms} <= 2"
            },
            {
              "value": 3,
              "visibleIf": "{minRooms} <= 3"
            },
            {
              "value": 4,
              "visibleIf": "{minRooms} <= 4"
            },
            {
              "value": 5,
              "text": "5+"
            }
          ]
        }
      ]
    }
  ]
}

View Demo

This release adds a new onDynamicPanelValueChanging event to the Form Library API. Its options argument contains the old and new values of a modified field within a Dynamic Panel and allows you to retrieve the old value or modify the new value if needed.

Survey Creator

• The Cannot read properties of undefined (reading 'id') exception is thrown when implementing the survey.onAfterRenderQuestionInput function (#9349)
• A question with name "0" doesn't appear correctly within a condition editor (#6430)
• Page title and description placeholders and question adorner texts are not updated when changing creator.locale at runtime (#6441)

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

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

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

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

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

<script src="https://unpkg.com/survey-core@1.12.21/themes/index.min.js"></script>

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

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

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