Display error messages
In this tutorial we will add error messages in the simple form modal. To do this, we continue with the blueprint from the tutorial: input validation. The error messages will look like this:
Useful, but very basic indeed! To give an idea of the full capabilities of Rual Studio, we will add translation and styling to the message so you will be able to show them like this:
Let's start now by gathering the errors in the function where the data is saved.
Use the false branch
Open the Hello World blueprint and go to the function
saveRegistration to continue the flow from the block
flow: branch/if. Pull out the lower flow pin (False) and select
flow: loops: foreach.
A submenu prompts you to select the type. Select
object, because the array with error messages contains objects with the type of error and the field where the error occurs, like this:
Connect the Failed out-pin from the
ui: validate form with the Array in-pin from the
flow: loops: foreach block.
Create a foreach function
If an error is found, the
flow: branch/if block will direct the flow towards the false branche. In that case the array with error objects will contain at least one message, and maybe more, but we do not know how many. To handle a situation like this, you use a foreach function, that does something with each object in the array.
The Iterator out-pin is where you define the function that needs to be repeated for every object in the array. This is called: iterating over the array.
Pull out the Iterator out-pin from the foreach block. Create a new function called
showErrorMessages. The blueprint now looks like the picture above.
Use dynamic content
When we set up the form earlier, we created a
div block in the
openRegisterModal function with an outlet
errormessage. This marks the location where our errormessages will be shown. If you don't remember, check it out in the paragraph: Add "div" for errors.
showErrorMessages will take care of displaying the error messages. Because there can be more than one message, the iterator has to put each message in a new row in the modal. The
div block allows us to put dynamic content in the frontend.
Dynamic content refers to text or elements that change based on user interactions or other parameters that are included in the program.
Dynamic content allows for a lot of flexibility in your frontend design. You do not need to show everything at once, but can change the information where needed.
To display the error messages, we will use the
ui: dynamic content update block. See the picture below for the
showErrorMessages function. Step by step: pull out the flow pin from the
showErrorMessages function and select the
ui: dynamic content update block. The first thing to do is to fill the
connect outlet field in this block, by selecting the
errormessage outlet that was created earlier when we gave this name to the
ui: dynamic content update block the Position pin needs to be filled. Pull out the pin and select
position: string, end. This will take care that every new message (every loop in the foreach function) will add the new content at the bottom of the previous one.
Repeat for each error
Now we fill the
ui: dynamic content update block with the elements that have to be repeated for every error message.
From the UI component pin pull out a
grid: row block, a
grid: column block and a
typography: custom text block.
Next step is to select the text for the error messages. The
failed array contains objects with two fields each:
field. To get the content of those fields, pull out the Value pin and select the block:
get: get fields. As soon as you select this block, a submenu will open where you can select the fields you want to use. Select
field (create them if they do not yet exist in your environment, choose value as type for both of them), after selecting the fields close the menu. The
get: get fields block now has two Value pins that represent the fields you want to use.
string: concatenate strings allows to make a sentence with these two fields. Do not forget to add spaces where they are necessary.
So basically, you combine your message from top to bottom in the
string: concatenate strings block's in-pins.
The contents of the errormessage are substituted for text in the frontend. Just try some combinations. You could also use the field value twice if you would like that
Now you can test the error messages by deliberately filling out the wrong information in the form. It works, but as promised we will take you one step further and get a better design on the error message for
firstname. When you understand how this works, you can adjust the other fields to your liking.
First thing is the translation of the message. We will show you how to do this in the tutorial: translation
After that we will show you how to add styling in the tutorial: styling