Add Survey Creator / Form Builder to Your React Application
Tags: react, javascript, survey, form
Published: 2022-05-16 09:06:44

The SurveyJS Team has great news for React users! We introduce a major update of our Survey Creator component. It received a new UI, but most importantly, the new Survey Creator for React is a composition of true React components. It no longer depends on non-React JavaScript widgets. This article shows how to integrate the new Survey Creator into your React app.

![New Survey Creator for React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j95q8da9kl5b4wp7rdmu.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.

{% codesandbox k6teov %}

## Task 1: Add Survey Creator to your React app

**Step 1: Install Survey Creator.** Open [CodeSandbox](https://codesandbox.io/) and create a new React application. After that, go to the package.json file and add the `survey-creator-react` package to `dependencies`.

**Step 2: Create a custom component that renders the Survey Creator.** We can name it `SurveyCreatorWidget` and the file SurveyCreatorWidget.jsx. Import the `SurveyCreatorComponent` and `SurveyCreator` model from the `survey-creator-react` package and import style sheets for the SurveyJS Library and Creator. Instantiate the `SurveyCreator` model, store the instance in the component state to prevent unnecessary re-renderings, and assign the instance to the `SurveyCreatorComponent`.

**Step 3: Render the custom component.** Import `SurveyCreatorWidget` into the App.js file and render it in the default `App()` function.

{% gist https://gist.github.com/andrewtelnov/9fe72c08f84fe5a4aa20198347c85695 %}

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

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

## Task 2: Show a survey list that supports CRUD operations and set up React 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.js file. In the code below, this file contains only function signatures for brevity. Refer to the [resulting Sandbox](https://codesandbox.io/s/thirsty-bardeen-3jyp3t?file=/src/WebDataService.js) for a full code listing.

**Step 2: Render the survey list.** Create the `SurveyListWidget` component 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`.

![Survey list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rc2mzs86vg7ofywgqyz.png)

**Step 3: Set up React routing.** We use the react-router-dom package for this task. Add it to package.json and configure routing in the App.js file.

{% gist https://gist.github.com/andrewtelnov/0cfc508aa22b1f0dac4a2cba5d33813f %}

## Task 3: Load and save survey JSON definitions

We pass survey ID into the `SurveyCreatorWidget` as props. All we need to do is call the `getSurveyJSON` and `saveSurveyJSON` functions from the WebDataService.js file.

**Step 1: Load a survey JSON definition from the database.** Since it is an asynchronous operation, we should use the Effect hook to prevent the component from re-rendering when the Survey Creator model changes.

**Step 2: Save a survey JSON definition to the database.** 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/andrewtelnov/f424b26318d06e68d00038e36b273aef %}

## 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/Examples/Survey-Creator?id=addproperties&platform=ReactjsV2).

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/nrisbbf12aolgco2n0q4.png)

**Step 1: Set the survey title.** You can do it in the code as follows: `creator.survey.title = "yourValue";`. Do it in the Effect hook, as we did when we loaded survey JSON definition in task 3.

**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/andrewtelnov/b40a990e27c7b4cd81b538319bf91c26 %}

## Conclusion
You have learnt how to add our Survey Creator component into your React 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:

- [SurveyJS Library](https://surveyjs.io/Overview/Library) - embeds and runs surveys on your websites. (Available for free under the MIT license).
- [SurveyJS Creator](https://surveyjs.io/Overview/Survey-Creator) - a survey / form builder component that you can embed into your websites. (Requires a commercial developer license).
- [SurveyJS Analytics Pack](https://surveyjs.io/Overview/Analytics) - displays survey responses in a dashboard. (Requires a commercial developer license).
- [SurveyJS Export to PDF](https://surveyjs.io/Overview/Survey-Pdf-Export) - exports survey responses as PDF files. (Requires a commercial developer license).

To learn more about SurveyJS Project, visit our website: [surveyjs.io](https://surveyjs.io/).