TABLE OF CONTENTS
Overlays are used to display additional information or provide user interaction without interrupting the main workflow. In App Studio, the Overlays category contains two components: Modal Dialog and Side Panel.
Modal Dialog
A Modal Dialog is an overlay that provides additional information or requires user input. It typically blocks interaction with the rest of the App until it is dismissed, so that the user focuses on the content within the modal.
Configuration Settings
The Modal Dialog Component includes the following configuration options:
| Setting | Description |
|---|---|
| Visibility | Controls whether the modal is shown or hidden. |
| Transition | Defines how the modal appears and disappears. Options: None, Fade, Slide in from left, Slide in from right, Slide in from bottom, Slide in from top. |
| Background click | Determines the behavior when the user clicks outside the modal. Options: Capture (prevents background interaction), Pass-through (allows interaction). |
| Close on Escape key | A toggle that allows the modal to close when the Escape key is pressed. |
| Event handlers | Allows adding custom event handlers. Background click event is already preconfigured. For details, check the Using Event Handlers article. |
Appearance Settings
The appearance follows standard settings. For details on standard appearance settings, check the Altering the appearance of an App Studio Component article.
Side Panel
The Side Panel adds a collapsible or expandable panel that typically appears on the side of the interface, providing additional content or controls.
Configuration Settings
The Side Panel Component includes the following configuration options:
| Setting | Description |
|---|---|
| Visibility | Controls whether the modal is shown or hidden. |
| Transition | Defines how the modal appears and disappears. Options: None, Fade, Slide in from left, Slide in from right, Slide in from bottom, Slide in from top. |
| Background click | Determines the behavior when the user clicks outside the modal. Options: Capture (prevents background interaction), Pass-through (allows interaction). |
| Close on Escape key | A toggle that allows the modal to close when the Escape key is pressed. |
| Event handlers | Allows adding custom event handlers. Event handlers become available if Close on Escape key is set to Capture. For details, check the Using Event Handlers article. |
Appearance Settings
The appearance follows standard settings. For details on standard appearance settings, check the Altering the appearance of an App Studio Component article.
Example: Confirmation Modal for Deleting a Picture
Pre-requisites:
Add an Image Component or configure the File Upload Component.
Add a Delete button below the picture.
To configure the Modal Overlay:
- Add a Modal Dialog Component.
- Inside the Modal, add a Text Component with the message: “Are you sure you want to delete this picture?”.
- Add two buttons inside the Modal: Yes and No.
For Yes button, add the following event handlers:Setting Description Handler name Deletion Event type Click Action Choose the action suitable for your scenario, for example, Clear a data set result Data set to clear Select the data set Setting Description Handler name Close Modal Event type Click Action Toggle overlay visibility Overlay component Select the component
For No Button, add the following event handler:Setting Description Handler name Cancel Deletion Event type Click Action Toggle overlay visibility Overlay component Select the component - Modify the Delete Button that was created prior to this configuration:
Setting Description Handler name Show Modal Event type Click Action Toggle overlay visibility Overlay component Select the component
This example shows a confirmation modal for deleting an image, with Yes and No buttons. It pops up over the interface, when the Delete button is clicked, making sure the user confirms before the image is removed.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article