Alerts Blocks

Overview

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.

Video Tutorials

How to Display Alert Messages in Your Thunkable App

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:

1. Click: https://x.thunkable.com/projectPage/6531653a1959a6f37453d85a

2. Click Copy Project in the upper right.

How to Create Three-Button Alert Messages in Your Thunkable App

In this tutorial, you’ll learn how to build a three-button alert in your Thunkable app to prompt your users.

Template app:

1. Click: https://x.thunkable.com/projectPage/654986dc7e205fc052e7c11a

2. Click Copy Project in the upper right.

Add an Alert to Your App

To add an alert message to your app:

1. Navigate to the Blocks tab of your project.

2. Under the App Features heading, locate Alerts.

   
3. Click the plus icon next to Alerts.

4. Complete the property fields. Learn more about each of the properties here: Alert Properties

5. Click Done.

6. The alert's name appears under the Alerts heading in the sidebar.

   

Alert Properties

Edit an Alert

To edit the properties of an alert:

1. Navigate to the Blocks tab of your project.

2. Locate the alert under the App Features and Alerts headings.

3. Click the alert's gear icon.

   
4. Edit the alert's properties as necessary.

5. Click Submit to save your changes.

Delete an Alert

To delete an alert:

1. Navigate to the Blocks tab of your project.

2. Locate the alert under the App Features and Alerts headings.

3. Click the alert's gear icon.

   
4. Click Delete.

Blocks

To access the alerts blocks:

1. Navigate to the Blocks tab.

2. Locate the alert under the App Features and Alerts headings.

3. Click the name of the alert (not the gear icon).

4. A drawer of alert blocks opens.

Block: Call Alert's Show

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.

Sample Block Combination

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.

Block: Call Alert's Show Button List

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.

Create a Three-Button Alert

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.