Alerts Blocks
Last updated
Last updated
In mobile applications, alerts typically consist of a pop-up dialog box that interrupts the user's current interaction with the app, providing critical messages or options for user input. They're often used to display important information, warnings, or prompts to users.
In this tutorial, we’ll show you how to build alerts in your Thunkable app to display important information, warnings, or prompts to users.
Template app:
Click Copy Project in the upper right.
In this tutorial, you’ll learn how to build a three-button alert in your Thunkable app to prompt your users.
Template app:
Click Copy Project in the upper right.
To add an alert message to your app:
Navigate to the Blocks tab of your project.
Under the App Features heading, locate Alerts.
Click the plus icon next to Alerts.
Complete the property fields. Learn more about each of the properties here: Alert Properties
Click Done.
The alert's name appears under the Alerts heading in the sidebar.
| Property | Description |
|---|---|
Title | The text displayed at the top of an alert that summarizes the purpose or topic of the alert's content. |
Message | The main body of text displayed within the alert. It provides detailed information, instructions, or a message to the user, explaining the purpose of the alert. |
ConfirmButton Text | The text displayed on the right button that confirms the message. |
ConfirmButton Dangerous | When set to true, the confirm button or the button’s text will be red. This setting is often used to confirm a deletion of important data, log out of an account, or acknowledge a potentially risky action. It is only relevant for your users on iOS and the web. |
CancelButton Text | The text displayed on the left button. The cancel button provides users with an option to dismiss or cancel the alert without taking any action associated with it. Leave this field blank to create a one-button alert. |
One Button Alert - By default, each alert is configured to have two buttons, a confirm on the right and a cancel on the left. To create a one button alert for users to confirm they've viewed the message leave the CancelButton Text field blank.
To edit the properties of an alert:
Navigate to the Blocks tab of your project.
Locate the alert under the App Features and Alerts headings.
Click the alert's gear icon.
Edit the alert's properties as necessary.
Click Submit to save your changes.
To delete an alert:
Navigate to the Blocks tab of your project.
Locate the alert under the App Features and Alerts headings.
Click the alert's gear icon.
Click Delete.
To access the alerts blocks:
Navigate to the Blocks tab.
Locate the alert under the App Features and Alerts headings.
Click the name of the alert (not the gear icon).
A drawer of alert blocks opens.
The call alert's Show block is used to display the alert to the user. It is often nested within an event block, such as the when button click block.
In the sample block combination below, when the Reschedule Pickup button is clicked, the call alert's Show block displays the alert. The block has an output block of wasConfirmed that is set to true if the user clicks the confirm button (the RESCHEDULE button in the device image below). If wasConfirmed is true, the user is navigated to the reschedule pickup screen.
By default, if the cancel button is clicked, the alert closes, and no action is taken.
The call alert's Show Button List block is used to create alerts with three or more buttons. This is done using functions blocks, lists blocks, and objects blocks.
On iOS, an alert can show more than three buttons, but on Android, alerts can contain a maximum of three buttons. If more than three buttons are specified, only the first three will be displayed.
1. Function: Set Alert's Button List
To create a three-button alert, you need to build a function to define each button's text and style.
Text
The text property is the button's text.
Style
Style refers to the visual and functional aspects of the buttons within an alert. These styles help convey the nature and importance of the action associated with each button. You can choose from three styles:
OK - Typically used as the primary action within an alert. It represents the user's affirmation or acceptance of a particular action or decision.
Cancel - Provides users with an option to cancel or abort the intended action.
Destructive - Used when an action might have irreversible or potentially harmful consequences. It's often associated with actions like deleting data or settings. For iOS apps, the button’s text is red to indicate the importance of carefully considering the action
2. Block: Call Alert's Show Button List
Once you've defined your buttons' text and style, you can trigger the alert. In the block combination below, when the feedback button is clicked, the buttons are defined with the "set alert button list" function, and the "Show Button List" block is triggered to display the list of buttons.
The “call alert’s Show Button List” block has an output to indicate which button in the list was selected. You can use this output to define how the app responds when each of the buttons is selected.
The "buttonPressed" output returns the number associated with the button in the order the buttons' objects were created in the project.
