Filter Through Record Data and Display a Summary
Overview
This article introduces how to use Underscore.js to filter and sort through records of a Kintone App. A summary is made out of the filtered data, and is displayed on the Record List page.
What is Underscore.js?
Underscore is a JavaScript library that provides many useful helper functions without having to extend built-in objects. This tutorial uses the following 5 helper functions:
- _.max , which can find the maximum element in a list
- _.filter , which returns all values that pass some predicate
- _.sortBy , which can sort the values of an object by some criteria
- _.pluck , which isolates a certain property of an object
- _.chunk , which can break up a single array into multiple arrays, each with a certain number of elements
Sample Image
This tutorial builds a database of students with their school grades.
Information is then displayed in the header space above the record list using Underscore.js. Using functions described later in this tutorial, the following can be calculated and displayed:
- The student with the highest score in the science class
- The students whose averaged grades exceed 90
- Study partners for students in the same grade range in the math class
Prepare the App
Create the Form
Create an App with the following fields and settings.
Field Type | Field Name | Field Code |
---|---|---|
Text | Name | name |
Number | Language Arts | language_arts |
Number | Science | science |
Number | Math | math |
Number | Social Studies | social_studies |
Number | P.E. | pe |
The layout on the form settings looks like the following:
Set the Library
This sample uses Underscore.js v1.9.2. Set the following URL into the App's JavaScript and CSS Customization settings .
- https://js.kintone.com/underscore/1.9.2/underscore-min.js
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 .
|
|
Type the following code into a text editor and save it as a JavaScript file. Upload it to the App's JavaScript and CSS Customization settings . The settings should look like the following:
Attention
Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Underscore.js library is uploaded before the sample JavaScript file. The order of the uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.
Save the JavaScript and CSS Customization settings and update the App. Add a few records into the App, then navigate to the Record List page. The summary of the grades should be displayed above the list of records.
Code Explanation
kintone.events.on Event
|
|
An event is triggered when the App's list view is displayed. The rest of the program runs after this trigger.
For more information, refer to the
Kintone Event Handling API
article.
fetchRecords Function
|
|
This section declares a function that calls the
Get Records REST API
to retrieve all the records available in the App. Although the Record Index Show event specified in the previous code returns the App's records in the event object, the maximum number of records that can be returned with the event object is 100 (the total number of records that can be displayed in one page on the record list page). The fetchRecords
function is used instead to make sure that all records are retrieved no matter the total number of records.
Return if ID Already Exists
|
|
This section checks to see if the HTML element with the ID p1
already exists. This is necessary so that the fetchRecords
function is not triggered each time the user proceeds or goes back a page of records since it is unnecessary to retrieve the records each time, if all records are retrieved when the record list is initially loaded. Therefore, if the p1
element already exists, the function is terminated with a return statement, and the program is ended. If p1
does not exist, the program continues.
Get Header Space Element
|
|
The header space element is retrieved so that the data can be displayed in the header. It is placed in the variable header
to reference later.
Execute fetchRecords Function
|
|
The fetchRecords
function is run.
_.max Helper Function
|
|
The _.max
helper function of Underscore.js is used to find the student whose science score is the highest. The createElement
method is used to create a new p
element. Text is placed in that states the student with the highest science score is the one that was determined by the _.max
helper function.
_.filter Helper Function
|
|
The _.filter
helper function of Underscore.js is used to find the students whose average score of all five subjects is 90 or higher. A new variable highGradeStudents
is created to create a string of students who meet the criteria. The createElement
method is used to create a new p
element. Text is placed in that states the students with an average score of 90 or higher are the ones determined by the _.filter
helper function.
_.sortBy, _.pluck, and _.chunk Helper Functions
|
|
The _.sortBy
, _.pluck
, and _.chunk
helper functions are used to sort the students by their math grades and create pairs of students whose grades are the most similar.
First, the _.sortBy
helper function is used to sort the students by their math grade and insert the array of students into a variable called sortedByMathGrades
.
Then, the _.pluck
helper function is used to extract the name property value from the sorted students and replace the sortedByMathGrades
with only the name property.
Next, the _.chunk
helper function is used to group the students into pairs. A new variable groups
is created to put the partners together into a string.
Finally, the createElement
method is used to create a new p
element. Text is plaed in that states who the student pairs are for study groups in math class.