Fliplet.UI.Toast()

(Returns Promise)

Create a non-obtrusive dialog that disappears after a few seconds (unless configured otherwise). This provides a simple mechanism to provide feedback about an operation while allowing users to continue using the app.

There are 2 different types of Toast notifications, minimal and regular.

Minimal Toast Notification Regular Toast Notification

A minimal toast notification provides brief feedback about an operation with the least amount of interruption to the user.

Minimal toast notifications are usually displayed at the bottom of the screen.

A regular toast notification occupies more substantial space and is styled to attract more attention from the user. This can be used to provide timely and relevant information about your app and current operation.

Regular toast notifications are usually displayed at the top of the screen.

Minimal Toast Notification Regular Toast Notification

Usage

Fliplet.UI.Toast(message)
Fliplet.UI.Toast(options)

Properties

The toast instance returned as the first parameter in the promise resolving. The instance object contains the following properties.

Methods

The toast instance returned as the first parameter in the promise resolving. The instance object contains the following methods.

.dismiss()

(Returns Promise)

Dismisses the Toast notification. The promise is fulfilled when the Toast notification is removed from the page.

.dismiss();

.open()

(Returns Promise)

Opens the Toast notification by executing one of the call-to-actions. The promise is fulfilled when the Toast notification is removed from the page.

.open(index)

.setProgress()

(Returns Promise)

If a progress bar is present, sets the progress bar to the given progress. The promise is fulfilled when the progress bar has stopped transitioning to the new progress point.

.setProgress(percent)

Examples

Display a minimal Toast notification

Fliplet.UI.Toast('App updated');

Use a Toast notification to show error messages

// Data Source 0 is not found, and will trigger an error
Fliplet.DataSources.connect(0)
  .then(function (connection) {
    return connection.find();
  })
  .catch(function (error) {
    var actions = [];
    if (error) {
      actions.push({
        label: 'Details',
        action: function () {
          Fliplet.UI.Toast({
            message: Fliplet.parseError(error)
          });
        }
      });
    }
    Fliplet.UI.Toast({
      message: 'Error loading data',
      actions: actions
    });
  });

Displays a regular Toast notification, then a minimal Toast notification

Fliplet.UI.Toast({
  type: 'regular',
  title: 'John Appleseed',
  message: 'Here’s to the crazy ones. The misfits. The rebels. The troublemakers. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things.',
  actions: [
    {
      label: 'Who said this?',
      action: function () {
        var title = this.data.title;
        Fliplet.UI.Toast(title); // Initiating a new Toast notification will automatically dismiss all existing Toast notifications
        return false;
      }
    }
  ]
})

Back to Fliplet.UI