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, but we did not yet define the function.

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. Now that we finally got the user to the point that they entered their information in our form, of course the next thing we have to do is save this information to a storage.

We have reached our first backend function. In this function we will cover four steps:

  • get the form mutations
  • check the validation requirements
  • save the data to a new storage
  • close the modal

When finished with these steps, the function will look like the picture shown below.

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 two 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.

Check validation requirements

Continue by pulling out the flow pin and select ui: validate form. Click on Connect outlet and choose registerform again.

We have not yet added any validation requirements to the form. This will be done in the next tutorial: Input validation. However, we will already include this block here, because it will just be passed without doing anything right now, but we will not have to go back to this function once we have included the validition later on.

In the picture on the left, you can see that the ui: validate form has two out-pins. The Success 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

Continue the flow by selecting a flow: branch/if block. This block has a Boolean in-pin, which gives you the possibility to take two different routes, depending on the evaluation of your condition. Connect the Success out-pin from the validation block to the branch/if block. If the validation is correct, the flow will continue via the "true" out-pin. If the validation is not correct, the flow will automatically be directed to the "false" out-pin. The "false" out-pin is where we will connect our function to display the error messages later on. In this tutorial, we will work on the flow in the "true" branch.

Save the data to a new storage

Now, from the flow: branch/if block, pull out the upper 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: validate form 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.

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 next tutorial: input validation we will dive a bit deeper into the form, by adding validation to the fields.
But if you're just curious to see the data that you have put in the storage, you can also go directly to the tutorial: simple datatable.