Save form data

In this tutorial we continue with the simple 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.

Creating a new 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 below.

If you like to zoom in on the pictures in this tutorial, click somewhere in the picture with the right mouse button, and select open image in new tab.

save function
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 Connect outlet and choose registerform, which is the outlet we created for our form earlier.

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. If you are editing existing data, this pin will only give back the data that were altered.

The Valid out-pin returns true if the validation is correct. Since we have no validation, it will also pass as correct.
If the validation is not correct, the second out-pin on the ui: validate form block (the Failed out-pin) provides an array containing the error messages from the validation. In the tutorial: display errormessages we will show you how to use the data in this array to show the errors to the user.

validation block
Save the data to a new storage

Pull out flow pin "true" and select storage: create document. Pull out the Storage pin and select storage: selector to create a storage on the spot. Just type registrants and by entering on the name you will have a new storage in your environment. 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.

create document
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.
Close the 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 is open at that point in the flow. Because we don't want any unforeseen effects if we extend our application later on, we will use the Connect outlet and select our modal: registermodal.


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.

Of course it's possible to see what data you stored without building a frontend. In the tutorial: using debug we will show you how to open a debug popup immediately after creating the document, so you can check what's happening while building your application.