Released: September 17, 2024

SurveyJS v1.12.2 supports local component registration in Vue 3 applications, implements conditional visibility for rows and columns in Dynamic Matrices, adds case sensitivity API for regular expressions used in data validation, and includes other enhancements and bug fixes.

Previously, SurveyJS Form Library and Survey Creator had to be registered as plugins within the main.ts file of a Vue 3 application. This made them available application-wide, which meant that they were loaded at the application startup. In this release, we implemented support for local registration of SurveyJS components. Simply import SurveyComponent for Form Library or SurveyCreatorComponent for Survey Creator within the Vue components that render them and remove the plugin registration from the main.ts file. With this configuration, the SurveyJS components are loaded only when their Vue components are loaded. The following examples show updated code for the Vue components:

<!-- components/Survey.vue -->
<script setup lang="ts">
import "survey-core/defaultV2.min.css";
import { Model } from "survey-core";
import { SurveyComponent } from "survey-vue3-ui";

const surveyJson = {
  // ...
};
const survey = new Model(surveyJson);
</script>

<template>
  <SurveyComponent :model="survey" />
</template>

<!-- components/SurveyCreator.vue -->
<script setup lang="ts">
import "survey-core/defaultV2.min.css";
import "survey-creator-core/survey-creator-core.min.css";

import type { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorModel } from "survey-creator-core";
import { SurveyCreatorComponent } from "survey-creator-vue";

const creatorOptions: ICreatorOptions = {
  // ...
};
const creator = new SurveyCreatorModel(creatorOptions);
</script>

<template>
  <SurveyCreatorComponent :model="creator" />
</template>

Global component registration is continued to be supported.

Dynamic Matrix now supports the columnsVisibleIf and rowsVisibleIf properties that allow you to show and hide matrix rows and columns based on certain criteria. Assign Boolean expressions to these properties to specify the required conditions. With these properties, you can create filtered matrices. For example, the following code defines two Dynamic Matrices, one of which contains information about people and can be edited, while the other filters the information using the rowsVisibleIf property and displays only adults.

const surveyJson = {
  "elements": [
    {
      "type": "matrixdynamic",
      "name": "residents",
      "title": "Residents",
      "columns": [
        {
          "name": "first-name",
          "title": "First name"
        },
        {
          "name": "last-name",
          "title": "Last name"
        },
        {
          "name": "birthdate",
          "title": "Birthdate",
          "inputType": "date"
        },
        {
          "name": "apt",
          "title": "Apt. #",
          "width": "30px",
          "inputType": "number",
          "min": 0
        }
      ],
      "cellType": "text"
    },
    {
      "type": "matrixdynamic",
      "name": "adults",
      "title": "Adult residents",
      "valueName": "residents",
      "readOnly": true,
      "rowsVisibleIf": "age({row.birthdate}) >= 21",
      "columns": [
        {
          "name": "first-name",
          "title": "First name"
        },
        {
          "name": "last-name",
          "title": "Last name"
        },
        {
          "name": "birthdate",
          "title": "Birthdate",
          "inputType": "date"
        },
        {
          "name": "apt",
          "title": "Apt. #",
          "width": "30px",
          "inputType": "number",
          "min": 0
        }
      ],
      "cellType": "text"
    }
  ]
}

View Example

Regular expressions enable survey authors to implement complex data validation logic within their forms. If your regular expressions include letters, you can now specify whether their uppercase and lowercase variants should be treated as distinct or equivalent when validating values. Use the caseInsensitive property to control this feature:

const surveyJson = {
  "elements": [{
    "name": "url",
    "type": "text",
    // ...
    "validators": [{
      "type": "regex",
      // ...
      "caseInsensitive": true // Ignore letter case
    }]
  }]
}

Conditional Read-Only State

Skip Logic

Dynamically Set and Reset Question Values

Conditionally Display Choice Options

Form Library

• The autoGrowComment property doesn't apply to the Other choice option in select-based questions (#8571)
• Multi-Select Matrix doesn't hide columns based on a condition (#8796)
• A Dynamic Matrix within a Dynamic Panel copies a value of another Dynamic Matrix from the same Dynamic Panel (#8799)
• An email validation error message uses a default locale rather than the current survey locale (#8805)

Survey Creator

• Design surface: Scroll bar doesn't respond to any actions (#5881)
• A page number is duplicated when clicking within and then outside an in-place page title editor (#5864)
• Survey Creator allows defining choice options with duplicate values (#5891)
• Property Grid: Category labels are misaligned in RTL languages (#5893)
• Multi-Select Matrix: A column's showOtherItem and showNoneItem settings are not updated in Property Grid after removing them on a design surface (#5879)

Dashboard

• An error is thrown on an attempt to programmatically enable the bar chart for Boolean questions (#476)

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

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

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

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

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

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

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

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

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