Modal

Modal serves as a container for a group of components displayed on a button click.

Methods

Method	Description
open()	opens modal
close()	closes modal
setOpenButtonDisabled(disabled: boolean)	sets button's state (enabled/ disabled)

Triggers

Triggers allow you to launch certain actions upon different events.

On Init	Calls for an action on component initialization
On Open	Calls for an action on modal's button click
On Close	Calls for an action as the modal is closed

Customizing a modal

Modal component consists of a button that opens the modal, and the modal itself. You can customize the button and the modal based on your requirements. Let's check how to customize a modal in your application.

1. Start with adding a modal onto the working area. Configure the appearance of the button by changing its color, text and appearance. You can manage the visibility of the button or disable it based on a certain condition.

2. Next, let's customize the modal itself. Click on the modal's button to open it. You can adjust the size of the modal's layout or go with the default one. You can hide or show the modal's header and configure closing options for the modal by a backdrop click or ESC click if necessary.

Once you're done with the modal's design, you can customize its content. On the modal, you can combine different components. You can also copy-paste any existing component already configured in your application.

Working with a modal

Let's display the data about a selected product inside the modal. Open the modal and drag a detail component on. In the Data field of the component, specify the reference to the necessary data: {{ui.productsTable.selectedRow.data}}

Open and close a modal programmatically

Let's make the modal open the product details by a click on a table's row. Open your table's settings - Triggers tab. Find the On Row Select trigger and select Add a new Action. Choose the Code action and specify the code {{ui.modal.open()}}. Now, upon a row selection, a modal will be opened.

Then, let's add a button that will remove the product and close the modal after that.

1. Bring a button onto the modal and customize its style.

2. Configure the action that will delete the record. Then, add another action step that will close the modal. Choose Code action type and specify the code {{ui.modal.close()}}.

3. Finally, assign the delete action to the On Click trigger of the button.