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