Integrate the Entire Survey Life-cycle into Your Web Application

You can use SurveyJS as a regular end-user product — a separate cloud-based solution with complete survey life-cycle management. You can also take any part of SurveyJS and make it yours — integrate our UI widgets into your site, make our engine work with your custom storage, or communicate with our back-end via API. To demonstrate what’s possible with SurveyJS, we’ve created demos for three popular web development platforms — ASP.NET Core, PHP and Node.js. The apps show how you can embed any part of survey management — from data management and builder UI to execution and result analysis — into your own website. Each demo has a link to its GitHub repository too, so you can check out the sources. ASP.NET Core Demo Node.js Demo PHP Demo Those integration features set SurveyJS apart from other products. You can tailor a solution for any requirements by simply putting the pieces together in a way that benefits your application the most. Before I cover the integration basics for each part of SurveyJS, I’ll quickly go over the three most common integration strategies and their respective benefits. While the first two are common enough, the last one is where SurveyJS is unrivaled. Integration Level Zero: All in the Cloud No integration happens at this level — everything from survey creation and execution to data analysis happens on a third party site. This scenario is so straightforward that the diagram only serves to introduce the building blocks of any survey system. : Benefits Zero integration effort / suits users with no programming experience. Works well with email campaigns. This model naturally assumes monthly or annual billing cycles, but SurveyJS so far remains completely free to use in this scenario. Integration Level One: Front-End (Runner) In this scenario, the parts of the survey visible to end-users are integrated into your application. In other words, the users never have to leave your website and the UI is consistent throughout. Normally, you also get some sort of data access API. Benefits: You can use a Survey Library beyond the usual purposes of a questionnaire or a quiz. For example, you can build an order form. Complete customization to match your website’s visual appearance. No unexpected changes when a new service version rolls out. Capability to restrict execution based on your website’s login details. SurveyJS fully supports this level of integration and remains free to use. Integration Level Two: Back-End (Data Source and Builder UI) This is the integration level few products are capable of delivering. It allows you to manage any part of survey life-cycle within your application. You can store data in a database of your choice, you can customize the survey builder and embed it into your own website, you can communicate with the back-end via API, and so on. (I replaced the “ANALYSIS UI” block with “RESPONSE VIEWER”, since we haven’t yet implemented full-scale data analysis dashboard for SurveyJS. You can still access results and build your own UI, as I show in a simple example later in the article) Benefits: You can let your employees design surveys using your custom Builder UI. In the modified builder, you can add new question types, remove unnecessary options, and so on. You can use data from your own sources to construct questions. You can store data on your own servers, using the database management system of your choice. We’ve come to the only part of SurveyJS that currently requires a paid license. To integrate Survey Builder UI into a commercial application, you’ll need to purchase the library. It remains free for non-commercial use. Now that I’m done listing you can integrate, let’s proceed to . what how Integrate the Front-end: Survey Runner We covered Survey Runner’s capabilities at length in our previous articles: and . Our website also contains on how to create and integrate a Runner when working with different client platforms: Angular 2+, jQuery, Knockout, React, and Vue.js. Meet SurveyJS SurveyJS is out of Beta tons of examples Even if you’re working with a custom-built survey storage, the workflow is straightforward: Load survey definition in JSON format from your storage. Use it to create the Survey Runner JavaScript object (as shown in our examples). On completing the survey, save the JSON with results into your storage. Integrate the Back-end: Survey Editor The simplest implementation of Survey back-end will have the following elements: A page with the list of surveys. The capability to create or remove entries. Build/edit surveys using an integrated Editor UI. Review and analyze survey results. Security system enabling roles and permissions. There is nothing complicated about displaying and managing a list of survey objects. The most interesting task is integrating the Survey Builder/Editor. As any other survey service, we’ve implemented our own End-User Builder UI. Unlike other providers, we allow you to obtain this Editor UI as a widget, customize it, and integrate it into your own website, as shown in this . Integrated Survey Editor Example Integrated SurveyJS Editor The basic code required for such integration is shown below. It loads and saves survey definition using a local storage. Review our to see this code in action. Plunker example var storageName = "TestSurvey"; // Create a Survey Editor with default optionsvar editorOptions = { };editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions); // Enable state indication (Saving, Loading, etc) in the toolbareditor.showState = true; // Call saveSurveyFunc automatically on changes// Otherwise a user will need to manually click "Save"editor.isAutoSave = true; // A callback function invoked when you must save changeseditor.saveSurveyFunc = function(saveNo, callback) {window.localStorage.setItem(storageName, editor.text);!!callback && callback(saveNo, true);}; // Load the survey definition from storageeditor.text = window.localStorage.getItem(storageName) || ""; A few details about this code: To definition from database, simply assign survey JSON to the editor’s property, as shown in the last line. load the survey text To into database, write code in the callback function. The parameter helps with asynchronous data loading/saving operations. If a request with comes to your server after you have already processed , you know that it’s not the most recent version and you should ignore it. save the survey definition saveSurveyFunc saveNo saveNo=47 saveNo=48 The callback function tells the Editor whether the operation has succeeded or failed, as specified by the Boolean parameter. When you report a success, the editor updates its state from “Saving…” to “Saved”. #saveNo In most scenarios, you will also want to customize SurveyJS Editor. Detailed instructions on how to do that are better left for a separate article, and we’re already working on it. Here I will only highlight the main customization capabilities. Localize any string, including property names. Hide three tabs on the top (JSON Editor, Test Survey, Embed Survey). Hide Property Grid on the right. Remove any question type from the Question Toolbox and add custom Question types. Add or remove properties, change their position in the Property Grid or in modal dialogs. Register new or override current property editors. Remove/add items in the question context menu (“Add to toolbox”, “Copy”, etc.) Disable drag & drop and other operations for all elements or a particular element. Integrate into the JSON Editor tab and instead of standard dropdown widget . Ace editor Select2 To see these and other features in action, take a look at . our examples Integrate the Back-end: View Results Building a result list is a trivial task. You can easily obtain the dates, time stamps, user information, and everything else you need. Once you’re done with the list, you’ll need to display individual results and that’s where we can help. Survey responses are stored in JSON format, which you’ll need to parse to display the results in a table, as way we do it in our . This can be easily done, as shown by the myriad of samples on the web for any server/client platform. SurveyJS.io Service As an alternative, you can show results as a read-only survey with responses already filled in. To do that, you’ll only need two lines of code. survey.data = JSON.parse(yourJSONResultAsText);survey.mode = "display"; To instruct the viewer to show all questions on one page, add the following line: survey.isSinglePage = true; Review the following JSFiddle to better understand what we are talking about. Results Page Example Integrate the Back-end: Data Storage If you’re planning to store data on your end, then you must create at least the following two tables with a one-to-many relationship. Survey Service Tables The JSON fields are where you store your survey definitions and results. You can feed those database values directly to the Survey Runner or Editor and the results produced by them also go directly into the database, without the need for any conversion or complicated database structure. On top of all that, you may want to add security roles for your back-end users, keep data logs, and so on. SurveyJS doesn’t provide those features, since we assume that if you want that level of control and integration, then chances are you already have those systems in place in your application. Of course you don’t have to use a custom storage and can easily take advantage of , which is still free to use for anyone. And even with our storage, you can have control over data from your application’s UI: our service allows to create, edit, view, and delete surveys, as well as obtain survey results. Private API allows you to post survey results from your app into our storage. Public API Learn More about SurveyJS includes three products: SurveyJS A that enables you to run surveys on your websites (open-source and free). JavaScript library A that allows you to create and store surveys, download and analyze their results (currently free for use). cloud service An embeddable UI (free non-commercial and paid commercial-use licenses are available). JavaScript-based survey editor