Overview

This article introduces how to display confirmation messages with SweetAlert when saving records in Kintone.

What is SweetAlert?

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

Sample Images

When saving a record, a pop-up is displayed containing data set in the Drop-down field. Clicking "OK" navigates the user to the Record Details page where the data is saved.

Prepare the App

Create an App with the following field and settings. Save the form when finished.

Set the Library

This sample uses SweetAlert v2.1.2. Set the following URL into the App's JavaScript and CSS Customization settings .

• https://js.kintone.com/sweetalert/v2.1.2/sweetalert.min.js

Sample Code

Type the following code into a text editor and save it as a JavaScript file. Upload it to the App's JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

(() => {
  'use strict';

  kintone.events.on(['app.record.create.submit.success', 'app.record.edit.submit.success'], (event) => {

    const lunchFieldCode = 'lunch_selection'; // Field code of the Drop-down field

    const record = event.record;
    const lunchSelection = record[lunchFieldCode].value;

    // This is how to write it using SweetAlert:
    return swal({
      title: 'Thank you for making your order!',
      text: 'You have chosen the following:\n' + lunchSelection,
      icon: 'success'
    }).then(() => {
      // Runs after closing the popup
      return event;
    });

  });
})();

The files settings should look like the following:

Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the SweetAlert library is uploaded before the JavaScript file. The order of the uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

Test the Code

After saving the settings and clicking on Update App, navigate to the Record List page. Start adding a new record, place data into the fields and click the save button. A message modal created by SweetAlert should pop-up. The selected order should be included in the message.

Note that this library runs its process as an asynchronous operation. The code may keep running while the pop-up is displayed, before the user clicks on any buttons.

Reference

• SweetAlert | Getting Started
• SweetAlert | Advanced Examples