Modal

Overview

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

Properties

Name	Type	Description
name	string	Component name

Methods

Name	Parameters	Returns	Description
open	–	void	Open the modal window
close	–	void	Close the modal window
setOpenButtonDisabled	disabled: boolean	void	Disable or enable the open button
setValue	data: object	void	Set component data. Data is an object with arbitrary structure.
resetValue	–	void	Reset component to the initial value
validate	–	void	Trigger form validation
resetValidation	–	void	Clear validation errors

Triggers

Name	Description
On Init	Triggered when the component is initialized
On Open	Triggered when the modal is opened
On Close	Triggered when the modal is closed

Working with the component

The Modal component consists of a button and the modal window itself that you can customize to suit your needs.

Button - you can configure button appearance, text, as well as manage its visibility or disable it based on a specific condition.

Modal window - you can adjust the size of the window, hide/show the modal's header, and configure modal's closing options. Inside the modal window, you can place different components or simply copy-paste any existing components in your application. For example, you can add a Modal to display product details and place the Detail component inside the modal window. In the Data field of the Detail component, you need to reference the necessary data - {{ui.productsTable.selectedRow.data}}.