Overview

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.

Documentation

SweetAlert2 Module for Mendix

Getting Started

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

Configuration

• 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

Features

• 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

Limitations

• 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.

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 theme folder
• 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" src="vendor/SweetAlert2/sweetalert2.min.css" />

• Re-run the application