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:


form with errors

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:


form with nice error

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:


save function with false branch

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.

The function 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 div outlet.


dynamic content update function

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


row and column

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

get fields
Concatenate
Concatenate text

The block 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

Next step

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