Simple Toast Notification

Content Type: Module
Categories: User Interface

Overview

This is a module providing a basic widget and a JavaScript action to show a simple toast notification in one of the four corners or the top/bottom middle of the page.

 

The toast notification may be given any message, a set duration and a rendering style + location to your liking. On top of that you may provide a custom styling class to style the toast notification even more.

 

This toast notification implementation does not require an entity, not even a non-persistent entity. It may only be triggered from a Nanoflow but it is extremely light weight. And it follows the colours set in the variables for success, info, warning, danger, default and inverse.

Documentation

Demo urlhttps://bgtoast-sandbox.mxapps.io/index.html?profile=Responsive

Typical usage scenario

When you just want to show your users a small message that is not blocking their interaction with the application. 

 

Features and limitations

  • Show a toast with any given message
  • Set the duration of how long the toast shows
  • Choose the location (any of the four corners)
  • Choose the rendering style: default, info, success, warning, danger or inverse. 
  • Give the toast a custom class for additional styling.

You will need to trigger the toast from a nanoflow as it uses a JavaScript action.

Only one toast may be shown at a time.

The toast disappears based on the duration, a user may not click away the toast.

 

Dependencies 

Everything is included in the module, a widget and a JavaScript action to show the toast.

 

Installation

  1. Include the SNP_ToastBase anywhere in your page or if used across your application anywhere in your layout.
  2. Trigger the toast from a Nanoflow by calling the `Show Toast` Nanoflow action.

 

 

Future planned work

Future planned work in now specific order of priority

  • Do not hide the toast when a user hovers over the toast
  • Allow multiple toasts at once
  • Allow toast stacking to allow multiple toasts in one location
  • Allow interaction (trigger microflow, nanoflow or open page when a user clicks the toast)

Releases

Version: 1.1.0
Framework Version: 9.24.15
Release Notes: - Added bottom/top center positioning - Added onclick to close toaster
Version: 1.0.0
Framework Version: 9.24.15
Release Notes: Initial release