Save form data

Create a document with the form input in a new data storage.

Save form data

In this tutorial we continue with the form that was made in the tutorial: simple form. We made a save button in the modal and placed it in the footer under the form input fields. We also defined a function saveRegistration. In this tutorial we will make this function work, so that it saves the form data to a storage.

Create a document

So far we only worked on getting information to and from the user, thus working only on the frontend part (user interface) of our application.

We have now reached our first backend function. In this function we will cover three steps:
- get the form mutations
- save the data to a new storage
- close the modal
When finished with these steps, the function will look like the picture to the right.

create-document-page.png

Get form mutations

Let's go through the save function step by step. First pull out the flow pin from the function and select ui: get form data in the menu. Click on the connector icon or the three dots, this opens a little menu to the right side of you block. In this menu you click on outlet, this will open a modal where you see all of the outlets that are currently made or already made in the same blueprint. You can search for the outlet you used form the form, in this case registerform

The ui: get form data block has four out pins. The form data pin returns the full form object. You could use this for example to select a field and check if it already exists in your storage. In this case we do not use the form data object. We will use the mutations pin. This pin provides all mutations in a form.

The Valid out-pin returns true if the validation is correct. Since we have no validation, it will also return true. If the validation is not correct, the last out-pin, the Failed out-pin, provides an array containing the error messages for each field that does not match the validation. In the tutorial: display errormessages we will show you how to use the data from this array to show the errors to the user.

mutations-page.png

Save to storage

Pull out flow pin and select storage: create document. Click on the select storage button, here you can search and select the storage you want to use. Just type registrants and by entering on the name you will have a new storage in your environment or you will select it if it already exists. Connect the Mutations out-pin from the ui: get form data block to the Mutations in-pin from the storage: create document block to bring the form data to the storage.


INFO

The storages in Rual are document-oriented databases, using JSON documents to store data. This method allows you to use a very flexible data model.

save-document-page.png

Close modal

The last step in this function is to close the modal. Pick up the flow pin on the storage: create document block and select ui: close modal. Since we only use one modal, it is not necessary to connect the outlet. If you do not select an outlet, this block will close ANY modal that opened at the latest point. Because we don't want any unforeseen effects if we extend our application later on, we will connect an outlet and select our modal outlet: registermodal.

close-modal-page.png

What's next?

In this tutorial you saved data to a backend storage. You can now fill out the form a few times to get some data in this storage. In the tutorial: input validation we will dive a bit deeper into the form, by adding validation to the fields.

If you're just curious to see the data that you have put in the storage, you can go directly to the tutorial: datatable.

Datatable