Overview

mSnackbar offers a non-intrusive way to give feedback to users via a Snackbar (also known as a toast) Usage is very simple, just drag-and-drop the JavaScript option into you Nanoflow and configure things like the text, position, button action, and more. It’s that easy and even better; it is WCAG compliant!

mSnackbar comes with three options:

• mSnackbar default: You can use the regular snackbar to inform the user of an action the app has performed or will perform.
• mSnackbar with close button: You can use the snackbar with close button when you want to inform the user of an action the app has performed or will perform and an acknowledgement of the user is required.
• mSnackbar with nanoflow button: You can use the snackbar with nanoflow button when you want to inform the user of an action the app has performed or will perform that requires a follow-up action by the user. This button triggers a nanoflow and will forward, if required, multiple parameters.

Say goodbye to popups or pages styled as toast messages and say hello to mSnackbar!

For more goodness and instructions, please read the documentation.

A special thanks to Enexis(NL) for giving me the time and freedom to create and share this UI module with the Mendix community.

Check out my other UI Modules:

• mInputs – Material Design Inputs: https://marketplace.mendix.com/link/component/207980
• mSnackbar - Material Design Messages (Toast): https://marketplace.mendix.com/link/component/227741
• mIcons - Material Icons and Symbols: https://marketplace.mendix.com/link/component/205995
• mFonts - Use Google fonts easily within your app: https://marketplace.mendix.com/link/component/206063
• mAnimations - Animate almost every widget: https://marketplace.mendix.com/link/component/209256
• mFlex – CSS Flex Options: https://marketplace.mendix.com/link/component/205993
• mGrid – CCS Grid Options: https://marketplace.mendix.com/link/component/205994
• mDataGrids - Sticky Columns & More for Data Grid (2): https://marketplace.mendix.com/link/component/212219

Connect with me on LinkedIn! https://www.linkedin.com/in/mauritspdekoning/ 

Documentation

Typical usage scenario

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily. They shouldn’t interrupt the user experience, and they often don’t require user input to disappear.

Scenario:

Sarah is using a task management mobile application to keep track of her daily tasks. She has just marked a task as completed and wants to receive confirmation that her action was successful.

User flow:

1. Sarah opens the task management app on her smartphone.
2. She navigates to her task list and selects a task she has completed.
3. Sarah taps on the "Mark as Completed" button.
4. The app processes her action and updates the task status.
5. A snackbar message appears at the bottom of the screen, confirming that the task has been successfully marked as completed.

Use of Snackbar:

• Confirmation: The snackbar displays a brief message, such as "Task marked as completed," to confirm to Sarah that her action was successful.
• Visibility: The snackbar appears at the bottom of the screen, ensuring it is noticeable but not intrusive to the user experience.
• Temporary: The snackbar automatically disappears after a few seconds, allowing Sarah to continue using the app without interruption.
• Dismiss Option: Sarah can dismiss the snackbar by tapping on the close button if she wants to remove it immediately.
• Non-blocking: The snackbar does not block the user interface, allowing Sarah to proceed with her tasks seamlessly.

Benefits:

• User Feedback: Sarah receives immediate feedback on her action, enhancing her confidence in using the app.
• Clear Communication: The snackbar delivers a concise message, eliminating any ambiguity about the status of the task.
• Minimal Disruption: The non-intrusive nature of the snackbar ensures that Sarah's workflow remains uninterrupted.

Conclusion:

In this scenario, the snackbar serves as an effective way to provide feedback to the user about the completion of an action within the task management app. It enhances the user experience by offering clear communication without disrupting the workflow.

Features and limitations

• Supports Desktop and Mobile views
• Supports all kind of options like position, duration, style, text configuration, nanoflows and parameters.
• Option to fully customize the snackbar, by the giving the developer the option to add a custom CSS class within the nanoflow.
• WDAG compliant!
  • Correct naming of Snackbar DOM element for screen readers.
  • Tab focus for keyboard users when Snackbar is active.
  • Supports the use of CSS variables if you have a high contrast option.
• Fully able to configure the variables, within m-snackbar-variables.scss
• Is page agnostic. Meaning that the Snackbar will not disappear when navigating to another page.
• Is user rights agnostic. Meaning that you don't need to set permissions on a page. Only on the nanoflow that is being called.
• Works fully offline. No API calls required.

Dependencies

• Mendix 9.24.0. and up.
• Requires _custom-variables.scss for certain variables. The default path has been set within the main.scss. Change this if your _custom-variables.scss is located somewhere else.

Installation

Just download and install this UI Module. Go to a nanoflow and look in the Toolbox for the section 'mSnackbar'.

You'll have three options: mSnackbar default, mSnackbar close button, mSnackbar Nanoflow button

Configuration

mSnackbar default

The regular snackbar consists of 5 options. These options will also be present in the snackbars with a close button and snackbars with a nanoflow button.

• Message: Displays the message you want to show. You can use plain text or display a variable.

• Duration: Duration of the snackbar message. The default value is 5 seconds (5000 ms).

• Position: Determines the position of the snackbar on the screen. It is recommended to choose the default option (bottom left).

• Style: You can change the style (background color) of the snackbar. It is recommended to choose the default option for consistency.

• Custom class: If necessary, you can add your own custom class to the snackbar. This custom class is placed at the highest level of the widget when it is displayed in the front-end.

Tip: You can use an 'empty' option if you want to use the default setting. Due to Mendix requirements, you must fill in 'empty' instead of leaving it blank.

mSnackbar close button

The snackbar consists of 5 standard options and 2 options related to the close button. These 2 options are also present in the snackbar with a nanoflow button.

• Button text: Displays the button text you want to show. You can use plain text or display a variable.

• Button timeout: The default action of a snackbar with a close button is not to close without user interaction. You can override this, causing the snackbar to close automatically after a certain time. The recommended duration is 5 seconds (5000 ms).

mSnackbar nanoflow button

The snackbar consists of 5 standard options and 9 options related to the nanoflow button. These options mainly allow you to pass parameters. You can pass a total of 3 parameters.

• Button text: Displays the button text you want to show. You can use plain text or display a variable.

• Button timeout: The default action of a snackbar with a close button is not to close without user interaction. You can override this, causing the snackbar to close automatically after a certain time. The recommended duration is 5 seconds (5000 ms).

• Nanoflow: Activates a nanoflow when the button is clicked.

• Parameter: Select the parameter to be passed. This must be an entity object. If you do not use this option, you can use 'empty'.

• Parameter name: The name of the parameter used in the selected nanoflow. For example, if the selected nanoflow uses a parameter with the entity $Customer but has the parameter name '$NewCustomer', it is important to set this correctly so that Mendix can match the parameter with the parameter name in the Nanoflow. If not done correctly, you will receive the error message “Unexpected error occurred, please contact your system administrator.” If you do not use this option, you can use 'empty'.

Known bugs

None

Acknowledgements

A special thanks to:

• Enexis(NL): for giving me the time and freedom to create and share this UI module with the Mendix community.

• Dionlee Uy for supplying the basis/fundamentals of the code.

• Freek Brinkhuis: For helping me out with some JS questions.

Legal notice:

Copyright (c) 2024 Maurits de Koning-Hewitt.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
• 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.