Button With Modal

In this tutorial we will continue on the page that you created in the Hello-World panel.

How to create a button

Add a button to the footer of the basic card on your hello-world page: pull out the footer pin with your left mouse button, and type "button" in the searchfield of the menu. You will see this:

Rual provides two standard buttons, that you can style anyway you like.

Select the basic button. Pull out the content pin with your left mouse button. You get the custom text block, and a green block to enter the text you want to display. Type Register in the green custom string block. Your blueprint now looks like the picture on the left.

If you check your frontend page now (click on view in the page block, after saving the blueprint) you will see the button under the Hello World text. However it does not do anything yet. That's what we will do next: add an event to the button.


TIP
Using your left mouse button will give you the most-used option directly, without first showing the pin menu.
How to create a function

Next pull out the event pin and choose click event: left click from the menu. We will create a new event (function) by typing the name of the function in the searchfield: openRegisterModal. Now your blueprint looks like the picture on the right side.

You now created a function, that you can call multiple times. If your page would include three buttons that all should open the same modal, you can simply call the same function from every button.


Functions allow you to wrap and reuse code.

Our function is supposed to open a modal. Just pull out the flow pin, and type “modal” in the searchfield of the menu. You will see the selection shown in the left picture below.

Choose the default modal. Custom modals can be styled to perfection, but for now, we will start simple and use the default that already includes the most common functionality, like a button that closes the modal if the user wants to go back to the main screen.

If you save the blueprint and test your button again, you will see that a modal opens.

We will give the modal a heading, and leave the rest of the content for the next tutorial. To make a heading text, pull a “heading h3” block out of the header pin.


TIP
h3 refers to the HTML tag.
Rual uses standard HTML and CSS notations to keep things simple.

Pull out the text pin (use the right mouse button) and add a text to the heading. Your blueprint should look like the picture on the right.