Display SweetAlert2 pop-ups


This tutorial will explain how to utilize the SweetAlert2 pop-up boxes within Kintone Apps with JavaScript customizations. SweetAlert2 can be used to display text, images, timers, and confirmation notices within a stylish popup. This tutorial 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.



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


Preparing the 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:


Sample Code

Next, prepare the following files to add to the App. See the Kintone Help page on Customizing Kintone with JavaScript & CSS for more information on 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]:

The JavaScript and CSS Customization page should look like the following:


After saving the settings, update the 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 


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!