Easy popup messages with SweetAlert

Introduction

In this article, we introduce 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 you write it, your code may keep running while the dialog box is displayed, and not wait for you to confirm the dialog, unlike how JavaScript’s alert() acts.

 

Setting up your 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 an 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 it 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 update.

US_1__1_.PNG

Note, that when using SweetAlert you may be prompted 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 you started, and has many advanced examples to fit your needs. SweetAlert supports promises, which should help you run codes at the correct timing.

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.