Sweet Alert Configuration with ServiceNow

Sweet Alert is a custom dialog library built aiming to replace JavaScript’s “alert” and “prompt” features to provide a fresh and concurrent UI features filled dialogs.

Requirement to integrate

Sweet Alert can be integrated with Service in simple steps. It will work with both UI 15 and UI 16. You need below three codes to integrate it with Service Now.

• globalsweetalerts –> UI script
• SweetAlerts-min.js —>UI script
• SweetAlerts.css –> CSS file.

You can download the update set from Service Now share and import in your instance. If you do not have access to Share Site, Here is the link to download Sweet alert files Sweet Alert.

• Search for files “SweetAlerts-min.js”, “SweetAlerts.css” and “globalsweetalert” under folder dist.
• Open above three files in any editor.
• Create a new UI script with same name to (your wish) i.e. “SweetAlerts-min.js” and paste the content of files in it through list view (as you will get error through form view).
• Create new stylesheet with same name and paste the content of files in it through list view.

Create a new Global UI script and paste content of file “globalsweetalert”.

How to use Sweet alert

In the client script, instead of alert, now you can write swal() function for alert messages.
E.g., swal(“Hello world!”);

Functions of SweetAlert

There are lots of functions we can call. As it is based on java script you can add java script code within it.
E.g.,
swal(“Click on either the button or outside the modal.”)
.then((value) => {
swal(`The returned value is: ${value}`);
});

For more information about function log onto sweet Alert.