Display SweetAlert2 pop-ups

Introduction

This tutorial will explain how to utilize the SweetAlert2 pop-up boxes within your Kintone Apps with JavaScript customizations. SweetAlert2 can be used to display text, images, timers, and confirmation notices within a stylish popup. In this particular case, we will use SweetAlert2 to cancel deleting or saving a record.  

Completed Sample Images

When trying to save a record, a prompt will appear asking to confirm saving.

image-0.gif

 

 When trying to delete a record, a prompt will appear to confirm the deletion.

image-1.gif

Setting up your App

Create a Kintone App with any type of fields inside.
In this example, a simple form is created with a single Text field as shown below:

image-2.png

Sample Code

Next, prepare the following files to add to the App. See the Kintone Help page on Customizing Kintone with JavaScript& CSS to understand how to upload customization files to Kintone.

 

Copy the URL of SweetAlert2 from the Kintone CDN and add it as a link to the JavaScript and CSS Customization settings of the App.

 

Save the following sample codes as JavaScript files with a text editor and add them as files to the JavaScript and CSS Customization settings of the App. 

 

For displaying a notification to confirm/cancel saving a record [save.js]:

For displaying a notification to confirm/cancel deleting a record [recover_delete.js]:

Within the "JavaScript and CSS Customization" page in the settings, you should have the following:

image-3.png


After saving the settings, update your App. Try creating or deleting a record. The SweetAlert2 pop-up should now ask for confirmation before proceeding the action.

SweetAlert vs. SweetAlert2

SweetAlert and SweetAlert2 are two separate software made by different creators. They generally provide the same features with some additional functionalities added within SweetAlert2. Some of these features include the ability to chain pop-up messages, the "question" pop-up icon, pop-up screen positioning, custom animations, messages with images, dynamic queues, RTL (right to left scripts) language support, and  Ajax requests. In addition, there are various input types included within SweetAlert2 such as URLs, email addresses, radio buttons, files, and drop-down selection menus. SweetAlert has released a version 2.0 that provides users with easier usability. Feel free to try both to compare functionality. 

SweetAlert 2.0 update: https://sweetalert.js.org/guides/#upgrading-from-1x 

Finally

The SweetAlert2 website has many other example pop-up styles, as well as sample code to generate them. 

To learn more about generating alerts and notifications within Kintone, check out Display SweetAlert pop-ups and Display toastr pop-ups.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!