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