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.
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.
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.