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 error messages looked like the picture on the right:
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
UI: Notification
, we will add a div block below the field in our form. To see how this works we will set up the first name
field together. Add an extra pin at the Second column in the row, pull out a utilities: div
from the new pin, with the outlet error-firstname
. Do this for the last name
field as well.
foreach function
that renders the error messages. 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: notification
so the errors we don't define will still be shown as alerts. Now connect the Expression
in-pin from the switch
to the field
out-pin from the get: get fields
block. Go back to the flow: switch
and add the options firstname
and 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.
default
flow.
The new modal is 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.
UI component
, click on the little carrot
on one of the pins on the action. This will add 2 extra pins to the action, a class
and a styling
pin. The hot pink
is the styling pin you will need to add styling to that specific element.
You can either right click from the styling pin to create a style: custom
, or use left click to search style: custom
. This will create the action and will automatically open a modal where you can add normal css styling. In the input below the label style
you can search for the styling you want to use. Add the style font-size
to 16px
and the color
to red
to the error message text. Click close and save the blueprint.
grid: row
we have put the error messages in, has a standard styling that contains margin-left
and margin-right
with the value of -15px
. To resolve this you can add the style margin
with the value 0 auto
. This will remove the margin on the left and right "0"
of the element.
Not only the error messages needs the get the style margin
. You might have noticed that the inputs are very close to each other. One of the ways to create some spacing between them is by using margin-bottom
of 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.
This is the end of the Hello World Tutorial Tour
. You now have learned the basics of what RUAL has to offer. You can continue with any other tutorial on the overview page or play around in RUAL and maybe see if you can figure it out!