This is the last tutorial in the "Hello World tutorial tour". We will add some basic styling to the errormessages we made in the tutorial: display error messages. If you start this tutorial, you need to have finished the tutorial: translation.
Styling is not just making something that is nice to look at. Especially for web applications the design has to guide the user through the application. It should be clear at any point in the program what actions are expected from the user.
Remember our first errormessages looked like this:
We already improved it in the previous tutorial by translating the rather cryptic message. Now we will add two other important aspects:
- the positioning of the message, next to the field that's wrong
- the colour and font size of the message, to get the attention
In a previous tutorial we introduced the concept of dynamic content. If you don't remember, please check it out here. In the picture below this block has been highlighted.
Instead of using the
div block in the header, we will now add a
div block above the field in our form. To see how this works we will set up the
first name field together. At the position of the first row, at a
ui: multiple block and make an extra
div block at the top, with the outlet
error-firstname. The blocks that need to be added are highlighted in the picture below. Do this for the
last name field as well.
Now go to the foreach function
showErrorMessages. This needs to be changed, so that the
div matching the field is used. In order to do this, we can add a
flow: switch to the function. For the default option in the switch, just leave the
ui: update dynamic content with the outlet for the position in the header. Now connect the Expression in-pin to the field out-pin from the
get: get fields block. Go back to the
flow: switch and add the options
lastname by clicking on the green
+ in the block. Give each option a separate flow, leading to a
ui: dynamic content update block. Don't forget to set the outlets! Connect the ui component in-pin from the blocks to the out-pin of the
grid: row block. We will use the same format for every message. Only the position is changed.Your function now looks like this:
Let's have a look where we are now. We changed the position for firstname and lastname errors. All other error messages still appear in the header, following the
default flow. If we test this in our registration modal, we get this:
Better, but it's still not very clear that there is an error message. We will add some CSS styling to the corresponding blocks to solve this.
To add the styling, go to
typography: custom text block and click on
///> Attributes. A menu will open, where you will see two choices:
add attributes and
add styles. Click on the
add styles and select
font-size from the pull down menu that contains every possible CSS element that you can think of. By the way, if you already know what you are looking for you can also type it directly in the searchbar at the top at the moment the menu opens.
You can select as many menu styles as you like. For every selection, you will get a field in the menu where you can add the settings. See the picture on the left. Clicking the
eye next to it, will expose an in-pin on your block. This way, you can make styling dynamic. Fill the font-size field with
16px and add another style
color. Set this to
red. You can of course also use a hex code, like
#ba3220 to set a colour. Now if you close the menu, you will see the added attributes in the top part of your block. This makes it easy to see where you added custom styling.
Maybe you noticed that in our example the rows in the form are separated, while yours are still very close to each other. One of the ways to do this, is to add a
20px to the
grid: row blocks that contain the form fields. Another nice change would be to set the color of the text in our modal header to white, so it's better visible against the blue background. Can you find out where to do that? Right, you have to find this text, back in the
openRegisterModal function, add the color style and set it to white.
Now that we made these changes, our error messages look really nice! Remember that the birth day field was not required, so you do not get an error there if you don't fill it out.