Display toastr pop-ups

Introduction

This article introduces how to set up pop-up notifications for Process Management task updates using the toastr library hosted on the Kintone CDN.
The example Kintone App in this article uses the Process Management feature. Users proceeding the status in the App will receive toastr notifications in their browsers that notes what actions have taken place.

What is toastr?

toastr is a JQuery-dependent library that can display non-blocking notifications. These "toasts" can display information, errors, warnings, and success messages.

More information about toastr can be read on the toastr website.

Sample Images

In this article, when a user proceeds the status and assigns a task to another user, a toastr message pops up in the corner of the browser stating that the Assignee has been notified of their task (note that the Assignee will be notified through regular Kintone notifications).

 
When the assignee proceeds the status to the reviewer, a toastr message again pops up in the corner of the browser, stating that the record has been sent to the reviewer for review (note that the reviewer will be notified through regular Kintone notifications).

Although the toastr message may be displaying a message that would be obvious for users who regularly use this App, the message is extremely useful for users who are new to using Kintone, as it reassures them of what happened after they proceeded the status.

How to Apply the Customization

Prepare a Kintone App

Include the following fields in your Kintone App:

In the settings of the App, navigate to "App Settings" -> "Process Management" and click the checkbox to enable the Process Management feature.

Add the following Status names in "Status Settings":

• Not started
• In progress
• Sent for Review
• Completed

Set up the "Process Flow Settings" as follows:

The "Assignee" and "Reviewer" fields can be added into the Assignee List by selecting from the "Add a field for selection" drop down list, which pulls in a User Selection field that exists in your form. Save the settings and update the App when you are finished.

When a record is added, the user can proceed the status by clicking on a button labeled "Start", which will assign the record to the user listed in the "Assignee" field.
After that, the user in the Assignee field can proceed the status by clicking the "Send for Review" button to assign the record to the user listed in the "Reviewer" field.

Note that when users are assigned a record when proceeding the process management on Kintone Apps, Kintone sends the assigned user a notification.

Prepare 3 JavaScript files

The toastr library

Use the toastr JavaScript library link hosted on the Kintone CDN.

The jQuery library

Use the jQuery JavaScript library link hosted on the Kintone CDN.

The Main code

The main code utilizes the toastr methods to create new toastr pop-ups when the Proceed Process Event is triggered.
Different messages are inserted into the toastr depending on the value of the next status.

Prepare 1 CSS file

Use the toastr CSS library link hosted on the Kintone CDN.

Set your files in your App

Access your App's settings page, and set these files in the JavaScript and CSS Customization page, as below:

Save and update your App settings when you are done.
You will see the toastr pop-ups when you proceed a status in your record.

Finally

Make sure that the files and links in the JavaScript and CSS Customization page is listed in the order shown in the screenshot. This is because the files and links will be loaded in the order that they are listed in.

If you would like to alter how the toastr pop-up is displayed, the toastr documentation provides more information on how to customize each toast. For example, you can adjust how long it takes for each toast to time out based on whether or not you hover your mouse over it. Adapt this customization in a way that would best fit your team.