SurveyJS v1.11.12
Released: August 20, 2024
SurveyJS v1.11.12 introduces framework-agnostic, Knockout-free UI rendering bundles for vanilla JavaScript applications and integration with any front-end frameworks and an API event that allows you to perform actions when users close a pop-up survey.
Knockout-Free UI Rendering Bundles
Knockout is a JavaScript library that implements the Model-View-ViewModel pattern. Introduced in 2010, Knockout was very popular at the time, but with the advent of front-end frameworks, its popularity declined. In 2022, SurveyJS got rid of Knockout in Angular, React, and Vue integrations. Now, we release universal, framework-agnostic, Knockout-free UI rendering bundles: survey-js-ui and survey-creator-js. You can use them in any JavaScript application (including those powered by jQuery) or integrate into any framework that SurveyJS doesn't support yet. These bundles are built upon and include a fast and tiny Preact library.
To migrate to the new bundles, simply replace the old scripts with the new ones:
Form Library
<!-- Old bundles -->
<script src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
<script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
<!-- New bundle -->
<script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
Survey Creator
<!-- Old bundles -->
<script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
<script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>
<!-- New bundles -->
<script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
<script src="https://unpkg.com/survey-creator-js/survey-creator-js.min.js"></script>
If you've been using Knockout or jQuery in your application only for SurveyJS, you can safely remove them now since the new bundles do not depend on these libraries.
Refer to the following tutorials to get started with the new bundles in a vanilla JavaScript application:
Add a Survey to a JavaScript Application
Add Survey Creator / Form Builder to a JavaScript Application
Handle Closing a Pop-Up Survey
This release implements an onClose event that you can handle to perform actions when users close a pop-up survey window. The following code shows how to handle this event:
Angular
<popup-survey [model]="survey" [onClose]="handleClose"></popup-survey>
// ...
@Component({
// ...
})
export class SurveyComponent implements OnInit {
model: Model;
ngOnInit() {
const survey = new Model(json);
this.model = survey;
}
handleClose (e) {
console.log("Pop-up survey is closed");
}
}
Vue
<script setup lang="ts">
// ...
const survey = new Model(json);
const handleClose = (e) => {
console.log("Pop-up survey is closed");
}
return { survey, handleClose };
</script>
<template>
<popup-survey :survey="survey" :onClose="handleClose" />
</template>
React
// ...
function SurveyComponent() {
const survey = new Model(json);
const handleClose = (e) => {
console.log("Pop-up survey is closed");
}
return (<PopupSurvey model={survey} onClose={handleClose} />);
}
jQuery
const handleClose = (e) => {
console.log("Pop-up survey is closed");
}
$(function() {
$("#surveyContainer").PopupSurvey({ model: survey, onClose: handleClose });
});
Bug Fixes and Minor Enhancements
Form Library
- Multi-Select Matrix: A column doesn't display choices inherited from the parent matrix after deleting all the column's choices (#8691)
- JSON schemas: An empty object in an array causes an unhandled exception (#8702)
- Multi-Select Matrix: Binding a question in a detail panel to a question in a row doesn't work (#8697)
Survey Creator
- A custom drop-down property cuts the text up until a dot symbol in choice options (#5787)
Dashboard
DataTables.tableDatais no longer accessible (#457)
How to Update SurveyJS Libraries in Your Application
Angular
npm i survey-core@1.11.12 survey-angular-ui@1.11.12 --save
npm i survey-creator-core@1.11.12 survey-creator-angular@1.11.12 --save
npm i survey-analytics@1.11.12 --save
npm i survey-pdf@1.11.12 --save
React
npm i survey-core@1.11.12 survey-react-ui@1.11.12 --save
npm i survey-creator-core@1.11.12 survey-creator-react@1.11.12 --save
npm i survey-analytics@1.11.12 --save
npm i survey-pdf@1.11.12 --save
Vue 3
npm i survey-core@1.11.12 survey-vue3-ui@1.11.12 --save
npm i survey-creator-core@1.11.12 survey-creator-vue@1.11.12 --save
npm i survey-analytics@1.11.12 --save
npm i survey-pdf@1.11.12 --save
Vue 2
npm i survey-core@1.11.12 survey-vue-ui@1.11.12 --save
npm i survey-creator-core@1.11.12 survey-creator-knockout@1.11.12 --save
npm i survey-analytics@1.11.12 --save
npm i survey-pdf@1.11.12 --save
HTML/CSS/JavaScript
<link href="https://unpkg.com/survey-core@1.11.12/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@1.11.12/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-js-ui@1.11.12/survey-js-ui.min.js"></script>
<link href="https://unpkg.com/survey-creator-core@1.11.12/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@1.11.12/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-js@1.11.12/survey-creator-js.min.js"></script>
<link href="https://unpkg.com/survey-analytics@1.11.12/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@1.11.12/survey.analytics.min.js"></script>
<script src="https://unpkg.com/survey-pdf@1.11.12/survey.pdf.min.js"></script>