kintone developer network

Retrieve Record Data (Record List)

Follow

To Start Off

This tutorial will help you understand how to retrieve and utilize values from records in your kintone record list page. If you want to retrieve and utilize values from the record details page, check the following tips: Retrieve Record Data (Record Details).


This tutorial will use the retrieved values to add colors to the record list fields.

First, create a kintone app that will record choices of fruits from the choices of apple, banana, and avocado. Use a Drop-down field with the field settings as below. We will use the Field Code of this field later on, so make a note it.
After you have saved your app, add some records to it.

 

Step 1. Retrieve values from the event object

The Event object will be used here. Review the last tutorial here for more details on the Event object.

 

 

Below are the properties of the event object for the Desktop, which can be found here.

 

 

A kintone view can be created as either a "list view" or a "calendar view". In this case, we will work with the more general "list view", which lists the lists of records in the app like a spreadsheet.
When the event object holds the viewType property as a 'list', then there will be an array object in the records property.
The fruit value of the x-th record can be obtained using:

event.records[x].record.Fruit.value;

The code sample below displays the retrieved records in the space under the menu in a record list page.

(function () {
    'use strict';

    kintone.events.on('app.record.index.show', function (event) {
        // No record
        if (!event.size) {
            return;
        }

        var myListTable = document.createElement('table');
        myListTable.id = 'my_list_table';
        myListTable.style.border = '1px solid';
        myListTable.style.width = '600px';

        var records = event.records;
        // Loop in records retrieved
        for (var i = 0; i < records.length; i++) {
            var record = records[i];

            // Record number
            var myRecordTd1 = document.createElement('td');
            myRecordTd1.id = 'my_record_td_' + i + '_1';
            myRecordTd1.style.border = '1px solid';
            myRecordTd1.innerHTML = record.Record_number.value;

            // Fruit
            var myRecordTd2 = document.createElement('td');
            myRecordTd2.id = 'my_record_td_' + i + '_2';
            myRecordTd2.style.border = '1px solid';
            myRecordTd2.innerHTML = record.Fruit.value;

            // Created_datetime
            var myRecordTd3 = document.createElement('td');
            myRecordTd3.id = 'my_record_td_' + i + '_3';
            myRecordTd3.style.border = '1px solid';
            myRecordTd3.innerHTML = record.Created_datetime.value;

            var myRecordTr = document.createElement('tr');
            myRecordTr.id = 'my_record_tr_' + i;
            myRecordTr.appendChild(myRecordTd1);
            myRecordTr.appendChild(myRecordTd2);
            myRecordTr.appendChild(myRecordTd3);

            myListTable.appendChild(myRecordTr);
        }

        var myHeaderSpace = kintone.app.getHeaderSpaceElement();
        myHeaderSpace.innerHTML = '';
        myHeaderSpace.appendChild(myListTable);
    });
})();

The data retrieved may have different formats depending on their Field Types. This is the same as the last tutorial. In this example, we can see that the date format for the Created datetime field is different in the record list when compared to the values in the newly created table (which were created from the event object). Find more detail here for date formats.

 

 

Compare the original record list and the sample table made by values from the event object. The sorting, number of records shown, filtering and paging should match the original record list. You can see that the event object is useful when you need to utilize values from the record list page.

Step 2. Retrieve the field element

If you want to retrieve the DOM element of the HTML, use this sample code here. This code will retrieve the field element of Fruit field.

kintone.app.getFieldElements('Fruit');

Take note of the docs written about the response for this API:

 

 

When you use this API, the field elements of the area highlighted below will be responded as an array.

 

Step 3. Customize the record list page

Start customizing your record list page with the following sample code.

(function () {
    'use strict';

    kintone.events.on('app.record.index.show', function (event) {
        if (!event.size) {
            return;
        }

        var records = event.records;
        var signalColorParts = kintone.app.getFieldElements('Fruit');
        for (var i = 0; i < records.length; i++) {
            // Retrieve value
            var fruit = records[i].Fruit.value;

            // Retrieve DOM element
            var part = signalColorParts[i];

            // Coloring
            if (fruit == 'Apple') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#ff0040';

            } else if (fruit == 'Banana') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#f5da81';

            } else if (fruit == 'Avocado') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#38610b';
            }
        }
    });
})();

 

The sample should change the colors of the fields depending on the field values of each record.

Finally

We hope this has helped you understand on how to use the Event object. Go ahead to try out your own customizations on kintone!

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request
Comments