Display SweetAlert pop-ups

Introduction

This article introduces how to display custom dialog boxes on Kintone using the SweetAlert library. The SweetAlert library can be found in the Kintone CDN.

What is SweetAlert?

SweetAlert is a library that displays alert() and confirm() windows with a modern style. Details and examples can be viewed on the SweetAlert website.

One thing to note before using SweetAlert, is that this library runs its process as an asynchronous operation. Depending on how the code is written, the code may keep running while the dialog box is displayed, and not wait for a dialog confirmation, unlike how JavaScript’s alert() acts.

 

Setting up the App

In this example, when the record details page is viewed, the age will be calculated from the Date of Birth field, and will update the Age field if needed. SweetAlert will be used to show a message stating that the field was update.

To start off, create a new App with the below properties.

Field type

Field name

Filed code

Date

Date of birth

birthday

Number

Age

age

JavaScript Customization

JavaScript source code(calcAge.js)

JavaScript/CSS settings

Specify the URLs of the kintone CDN that points to the JavaScript and CSS of SweetAlert.
Save the contents of calcAge.js in a text editor, save as a .js file, and upload it to the App.
Update the App when finished.

US_2__1_.PNG

Test the code

Add a new record to the App, but do not fill in the Age field. When the record is saved, and the details view is displayed, the Age field will be updated.

US_1__1_.PNG

Note, that when using SweetAlert it may be recommended to write the code in the following way:

swal('update age.', 'reload the screen.', 'success');

location.reload(true);

This though, will reload the screen before the user clicks on OK, as SweetAlert runs asynchronously.

Finally

The SweetAlert website provides simple examples to get started, and has many advanced examples to fit a variety of needs. SweetAlert supports promises, which should help run codes at the correct timing.

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!