Discuss

Using Bootstrap 4 Toasts

On this page

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. You can use the Toasts component in order to show some information to your users, when a specific dynamic event runs.

In this example we will show you how to apply the toasts on button click, but they can be used with any of the Dynamic Events available in App Connect - on server action success/error, when server action data loads etc.

Including the Toasts Component on your page

The first thing we need to do is to add the Toasts Component on the page. Select App and click the add new button:

Screenshot_1|690x411

Open Components and select Toasts:

Screenshot_2|690x411

You can find the global options of the Toasts Component in the properties panel. Here you can adjust the Position - Top or Bottom, Align - Left or Right, Horizontal and Vertical Offsets in pixels and the Hide Delay in milliseconds. These options will be applied to all the toasts which you call on the page:

Screenshot_3|690x411

Running a Toast Notification

The Toasts can be called via Dynamic Events. In our example this is on clicking the button. Select the button and add new Dynamic Event:

Screenshot_4|690x411

Select Mouse > Click:

Screenshot_5|690x411

Click the dynamic Action Picker button:

Screenshot_6|690x411

Under the Toasts Component select Show and click the Add button:

Screenshot_7|690x411

The toasts component consists of a Title and a Message body. Let's add the message text. If you want to show dynamic data, use the dynamic data picker to select it. If you want to show static text, you must wrap it in single quotes: 'Your static text' :

Screenshot_8|690x411

Set a custom delay timeout option in milliseconds. This is the timeout after which the Toast should be automatically hidden if the Auto Hide option below is enabled:

Screenshot_9|690x411

There are a few options which you can customize. Closable - makes the toast closeable, by showing a close button. Auto Hide - automatically hides the Toast after the specified delay. Animation - applies a fade transition to the Toast

Screenshot_10|690x411

You can add a Title and Subtitle to the Toast. Both are not mandatory, but we recommend adding a title for your toasts for better user experience. The subtitle can be used for some additional information. Both can be static or dynamic - don't forget that you need to wrap the static content in single quotes:

Screenshot_12|690x411

You can add an icon or image to the toast header. The icon size is set to 20x20px so if you select a bigger image, it will be scaled down. Here you can also browse to a static image or select a dynamic one:

Screenshot_13|690x411

Click select when you are done:

Screenshot_14|690x411

You are done, here's the result:

toast|690x449