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:
|
Field Type |
Field Name |
Field Code |
|---|---|---|
|
User Selection |
Assignee |
assignee |
|
User Selection |
Reviewer |
reviewer |
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.