Last year, the SurveyJS Team has released a major update of the Survey Creator component for all supported platforms, including Angular. In addition to a refined UI and new features, this update brought significant changes in the architecture. Survey Creator for Angular no longer depends on non-Angular JavaScript widgets; it is now a composition of true Angular components. This article shows how to integrate the new Survey Creator into your Angular app.
We will implement a simple application that displays a list of surveys stored in a database. Users can create new surveys and edit/delete existing surveys.
Task 1: Add Survey Creator to your Angular app
Step 1: Install Survey Creator
Open CodeSandbox and create a new Angular application. Add the following packages to Dependencies:
-
survey-creator-angular
- Survey Creator rendering code for Angular -
survey-creator-core
- Platform-independent Survey Creator code -
survey-angular-ui
- SurveyJS Form Library rendering code for Angular -
survey-core
- Platform-independent SurveyJS Form Library code -
@angular/cdk
- Angular Component Dev Kit
If you want to add Survey Creator to a real-world application, use the following command to install the survey-creator-angular
and @angular/cdk
packages. Other packages will be installed automatically as peer dependencies:
npm install survey-creator-angular@latest @angular/cd --save
As a result, your package.json
should contain the following dependencies:
Step 2: Configure Styles
Reference Survey Creator and SurveyJS Form Library style sheets in the angular-cli.json
file. Refer to the resulting CodeSandbox for a code example.
In a real-world application, open the angular.json
file and reference the style sheets in it:
Step 3: Create a custom component that renders the Survey Creator
We can name the custom component CreatorWidgetComponent
. If you use Angular CLI, run the following command to generate the component:
ng generate component creator-widget
In CodeSandbox, you have to create component files manually: creator-widget.component.html
and creator-widget.component.ts
.
Open the creator-widget.component.ts
file and import SurveyCreatorModel
from the survey-creator-core
package. Instantiate the SurveyCreatorModel
and assign the instance to a component prop.
Open the creator-widget.component.html
file and pass the SurveyCreatorModel
instance to the model
attribute of the <survey-creator>
element.
Step 4: Render the custom component
Before you render Survey Creator, you need to import the module that integrates it with Angular. Open your NgModule
class (usually resides in the app.module.ts
file), import the SurveyCreatorModule
from survey-creator-angular
, and list it in the imports
array. In addition, import our custom component and add it to the declarations
array.
To render the custom component that contains Survey Creator, add the <survey-creator-widget>
element to app.component.html
.
If you do everything right, the Survey Creator will be shown in the CodeSandbox preview:
Task 2: Show a survey list that supports CRUD operations and set up Angular routing
This task bears no relation to SurveyJS functionality. We need to get the list of surveys from a database, allow users to create a new survey, and change the name and JSON definition of an existing survey. Unfortunately, in real-world apps, you have to repeat these steps for every application. If you are familiar with them, you can skip this section and go directly to Task 3.
Step 1: Implement asynchronous functions that work with the database
To simplify the code and let you modify data locally in your browser, we will use the browser’s local storage and emulate asynchronous calls using the setTimeout
function. We will put all our data-related functions into the WebDataService.ts
file. In the code below, this file contains only function signatures for brevity. Refer to the resulting CodeSandbox for a full code listing.
Step 2: Render the survey list
Create a SurveyListComponent
that will render the list of surveys, allow users to add a new survey and edit/delete existing surveys. It will navigate to the following path for editing surveys: /editsurvey?id=surveyId
.
Step 3: Set up Angular routing
Add the app-routing.module.ts
file to your project and specify routes within it.
Task 3: Load and save survey JSON definitions
We need a survey ID to load and save the survey JSON definition. We can get the ID from the id
query parameter. All that’s left to do is to call the getSurveyJSON
and saveSurveyJSON
functions from the WebDataService.ts
file.
Note that Survey Creator has an isAutoSave
property. If you enable it, the saveSurveyFunc
callback is called on every change. The callback has two parameters: a numeric saveNo
and a callback
function. saveNo
is an incremental number. Since web services are asynchronous by their nature, older changes may come after more recent changes. It means that if you saved the change #152 on the server, you can simply ignore changes #151 and below. After getting a confirmation from the server, you can use the callback
parameter and call it as callback(saveNo, true)
in case of a success or callback(saveNo, false)
in case server could not save the data for some reason. In both cases, Survey Creator will show notifications.
Task 4: Change the survey name
You can implement different UIs to allow users to change the survey name. For example, users can edit the name in a survey list. The second option is to display a text input for editing the survey name below the Survey Creator. Another solution is to add a survey property that users can modify in the Survey Creator’s Property Grid (see the example).
In this article, we take the survey name from the survey title and save a record about it in the database. The record has three fields: id
, name
, and json
.
Step 1: Set the survey title
You can do it in code as follows: creator.survey.title = "yourValue"
;. Do it within the onInit
hook after loading the survey JSON definition.
Step 2: Update the survey name in the database
Set the name
field in the database record when the survey title
property is changed. You can use the creator.onModified
event for this purpose.
Step 3: Make the survey title
property required
You should prevent end users from emptying the survey title because the survey name in the database cannot be empty. There are several ways of doing it, but the easiest one is to find the needed property and set its isRequired
attribute to true
.
Conclusion
You have learnt how to add our Survey Creator component into your Angular application and save survey JSON definitions in a database. It is not a complete survey service. Missing capabilities include showing surveys to end users, gathering survey responses, and presenting them in a table or dashboard. Leave a comment below if you want us to continue implementing the service in our future articles.
About SurveyJS Project
SurveyJS Project includes four open-source JavaScript Libraries:
Form Library — A free and open-source MIT-licensed JavaScript library that lets you design dynamic, data-driven, multi-language survey forms and run them in your web application using a variety of front-end technologies. Available for free under the MIT license.
Survey Creator — A GUI-based no-code survey builder that allows easy drag-and-drop form creation even for non-tech savvy users. Requires a commercial developer license.
Dashboard — Simplifies survey data analysis with interactive and customizable charts and tables. Visualize your insights with the survey data dashboard and analyze survey results in one view. Requires a commercial developer license.
PDF Generator — Allows you to save an unlimited number of custom-built survey forms to PDF (both new and filled-in), and generate fillable PDF forms to automate your form workflow and go paperless. Requires a commercial developer license.
To learn more about SurveyJS Project, visit our website: surveyjs.io.
Top comments (0)