概要

这次是获取记录的列表页面篇。那就开始吧！

接下来，我们将在PC端的列表页面上改变特定记录的显示颜色。

先从应用准备开始。创建应用，里面包含一个单选框，用于选择信号灯的颜色。和详情页面一样，等下会使用到“字段代码”的设定值。

取得event对象

创建表格时需要用到的数据，我们一般用event对象来获取。这个在上次的详细页面篇也使用过，应该很容易理解吧。对的，就是这个。

关于取得的event对象，我们可以看看记录列表页面显示后的事件的event对象的属性（PC端）。

通过这个表格可以明白，“viewType”是“list”的时候，在records属性里放的是记录对象的数组。记录对象・・・・对哒，和上次详细页面时用的是一样的。也就是说，当使用第x条记录的信号灯颜色时，只要像下面这样写就可以了。

event.records[x].record.信号颜色.value;

以下是取得的记录内容显示在记录列表菜单的下侧空白部分上(以前介绍过)，使用viewType=list的范例。

(function() {
    'use strict';
    kintone.events.on('app.record.index.show', function(event) {
        // 0件Hit对策
        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;
        // 取得记录循环
        for (var i = 0; i < records.length; i++) {
            var record = records[i];
            // 记录编号
            var myRecordTd1 = document.createElement('td');
            myRecordTd1.id = 'my_record_td_' + i + '_1';
            myRecordTd1.style.border = '1px solid';
            myRecordTd1.innerText = record.记录编号.value;
            // 信号颜色
            var myRecordTd2 = document.createElement('td');
            myRecordTd2.id = 'my_record_td_' + i + '_2';
            myRecordTd2.style.border = '1px solid';
            myRecordTd2.innerText = record.信号颜色.value;
            // 创建时间
            var myRecordTd3 = document.createElement('td');
            myRecordTd3.id = 'my_record_td_' + i + '_3';
            myRecordTd3.style.border = '1px solid';
            myRecordTd3.innerText = record.创建时间.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.innerText = '';
        myHeaderSpace.appendChild(myListTable);
    });
})();

取得的结果，根据字段格式的不同，写法可能不一样。这个和上次的详细页面篇是一样的，因为比较容易忘记，我们再来复习一遍吧。下面例子的创建时间，根据时间的格式和时区的不同，显示也不同。(详细请看日期与时间的格式。)

上面的范例可以在列表页面运行一下试试，比如试着更改下排列顺序和显示条数，或试一下搜索功能和翻页，边操作边和原来的表格和内容对比一下。取得的数据、条数、排列顺序，随便哪个都和在列表页面显示的内容一样吧。像这样，要重复利用列表页面中显示的值时，使用event对象非常的方便。列表对于大家来说，也不是什么难事了吧。

获取字段元素

接下来，来试着获取一下实际页面上显示的HTML的DOM元素。这个也不是难事哦。要想获取显示信号颜色的字段元素，只要像下面写就可以了。

kintone.app.getFieldElements('信号颜色');

但是，需要注意的是下面的这些哦。

要获取的信号颜色的“字段元素数组”，是下图红框里部分的列表。可以确认下实际的页面。

列表页面自定义

接下来，将结合之前的两个例子，根据值来自定义列表页面的显示。作为主题，由于在记录列表和记录详情页面中设置条件格式这个范例非常优秀，所以参照那个，试着做了下。这个作为内容本身是非常简单的，大家可以结合自己的应用，试一下。

(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('信号颜色');
        for (var i = 0; i < records.length; i++) {
            // 值取得
            var color = records[i].信号颜色.value;
            // DOM元素取得
            var part = signalColorParts[i];
            // 根据值分开显示
            if (color === '红') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#ff0000';
            } else if (color === '绿') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#0000ff';
            } else if (color === '黄') {
                part.style.fontWeight = 'bold';
                part.style.color = '#ffffff';
                part.style.backgroundColor = '#ffd700';
            }
        }
    });
})();

哎呀，不好意思。这颜色稍微有点闪眼睛・・・・
至此，使用列表页面的数据来自定义成功啦！

最后

到现在为止，让我们来复习一下吧。
现在大家应该可以亲手制作类似kintone 三分钟 JS 自定义（日文版）里的东西了!

大家可以看一下范例页面里其他的kintone JavaScript API的范例。现在读着代码，是否比以前更容易理解啦？

啊，最后还有一点。
希望这系列教程能够给有意愿学习kintone自定义的人士提供帮助。各位读者，如果接触kintone的时候，有什么问题，请尽管提问。我们传教士将尽全力提供帮助。

接下来，让我们相会在第六篇吧！

Let’s kintone customize＼(^o^)／

该Tips在2014年4月版中进行过确认。

<< 第 4篇 使用记录的（详细页面篇） |  第 6篇 使用表格 >>