How to use the Dialog Component

In this tutorial, you’ll learn all about using the dialog component within the Page Builder.

Jip Volkers

Published: 16-09-2020

Last updated: 16-09-2020

Video Thumbnail
3:17
0:39

Introduction

Dialogs are pop-up windows that can be used for a variety of things. Dialogs can be used as warning and/or messages, form or drag and drop other components to.

Preparation

Before we can start using the Object tree, we’ll first have to create or use an already existing page within your application. Open the Page Builder page and add the dialog components to it.

Dialog overview

Now that we have a page with some components present, we can start using the Dialog component.

The default dialog consists of the following components:
A paper with a row in it

The row consist of 2 boxes and another row inside

These contain some text and buttons

In order to edit the Dialog to your own liking, the default components within the dialog can be altered and/or removed. You can also drag and drop new components onto the dialog.

The Dialog component takes up the whole Page Builder page, this is intentional as dialogs are used to break the users flow and direct the attention to the Dialog.
This, however, will prevent you from working on other components within your page. 
Unchecking the ‘Visibility’ checkmark will hide/minimize the Dialog component and gives you the ability to edit other components within your page. Checking the ‘Visibility’ checkmark will again show the component on your Page Builder page.

In order to make the Dialog component fully functional, a few component interactions have to be added. Closing the Dialog will need the ‘CloseDialog’ component interaction. To link the ‘CloseDialog’ interaction, you’ll need to add the interaction to a component within the Dialog. For this tutorial we’ll select the ‘X’ located in the top right of the Dialog. The same can be done for the ‘Cancel’ button located in the bottom right corner of the Dialog.

Be sure to set up the interaction like given example.

Now that the Dialog has a close functionality, we’ll need to create a way to open the dialog. This functionality can be linked to whatever component you desire, but for this tutorial we’ll just use a button. Opening the Dialog will need the ‘OpenDialog’ component interaction. Just like the closing of the Dialog we’ll need to link the component interaction to, in our case, the button.

Be sure to set up the interaction like given example.

In this tutorial
×

Not sure where to start?

Click here to register and start learning
Register