SweetAlert2 - Toast and Notification

Content Type: Service
Categories: Communication


This module contains JavaScript actions and nanoflows to show client-side alerts without needing context! Show success messages, validation errors, and more with this fancy toast and notification library. The code is 100% accessible and can be modified to your needs. This module will give you the ability to provide a smoother UI/UX set of toasts and notifications.


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

SweetAlert2 Module for Mendix

Getting Started

NOTE: The basic modal and toast will not require any additional setup. The modals for user input, countdown/timer, and chaining will require alterations to fit your needs.

How to Use

  • Download the module and give all users the User role so they can access the content.
  • Give your button(s)/link(s) the ‘Call a Nanoflow’ action, using the JavaScript actions directly or use the nanoflows starting with SUB_.
  • If using only the nanoflow, create your decision paths and configure the parameters for the sub-nanoflow.
  • If calling microflow from nanoflow, return a status or value that would allow your nanoflow to fire the alerts based on the return of your microflow.
  • Feed in your parameters based on your decision path.


  • Does not require context (but it would help for customization).
  • Allows custom HTML message content.
  • Relies on nanoflows which will help reduce server-side processing normally done with only microflows.
  • Animate.css integration.
  • Parts of modals can be given custom classes.


  • Is not currently plug-and-play, will require the steps below.
  • Real-time alerts are not possible without extra code or use of something like the microflow timer widget.
  • Not all Animate.css animation seem to work as well as others when used on toast notifications.

Additional Required Configuration

  • Locate the ‘vendor’ folder in the following directory: C:\PATH\TO\MENDIX\PROJECT\javascriptsource\sweetalert2
  • Copy the ‘vendor’ folder into the projects main theme folder, where index.html can be found
  • Reference the contents of the ‘vendor’ folder into the head element of the index.html file in your theme folder.
  • If you do not have an index.html file in your theme folder, you should be able to find one in the deployment/web folder, after running your project at least once.
  • Use this code:

<script type="text/javascript" src="vendor/SweetAlert2/sweetalert2.all.min.js"></script>

<link rel="stylesheet" href="vendor/SweetAlert2/sweetalert2.min.css" />

<link rel="stylesheet" href="vendor/Animate.css/animate.min.css" />

  • Re-run the application


Version: 2.0.0
Framework Version: 10.0.0
Release Notes: - Updated to SweetAlert2 v11.10.5 - Added an example for chained modals. - Updated Animate.css integration. - Some parts of the modal alerts can now be given custom classes. - General file maintenance.
Version: 1.1.2
Framework Version: 9.24.0
Release Notes: - Updated Mendix minimum version to 9.24.0. - Updated library to v11.10.2
Version: 1.1.1
Framework Version: 9.6.17
Release Notes: - File relocation within widget. - Upgraded SweetAlert2 to v11.7.12 - Added example modal for user input. - Added example modal for blocking countdown.
Version: 1.0.1
Framework Version: 8.12.0
Release Notes: - Updated module package to 8.12 to allow importing to 9.x.x
Version: 1.0.0
Framework Version: 8.2.2
Release Notes: Initial Release