APEX: How to integrate SweetAlert2

I’ve been looking at a way to create an alert in APEX, I basically wanted the apex.confirm alert but a lot nicer. Unfortunately, there doesn’t seem to be a very nice way of styling this, but also it requires to be placed in the button and not called from PL/SQL.

Enter SweetAlert2.

SweetAlert2 is a maintained repository (as the time of this blog post) and looks damn good.

But it isn’t as simple to integrate into APEX, since I didn’t want to use a CDN. (There is a reason, let’s just go with it)

First of all: Let’s get SweetAlert2 added into APEX. If we look at the GitHub Repo in the SRC folder, we can see that there are multiple JS files, and the CSS files are written in Sass (which APEX doesn’t understand). Okay, well this is annoying.

You can go down the route of using the APEX JS concatenator (in the User Interface Details page. I didn’t use this, so I’m not 100% that this works as we need it to). Or using APEX Nitro as Maxime Tremblay suggested. I was going to go through with getting it installed, but thankfully I didn’t have to. A lovely gentleman on Dev.to pointed out that the suggested CDN link on the GitHub page would allow me to download the SRC files, including one called “sweetalert2.all.min”, which included all JS files and the required CSS. So if we go to the CDN site and download the folder, we can find all the relevant files in “sweetalert2-x > package > dist”.

Using the Workspace Files (you can use Application Files if it’s only going to be in the Application) upload that JS file and copy the file name. It should be something like “#WORKSPACE_IMAGES#sweetalert2.all.js”. Now we navigate to the User Interface Details > Javascript section and place that file link in the File URL box.

Great! Now the application will have SweetAlert2 available to call. Let’s test it out!

I created a dynamic action that on click on a button runs some javascript code. Using the SweetAlert2 guide on the website, I used this:

swal.fire({
title: 'Alert Message',
html: 'This is an alert',
type: "warning",
showCancelButton: true,
reverseButtons: true,
width: "33.33%"
});

And voila! When I click on the button I get this:

SweetAlert2 Message

Look’s great! But if I wanted to style it, I need to edit the SweetAlert2.all.js file and find the CSS section, which looks like this:

SweetAlert2 CSS.PNG

You can copy it out, unminify it, change it, minify it and add it back. But I had little to change, so I just found the line I wanted to change and did what I had to!

But there’s a lot more you can do too if you look on the SweetAlert2 website.

Edit: This solution works fine for an alert message, but not for confirm like I initially thought. After further digging I’ve realised it does not stop the execution of the process. This is an issue because I want to be able to confirm/accept the process from continuing.

One thought on “APEX: How to integrate SweetAlert2

  1. Hope future APEX version can have a seeded solution for this. I hate to incorporate a giant CSS/JS files for simple features …

    Kevin

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s