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.
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
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.
The toastr library
The jQuery library
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
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.
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.