Display Browser Notifications

Contents

Overview

This article introduces how to display browser notifications with Toastr (External link) . When users proceed a Status in a record, browser notifications will pop-up with messages inside.

Toastr

Toastr (External link) is a jQuery-dependent library that displays non-blocking notifications. These "toasts" display information, errors, warnings, and success messages.

Sample images

Proceeding the Status to "In progress"

When a user proceeds the Status to In progress, a browser notification pops up. The notification states that the assigned user has been notified of their task. Note that toastr does not have features to send notifications to the Assignee. A notification will be sent to the Assignee through Kintone's features.

Proceeding the Status to "Sent for Review"

When a user proceeds the Status to Sent for Review, a browser notification pops up. The notification states that the record has been sent to the Assignee.

Prepare the App

Create the form

Create an App (External link) named "Student Grades" with the following fields and settings.

Field Type Field Name Field Code
User selection Assignee assignee
User selection Reviewer reviewer

Set the Process Management settings

Access the Settings

In the settings of the App, navigate to App Settings, then to Process Management.

Option 1: Enable this Feature

Check the "Enable process management" checkbox.

Option 2: Status Settings

Add the following Status names:

  • Not started
  • In progress
  • Sent for Review
  • Completed
Option 3: Process Flow Settings

Set up as follows:

The Assignee and Reviewer fields can be added into the Assignee List by selecting them from the Add a field for selection drop down.

Set the Libraries

JavaScript

Set the following URLs into the App's JavaScript and CSS Customization settings (External link) , under the Upload JavaScript for PC option.

  • https://js.kintone.com/jquery/3.6.0/jquery.min.js
  • https://js.kintone.com/toastr/2.1.4/toastr.min.js
CSS

Set the following URL into the App's JavaScript and CSS Customization settings (External link) , under the Upload CSS File for PC option.

  • https://js.kintone.com/toastr/2.1.4/toastr.min.css

Sample code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link) .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

(function() {
  'use strict';
  kintone.events.on('app.record.detail.process.proceed', function(event) {
    var record = event.record;
    var nextstatus = event.nextStatus.value;

    if (nextstatus === 'Sent for Review') {
      var reviewer = record.reviewer.value[0].name;
      toastr.info('Sent to ' + reviewer + ' for review!');
    } else if (nextstatus === 'In progress') {
      var assigned = record.assignee.value[0].name;
      toastr.info(assigned + ' has been notified of their task!');
    }
  });
})();
caution
Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the jQuery CDN and toastr libraries are uploaded before the JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

After saving the settings and clicking on Update App, add a new record into the App. Proceed the Status of the record by clicking on the Start button, then on Confirm. A Toastr pop-up should appear in the corner of the browser. The pop-up should also appear when the Status proceeds to Sent for Review.

Reference