Display Confirmation Messages when Saving Records

Contents

Overview

This article introduces how to display confirmation messages with SweetAlert (External link) 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 (External link) .

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 (External link) with the following field and settings. Save the form when finished.

Field Type Field Name Field Code Settings
User selection Ordering User ordering_user
Drop-down Lunch Selection lunch_selection Set the following options:
  • Cheeseburger and Fries
  • Turkey Burger and Onion Rings
  • Veggie Burger and Sweet Corn
Date Order Date order_date

Set the Library

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

  • 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 (External link) .

 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:

caution
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