Display Confirmation Messages when Deleting Records

Contents

Overview

This article introduces how to display confirmation messages with SweetAlert2 (External link) when deleting records in Kintone. SweetAlert2 can be used to display text, images, timers, and confirmation notices within stylish pop-ups.

Sample Images

When saving a record, a pop-up is displayed asking to confirm the action.

When deleting a record, a pop-up is displayed again to confirm the action.

Prepare the App

Create the Form

Create an App (External link) that includes any types of fields. Save the form when finished.

Set the Library

This sample uses SweetAlert2 (External link) v7.24.4. Set the following URLs into the App's JavaScript and CSS Customization settings (External link) .

  • https://js.kintone.com/sweetalert2/v7.24.4/sweetalert2.min.js
  • https://js.kintone.com/sweetalert2/v7.24.4/sweetalert2.min.css

Sample Codes

Type the following codes into text editors and save them as JavaScript files. Upload them the App's JavaScript and CSS Customization settings (External link) .

The following sample, save.js displays the pop-up after the user clicks on the Save button in the record.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

(function() {
  'use strict';
  var submitEvents = ['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'];
  kintone.events.on(submitEvents, function(event) {
    // confirm saving the record:
    return swal({
      title: 'Are you sure you want to save this record?',
      type: 'question',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      confirmButtonText: 'Save',
      cancelButtonColor: '#d33'
    }).then(function(result) {
      if (!result.value) {
        swal({
          position: 'center',
          timer: 1200,
          // confirm failed record save:
          text: 'You did not save the record',
          type: 'success',
          showConfirmButton: false
        });
        return false;
      }
      return event;
    });
  });
})();

The following sample, recover_delete.js displays the pop-up after the user clicks on the Delete button in the record.

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

(function() {
  'use strict';
  var deleteEvents = ['app.record.detail.delete.submit', 'app.record.index.delete.submit'];
  kintone.events.on(deleteEvents, function(event) {
    // confirm the record deletion:
    return swal({
      title: 'Are you sure? Your record cannot be restored.',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'I\'m sure.',
      cancelButtonText: 'No, cancel deletion.'
    }).then(function(result) {
      if (!result.value) {
        // if restoring the record:
        swal('Your record is not deleted.');
        return false;
      }
      return event;
    });
  });
})();

The JavaScript and CSS Customization page should look like the following:

After saving the settings, update the App. Try creating or deleting a record. The SweetAlert2 pop-up should now ask for confirmation before proceeding the action.

Reference