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.
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”.
Great! Now the application will have SweetAlert2 available to call. Let’s test it out!
title: 'Alert Message',
html: 'This is an alert',
And voila! When I click on the button I get this:
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:
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.