Let's start now by gathering the errors in the function where the data is saved.
saveRegistration
to continue the flow from the block flow: branch/if
. Pull out the lower flow pin False
and select flow loops: foreach
. With the flow loops: foreach
you loop over every item in the array.
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. Connect the failed
pin to the data
pin in the flow loops: foreach
From the Iterator
outpin you can create a function for the foreach. Once created it will automatically create a get: get fields
. Add error
and field
fields to the get: get fields
.
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
, 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.
These pins can be combined together using a concatenate values
and a Custom text
. From the function flow, search ui: notification
. This action, when executed, will show a notification at the specified location on the screen, default top right. This uses the bootstrap class: toast(-body)(-header)
. This will have its own styling, but the notification will look weird with the basic alert
. That is why i used the bootstrap class p-0
which is actually padding: 0
utils: concatenate values
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 utils: concatenate values
block's in-pins.
The contents of the error are substituted for text in the frontend. Just try some combinations. You could also use the field value twice if you would like that
firstname
. When you understand how this works, you can adjust the other fields to your liking.