SurveyJS v1.10.5
Released: May 21, 2024
SurveyJS v1.10.5 introduces server-side data pagination, filtering, and sorting for Table View in Dashboard. Bug fixes and minor enhancements are included as well.
Dashboard: Server-Side Data Pagination, Filtering, and Sorting for Table View
In SurveyJS Dashboard, Table View displays unaggregated user responses in a table and allows viewers to export the responses as a PDF, CSV, or XLSX document. Previously, Table View could paginate, filter, and sort data only on the client side. This meant that all user responses were loaded from a storage in one batch and processed in the user's browser, demanding fast web connection and higher computing power.
SurveyJS v1.10.5 introduces an API that enables you to delegate data pagination, filtering, and sorting to a web server. This API is a function that you pass to the Tabulator
constructor when you instantiate Table View. This function accepts an object with the following properties:
offset
:number
The number of records to skip from the beginning of the dataset. Used to implement data pagination.limit
:number
The number of records to load in the current batch. Used to implement data pagination.filter
:Array<{ field: string, type: string, value: any }>
Filter conditions that should be applied to the dataset. Refer to the Tabulator documentation for information on available filters.sort
:{ field: string, direction: undefined | "asc" | "desc" }
Sort order settings that should be applied to the dataset.callback
:(response: { data: Array<Object>, totalCount: number, error?: any }) => void })
A callback used to return the processed dataset. Instead of using the callback, you can use a Promise, as shown below.
Send the offset
, limit
, filter
, and sort
property values to the server, apply them to the dataset, and send the processed dataset back to the client in an object with the following structure: { data: Array<Object>, totalCount: number, error?: any }
. Note that your server must support data pagination, filtering, and sorting for this feature to work.
The following code shows how to implement the data loading function using a Promise and using a callback:
// ...
import { Model } from "survey-core";
import { Tabulator } from "survey-analytics/survey.analytics.tabulator";
const surveyJson = { ... };
const survey = new Model(surveyJson);
// Loads a processed dataset, returns it using a Promise
function getProcessedData ({ offset, limit, filter, sort }) {
const url = "http://www.example.com/";
const reqBody = { offset, limit, filter, sort };
return fetch(url, { body: reqBody });
}
// Loads a processed dataset, returns it using a callback
function getProcessedData ({ offset, limit, filter, sort, callback }) {
const url = "http://www.example.com/";
const reqBody = { offset, limit, filter, sort };
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send(JSON.stringify(reqBody));
xhr.onload = () => {
if (xhr.status !== 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
callback(xhr.response);
}
};
}
const tabulator = new Tabulator(survey, getProcessedData);
tabulator.render("tabulatorContainer");
New and Updated Demos
Bug Fixes and Minor Enhancements
Form Library
- Dynamic Matrix: The
keyName
property doesn't work for questions in the detail section (#8288) - NextJS: Warnings are thrown when survey elements adapt to smaller screen sizes (#8254)
SurveyModel
'sonValueChanging
event is not raised when updating a comment value (#8292)
Survey Creator
- The "Choices are copied from <question>" message isn't updated after the
choicesFromQuestion
property is changed (#5495) - The Delete adorner disappears for a choice option when its value is set to 0 (#5500)
- The "JSON Editor" tab caption is untranslated (#5503)
- [Mobile] An error occurs when using drag and drop (#5466)
- The "Choices" table allows specifying duplicate values if the "Value" field is moved to the edit form (#5506)
How to Update SurveyJS Libraries in Your Application
Angular
npm i survey-core@1.10.5 survey-angular-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-angular@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save
React
npm i survey-core@1.10.5 survey-react-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-react@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save
Vue 3
npm i survey-core@1.10.5 survey-vue3-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-vue@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save
Vue 2
npm i survey-core@1.10.5 survey-vue-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-knockout@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save
Knockout / jQuery
<link href="https://unpkg.com/survey-core@1.10.5/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@1.10.5/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-knockout-ui@1.10.5/survey-knockout-ui.min.js"></script>
<link href="https://unpkg.com/survey-creator-core@1.10.5/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@1.10.5/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-knockout@1.10.5/survey-creator-knockout.min.js"></script>
<link href="https://unpkg.com/survey-analytics@1.10.5/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@1.10.5/survey.analytics.min.js"></script>
<script src="https://unpkg.com/survey-pdf@1.10.5/survey.pdf.min.js"></script>