SweetAlert2 Tutorial


A quick tutorial on using SweetAlert2 with Wappler in case someone needs it.
SweetAlert2 is a great alternative for the Notify component in Wappler.

The way I use it works very well for me, please add if you have tips for a better integration with Wappler:

1. Add this script in the header of your layout page:

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. Create a new javascript file in the file manager, for example a “sweetalert2.js” file. In this file we will configure the alerts

3. Link this file in the end of your layout page’s body

<script src="/custom/sweetalert2.js"></script>

4. Add the following basic code in the newly created sweetalert2.js file
The function arguments ( sweetToast(title, text, icon, toast) ) I use to change the message to what I need when I use the sweetalert toast.

The icon can be warning , error , success , info , and question. more info on all alert configurations in step 6.

function sweetToast(title, text, icon, toast) {
        title: title,
        text: text,
        icon: icon,
        toast: toast,
        timer: 3000,
        position: 'bottom-end',
        showConfirmButton: false

5.You can call the above javascript function now whenever you need it:
In an event or flow, use “run Javascript”. In this example I will show the toast on a button click:

Use the function + arguments as needed:


6. Configuration
You can configure the alerts with many options:
Have a look at https://sweetalert2.github.io/#configuration

This was just a simple toast, you can create complex popups with confirmation, cancel buttons etc and multiple step popups.

Let me know if you have additional tips or questions!

Community Page
Last updated: