Button With Modal

Let's make a button that opens a modal.

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

Button

Select the basic button. Pull out the content pin with your left mouse button. You get the translate: by key. The action allows you to make your page multi lingual. The translate: by key requires you to enter a key you want to use for your translation. Once selected you can fill out the languages you want to be translated. We will explain the Translations in a later tutorial

TIP

Using your right mouse button will give you the most-used option directly, without first showing the action menu.

View

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.

Create function

Pull out the event pin and choose click event: left click from the menu. We will create a new (function) event by typing the name of the function in the searchfield: openRegisterModal. When a function already exist it will be shown in the search results.

Create modal

Our function is supposed to open a modal. Just pull out the flow pin, and type “modal” in the searchfield of the menu. 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.

Add header

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.

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.