The SurveyJS Team has great news for React users! We’ve introduced a major update to our Form Builder component. It features a new UI, but most importantly, the new Form Builder for React is composed of true React components. It no longer depends on non-React JavaScript widgets. This article demonstrates how to integrate the new Form Builder into your React app.
We will implement a simple application that displays a list of forms stored in a database. Users can create new forms and surveys and edit or delete existing ones.
Task 1: Add Form Builder to your React app
Step 1: Install Form Builder. Open CodeSandbox 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 Form Builder. 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 Form Library and Form Builder (aka Survey Creator). Instantiate theSurveyCreator 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.
If you do everything right, the Form Builder will be shown in the CodeSandbox preview:
Task 2: Implement a form management UI that supports CRUD operations and set up React routing
This task bears no relation to SurveyJS functionality. We need to get the list of forms from a database, allow users to create a new survey or form, 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 thesetTimeout 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 for a full code listing.
Step 2: Render the list of forms. Create the SurveyListWidget component that will render the list of forms, allow users to add a new form and edit/delete existing surveys. It will navigate to the following path for editing forms: /editsurvey/:id.
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.
Task 3: Load and save form JSON schemas
We pass form 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 form JSON definition (schema) from the database. Since it is an asynchronous operation, we should use the Effect hook to prevent the component from re-rendering when the Form Builder model changes.
Step 2: Save a form JSON definition to the database. The Form Builder 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 thecallback 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, the Form Builder will show notifications.
Task 4: Change the form name
You can implement different UIs to allow users to change the name of a form. For example, users can edit the name in a form list. The second option is to display a text input for editing the name below the Form Builder. Another solution is to add a custom property that users can modify in the Property Grid of the Form Builder (see the example).
In this article, we use the form title as its name and save a record about it in the database. The record has three fields: id, name, and json.
Step 1: Set the form 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 form JSON definition in task 3.
Step 2: Update the form name in the database. Set the name field in the database record when the form (survey) title property is changed. You can use thecreator.onModified event for this purpose.
Step 3: Make the form title property required. You should prevent end users from emptying the form title because its 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 Form Builder into your React application and save form JSON definitions in a database. It is not a complete service. Missing capabilities include showing surveys / form to end users, gathering responses, and presenting them in a table or dashboard. Leave a comment below if you like our products.
About SurveyJS Project
SurveyJS Project includes four open-source JavaScript Libraries:
- SurveyJS Form Library — A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses. It offers native support for React, Angular, Vue.js and Knockout.
- SurveyJS Form Builder — A self-hosted drag-and-drop survey and form builder that automatically generates JSON definition (schemas) of your forms in real time. The Form Builder offers native support for React, Angular, Vue.js and Knockout. Try out its free full-featured demo built to evaluate its capabilities.
- SurveyJS 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.
- SurveyJS Export to PDF — An open-source JavaScript library that renders SurveyJS surveys and forms as PDF files in a browser. With PDF Generator you can save an unlimited number of custom-built forms to PDF (both editable and read-only).
To learn more about SurveyJS, visit our website: surveyjs.io.
