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.

Applying the customization

Prepare a Kintone App

Include the following fields in the Kintone App:

In the settings of the App, navigate to App Settings, then to 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 the form. Save the settings and update the App when 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 the files in the App

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

Save and update the App settings when done.
The toastr pop-ups will appear when the status in the record is proceeded.

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 important because the files and links will be loaded in the order that they are listed in.

To alter how the toastr pop-up is displayed, the toastr documentation provides more information on how to customize each toast. For example, it is possible to adjust how long it takes for each toast to time out based on whether the cursor is placed over it or not.