Snackbar

Content Type: Module
Categories: Visualization,Communication

Overview

Snackbar - Show a message for 3 seconds.

This shows a message for 3 seconds, then hides it again.

How to use

  1. Add Snip_Snackbar to your page;
  2. In the flow where you want the message to get shown, add 'JavaScript_SnackbarMessage';

Features

  • The message is a variabe, you can show any text you like;
  • You can include an icon;
  • Background color differs per messagetype;
  • You can adjust the styling to your liking;
  • Behaviour at multiple messages: A next snackbar-call will push the present ones up;
  • Pure Mendix. Simply some styling elements and a tiny JavaScript, so you can control and change whatever you like.

Dependencies

None

Documentation

https://youtu.be/itl0EzPzLUI
Demo urlhttps://service.mendixcloud.com/p/snackbar

Description

This shows a message for 3 seconds, then hides it again.


Typical usage scenario

Anytime you want to re-assure your user that happened what they expected to happen, or to warn them that something they expected to happen did not happen or went wrong.


Features and limitations

  • The message is a variabe, you can show any text you like.
  • You can include an icon.
  • You can adjust the styling to your liking.
  • A second snackbar-call will wait until the first has been hidden, before showing itself.

Installation

  1. Add Snip_Snackbar to your page;
  2. In the flow where you want the message to get shown, add 'JavaScript_SnackbarMessage';

And only for using the demo-nanoflows: add the module role 'mrJustForDemo to the user-role.


Dependencies

  • None

Configuration

None


Known bugs

None


Frequently Asked Questions

  • Q: Can I adjust the color-scheme?
  • A: Yes, you can. Open the styling sheet "_snackbar.scss" and change anything you like.
  • Q: Can I adjust the icons?
  • A: Yes, you can. Open the snippet "Snip_Snackbar" and change the images.
  • Q: Can I show multiple messages?
  • A: Yes, you can. They will show on top of each other.
  • Q: Can I change the location of the snackbar?
  • A: Yes, you can. In the styling sheet change 'bottom: 0;' to 'top: 0;'.
  • Q: Can I change the duration of the snackbar?
  • A: Yes, you can. In the javascript change the value of 'NumOfSecondsToShowTheMessage'.

Releases

Version: 1.2.1
Framework Version: 9.18.5
Release Notes: Excluded Demo-documents.
Version: 1.2.0
Framework Version: 9.18.5
Release Notes: Upgraded 1.1.0 to Mendix 9.18.5 and up.
Version: 1.1.0
Framework Version: 8.18.9
Release Notes: - Next message are now added at the bottom, pushing the others upwards; - Added a progressbar indicating the time to fade out
Version: 1.0.1
Framework Version: 8.18.9
Release Notes: - Release for Mendix 8.18.9 - Fixed the message reappearing for a millisecond at the end of the fade-out
Version: 1.0.0
Framework Version: 9.18.5
Release Notes: Version 1.0.0 Initial release for Mendix 9.18.5 and up.