Save Form Configuration

Interacting with DB to save your Form Configuration.

Yes, everybody will always come up with this question:

How can I save my form configuration then use it to render for my users?

One and only answer: You need a Database to store it. It can be whatever database you want: MySQL, MariaDB, SQL Server, PostgreSQL, NoSQL (Mongo), Firebase Real-time database,...

Simple Database Design

Based on my real-world business project, we're doing like this to store the Form Configuration.

Tables

View it: https://dbdiagram.io/d/5f10791d74ca2227330d722d

Even Better - Multi-Tenant Design

View it: https://dbdiagram.io/d/5f10791d74ca2227330d722d

How does it work?

As far as you can see above. Every time you create a new Form, you need to:

• Insert a new forms record to store the basic information about your form

• Insert a new form_data record to store the form configuration

And every time you update a form, you need to:

• Insert a new form_data record but you need to set the version value to latest_version + 1

• Then update the forms and set the latest version.

Therefore, you will have a way to maintain your old form (for backup or revert purpose) and every time you want to show the Vue Form Builder, easily pick up the latest form's configuration and put it to FormRender.

Pretty easy, I know right?