SurveyJS: What’s new in Survey and Form Builder libraries (first half of 2018)

It’s been half a year since we published version 1.0 of our Survey Library and Form Builder. During the last six months we implemented popular customer scenarios, worked on simpler experience for non-technical users, and on Form Builder’s usability. This article summarizes all these enhancements.

If you are new to SurveyJS, you may also want to check out our website or review our previous articles, including Meet SurveyJS and SurveyJS is out of Beta.

Dynamically filter choices, columns and rows

Lots of surveys have some sort of conditional logic and we did allow to filter out questions, or panels with multiple questions, based on a specified condition. Our customers asked us for yet another level of control — in fact that was the most popular request of the last few month. You can now control which answer options are visible based on previous choices in the survey.

Method #1: Specify Visibility Conditions for Individual Options

Take a look at the following example. Two communication channel options — Text Messages and WhatsApp — appear only if a phone number has been entered in a previous question.

Filter individual choice items

This behavior can now be enabled without having to write code. We’ve introduced the “visibleIf” property for answer choices and you’ll find the following lines in JSON above:

choices: ["Email",{ value: "Text Messages", visibleIf: "{phone} notempty"},{ value: "WhatsApp", visibleIf: "{phone} notempty"}]

Method #2: Display Options Selected in Previous Questions

Questions in this example progressively filter out browsers based on user answers.

Filter item choices

Here’s the logic breakdown.

1. Display the complete browser list.

name: "installed",choices: ["Chrome", "MS Edge", "FireFox", "Internet Explorer", "Safari", "Opera"]

2. Display only browsers checked in the previous question.

name: "default",**choicesVisibleIf: "{installed} contains {item}",**choices: ["Chrome", "MS Edge", "FireFox", "Internet Explorer", "Safari", "Opera"]

SurveyJS iterates all “choices” and substitutes each as an “{item}” into “choicesVisibleIf”. Only choices that make the expression true will appear on the list.

3. Display browsers checked in #1, exclude browser that matches #2.

name: "secondChoice",choicesVisibleIf: "{installed} contains {item} and {item} != {default}",choices: ["Chrome", "MS Edge", "FireFox", "Internet Explorer", "Safari", "Opera"]

Dynamic Text Support in Answer Options

SurveyJS allows you to use “Mail Merge” style dynamic strings that include variable placeholders, like this:

"{user_display_name}, could you please confirm your e-mail:"

The new version extends support for such formatting beyond question titles. You can now use it in answer options, matrix columns, rows headers and so on — just like our customers have been asking us.

JSFiddle below shows an example.

The processing in checkbox choices

Rotate a Matrix

If your matrix question has lots of columns and just a few rows, you now have the option to rotate the display and thus use screen real estate more efficiently. This maybe be particularly handy on smaller devices.

To switch columns and rows, use the columnLayout property. You can find it in Matrix, Matrix Dropdown and Matrix Dynamic question types.

Take a look at an example in our documentation.

Default values for new entries in Matrix Dynamic and Panel Dynamic

If you want to start a survey with pre-defined answers already filled in, use the “defaultValue**”** property that has been around for while now.

If you’re using Matrix Dynamic or Panel Dynamic questions, that property will take care of your initial entries, but end-users may create additional rows and panels. This is where we used to ask you to handle events and write custom code. In the latest version, we’ve added defaultRowValues and defaultPanelValues properties so you can easily specify selections for dynamically added rows and panels, if they need to be the same for each new entry. Set these property values in JSON or in our designer dialog.

Custom cell types in Matrix Dynamic and Matrix Dropdown

We’re removing limitations on the type of cells you can use in Matrix Dynamic and Matrix Dropdown. If previously you could only use Text, Dropdown, Radio Group, Checkbox and a few others, now you can embed any SurveyJS question type OR a custom widget.

The following example demonstrates a matrix with star rating cells.

Star rating in matrix cells

To learn how to setup a new cell type and register its properties in the Form Builder, take a look at this example.

New Question Type: Rubric Matrix

The Rubric Matrix is similar to the standard Matrix, but displays cells with in-place description instead of radio buttons. Use the Cells property to setup the text for each cell.

Check Out a Rubric Matrix Example

Question Titles: Hide or Change Location

Use the new “titleLocation” property in question object to display the title on the left, above, below the question or hide it from view. Set the value to “default” for centralized control using question container (Panel or Page) settings.

File Question: Support for Multiple File Upload and File Type Filter

We’ve added a couple of useful properties to the File question.

allowMultiple

If set to true, end-users will be able to upload multiple files using a single File question.

acceptedTypes

Allows you to restrict file types. The default value is an empty string and that allows any type. For detailed information on available property values, see HTML input’s “accept” attribute specification. For example, if you want allow PDF files only, set acceptedTypes to “.pdf”.

Usability Improvements in Form Builder

Here are just a few major changes to the Form Builder:

• In-place editing — user can change question title and items directly on the Form Builder surface.
• Support for multiple themes — you can now choose one of the predefined themes or construct a custom theme manually.
• Customizable item editor
• Accordion with collapsible sections in popup editor — enables better structure in settings display
• New expression wizard — helps users build “visibleIf” and “enableIf” expressions
• Improved page editor — simplifies how you work with multi-page surveys
• Categorized toolbox — you can now group toolbox items

See SurveyJS: Improved Form Builder Usability article for additional details.

Integration Examples

In our continuous effort to enable the smoothest possible integration path for SurveyJS library into your website engine of choice, we have created live samples demonstrating how you can integrate SurveyJS into a few popular backends — PHP, NodeJS and ASP.NET MVC Core.