Skip to main content

Modal

This page provides information on using the Modal widget to create a dialog in your app for displaying various types of content, such as alerts, confirmation pop-ups, forms, and more. It acts as a container used to group and handle related user inputs , and can be opened using actions such as setting a Button widget's onClick event.

Display images on table row selection
Display Modal

Content properties​

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

General​

Animate Loading boolean​

This property controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property. The default value for the property is true.

Quick Dismiss boolean​

Enables quick dismissal or closure of the Modal when the user taps outside the Modal.

Height string​

This property determines how the widget's height adjusts to changes in its content. There are three available options:

  • Fixed: Maintains a constant height for the widget, allowing you to adjust it by dragging or using the resize handle.
  • Auto Height: The widget's height adjusts dynamically in response to changes in its content.
  • Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows the widget can occupy.

Events​

onClose​

Specifies the action (Framework functions, queries, or JS functions) to be performed when the Modal is closed.

Style properties​

Style properties allow you to change the look and feel of the widget.

Color​

Background Color string​

Sets the background color of the widget, specified as a CSS color value. It can also be manipulated programmatically using the JavaScript functions.

Border and shadow​

Border radius string​

Applies rounded corners to the outer edge of the widget. If JavaScript is enabled, you can specify valid CSS border-radius to adjust the radius of the corners.

Reference properties​

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use Modal1.isVisible.

isVisible boolean​

Reflects whether the widget is visible or not.

Example:

{{Modal1.isVisible}}

name string​

Reflects the widget name of the Modal.

Example:

{{Modal1.name}}

Update data with Modal​

The Modal widget can be used to view and edit data in a table. By displaying the details of a selected row in the Modal, users can easily make changes to the data. To open or close the Modal widget, you can make use of event listeners.

  1. Fetch data from the sample users database using a SELECT query fetchUserData.

  2. Display the data by binding the query response to the Table Data property of the Table widget tblUserData, as shown below:

{{fetchUserData.data}}
  1. Set Table's onRowSelected event to open a Modal widget, you can create a new Modal widget or select an existing one
note

Modal widget remains hidden on the canvas and becomes visible only when an event is triggered. You can access and edit the Modal widget from the entity explorer.

  1. Next, add JSON form inside the Modal widget, and edit the fields. For instance, if you plan to modify a user's Date of Birth and Email, you can edit the JSON Form widget accordingly.

  2. Create a new updateuserdata query, to update the database:

UPDATE users
SET email = {{JSONForm.formData.email}}, dob = {{JSONForm.formData.dob}}
WHERE id = {{tblUserData.selectedRow.id}};

  1. Set the JSON form's onSubmit event to run the updateuserdata query, which updates the dob and email fields of a specific user in the users' table based on the provided user ID.

  2. To close the Modal, configure the onSuccess event to include a Close Modal action. This would close the Modal once the updateuserdata query has been successfully executed.

See also​

  • Insert Data - Learn how to insert data into a Table widget, including setting up data sources and handling user input.
  • Update Form Data in Modal - Discover how to update and submit form data within a Modal widget.
  • Edit Table Data Inline - Find out how to edit table data directly within the Table widget, allowing for real-time changes.
  • Display and Lookup Data in Table - Learn how to display, search, and filter data in a Table widget to make data management more efficient.
  • Create Data Drilldown View - Understand how to create a drilldown view to explore data in detail using a Table or other data widgets.