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