Add Survey Creator / Form Builder to Your Angular Application
Tags: form, angular, survey, javascript
Published: 2023-01-17 07:14:23

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.

![Survey Creator for Angular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnyo4007zojsp60umqla.png)

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](https://codesandbox.io/) 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:
{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=package.json %}

### Step 2: Configure Styles
Reference Survey Creator and SurveyJS Form Library style sheets in the `angular-cli.json` file. Refer to the [resulting CodeSandbox](https://codesandbox.io/s/elastic-bessie-r0mb7u?file=/.angular-cli.json) for a code example.

In a real-world application, open the `angular.json` file and reference the style sheets in it:
{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=angular.json %}

### 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.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=creator-widget.component.ts %}

Open the `creator-widget.component.html` file and pass the `SurveyCreatorModel` instance to the `model` attribute of the `<survey-creator>` element.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=creator-widget.component.html %}

### 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.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=app.module.ts %}

To render the custom component that contains Survey Creator, add the `<survey-creator-widget>` element to `app.component.html`.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=app.component.html %}

If you do everything right, the Survey Creator will be shown in the CodeSandbox preview:

![Survey Creator for Angular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhmx23wv8ovycui16zmm.png)

## 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](https://codesandbox.io/s/elastic-bessie-r0mb7u?file=/src/app/WebDataService.ts) for a full code listing.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=WebDataService.ts %}

### 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`.

![Edit Surveys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3g0s7431csww8zyg0vv.png)

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=survey-list.component.html %}

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=survey-list.component.ts %}

### Step 3: Set up Angular routing

Add the `app-routing.module.ts` file to your project and specify routes within it.

{% gist https://gist.github.com/RomanTsukanov/f473b378d261cd4570f6969dd22b03bf file=app-routing.module.ts %}

## 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.

{% gist https://gist.github.com/RomanTsukanov/175b2beb388bcc120d2f2e699a2eecdc file=creator-widget.component.ts %}

## 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](https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/angular)).

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`.

![Survey Title](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wekhivqhhl5ggyiicsfz.png)

### 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`.

{% gist https://gist.github.com/RomanTsukanov/a10651f8d6b11a66b2343c638449a7b4 file=creator-widget.component.ts %}

## 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](https://surveyjs.io/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](https://surveyjs.io/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](https://surveyjs.io/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](https://surveyjs.io/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](https://surveyjs.io/).