概要

以下内容是日本的cybozu developers network用户提的问题，今天先从这个问题开始讲起。

～～～～～～～～～～～～～～

大家好！
不知道该选哪个分类，所以就写在这个分类下了。
关于在【列表】中使用自定义，希望有更多的范例。
现在，只有【使用自定义列表显示预算应用和实际应用的合计表】（中文页面准备中），
像JavaScript的入门系列一样、
如果有面向初学者的列表自定义Tips就好了。

～～～～～～～～～～～～～～

让提该问题的这位仁兄久等了。
为满足上面的这个要求，我来介绍一下关于自定义列表的处理方法。o(￣ー￣＼)☆ミLet’s Go!!
为了能够更加好地理解其他自定义列表使用方法的范例/Tips，我来介绍一下获取记录列表数据及自定义列表组合起来使用的基本方法。
这次的题材使用的是第 ５篇的信号灯应用，请再确认一下设置！(￣Λ￣)ゞ
虽然说是自定义列表，但对于在列表页面获取数据并使用这些数据的处理上，和其他列表没有啥区别。不太自信的同学请再复习一下哦(^^♪

设置自定义列表

首先，给之前准备好的信号灯应用设置一个自定义列表！
关于设置方法，我将对照着kintone用户帮助的设置列表，逐步讲解。打开应用的设置页面，添加一个列表。

*注意：只有拥有 kintone 系统管理权限的用户才能创建或编辑自定义列表。

① 列表名称
在这里设置的列表名称会显示在切换列表的下拉菜单中，大家可随意设置。只要是便于管理的名称都可以。

② 记录列表的显示形式
请选择【自定义】。

③ 列表ID
由kintone自动生成，每次创建列表时都会生成不同的数字。这个之后会用到，所以请把图中红色框框内的数字写下来。φ(￣ー￣ )记下记下
另外，这次还用到分页显示，所以请确认是否已勾选。如果不勾选，不管有多少条记录，event.records的返回值都是空的数组。这个在使用列表自定义的时候非常重要，请务必记住(^^)

④HTML
这里输入的值(HTML代码)会在列表页面创建一个数据显示区域。以下内容之后讲解！

<div id="my-customized-view">        
  <table border="1">        
    <thead>        
      <tr>        
        <th>记录编号</th>        
        <th>信号灯</th>        
        <th>创建时间</th>        
      </tr>        
    </thead>        
    <tbody id="my-tbody">        
    </tbody>        
  </table>        
</div>

在这里输入完成之后，需要点保存→更新应用。另外，请检查一下通过JavaScript/CSS自定义的页面中是否残留第5篇中使用过的文件，如果有请删除。因为如果保留第５篇的JavaScript文件，将使情况变得更复杂。。。。。。。(/･_･＼)

保存后返回列表页面，选择刚才在①中设置的列表名称，您就会看到刚才创建的自定义列表。现在如图一样，没有任何数据。数据这部分接下来要做的，请不用着急(^^)

根据所选择的列表切换处理

刚才也说过，自定义列表在列表页面中和其他列表没有啥区别，所以和往常一样可使用记录列表页面显示后的事件 app.record.index.show。

(function() {    
    "use strict";    
    // 记录列表页面    
    kintone.events.on('app.record.index.show', function(event){    
        // 在此处写处理内容    
    });    
})();

刚想说：“接下来就可以把获取到的列表数据显示到自定义列表了...吧..."，稍等稍等。
现在的信号灯应用中应该同时存在第５篇做的表格和这次做的自定义列表这两种列表吧。
这种情况下，不管选择哪个都会执行JavaScript(^^;;
如果只想让它选择自定义列表的时候执行，而选择最初做的表格形式的列表时不执行，要怎么写呢？

方 法1: 使用event对象的属性

创建自定义列表需要用到③中记下来的内容，大家好好回想一下。首先，介绍一下这个列表ID的使用方法。请大家再确认一下记录列表页面显示后的事件的event对象的属性（PC专用）。

在属性名中，有个叫viewId的吧。为确认列表ID是否存在，可执行以下JavaScript代码。别忘了用③中记下来的数值替换event.viewId的条件比较公式中的数值。

(function() {    
    "use strict";    
    kintone.events.on('app.record.index.show', function(event) {    
        if (event.viewId !== 139967) {    
            return;    
        }    
        window.alert('开始自定义列表');    
    });    
})();

只有选择了自定义列表时才会弹出alert！

event对象的event.viewName也可以起到同样效果，顺便一起确认一下吧(^^♪

这种情况下，需要用到①中输入的值。

(function() {    
    "use strict";    
    kintone.events.on('app.record.index.show', function(event) {    
        if (event.viewName !== '自定义列表') {    
            return;    
        }    
        window.alert('出来自定义列表了');    
    });    
})();

方 法2: 使用自定义列表的DOM元素

在创建自定义列表时④中输入的HTML内，要预先把与其他列表不重复的元素ID写上。可在记录列表页面显示后的事件发生时，调用这个元素ID，判断元素有无。这次是把最外面一个标签div的id设为了"my-customized-view"，我们就把是否可获取到这个DOM元素作为条件。

(function() {    
    "use strict";    
    kintone.events.on('app.record.index.show', function(event){    
        if (!document.getElementById('my-customized-view')) {    
            return;    
        }    
        window.alert('自定义列表成功了');    
    });    
})();

使用获取到的记录

接下来把列表中获取到的record对象的内容显示到自定义列表中吧(^^♪

应该有人已经觉察到了，要做的就是通过DOM操作，把子元素放到④中写的HTML的tbody(元素id="my-tbody")中。入门系列已经学习到这一篇的各位，想必对记录列表的获取以及DOM操作都已经掌握了，所以我就不多做说明了。把以下代码范例上传到各位的应用中看看。

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if (event.viewName !== '自定义列表') {
            return;
        }
        var records = event.records;
        if (!records || !records.length) {
            document.getElementById('my-customized-view').innerText = '无可显示的记录';
            return;
        }
        var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
        var myRecordSpace = document.getElementById('my-tbody');
        myRecordSpace.innerText = '';
        for (var i = 0; i < records.length; i++) {
            var record = records[i];
            var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var tmpA = document.createElement('a');
            tmpA.href = recUrl + record.记录编号.value;
            tmpA.innerText = record.记录编号.value;
            cell1.appendChild(tmpA);
            cell2.innerText = record.信号颜色.value;
            var createdAt = new Date(record.创建时间.value);
            cell3.innerText = createdAt.toLocaleString();
        }
    });
})();

现在的表格格式看过去太简单了，有些人也会觉得有点寒酸吧。。。。
但是使用HTML代码及CSS的话，可想怎么写就怎么写，想把自定义列表变得多酷就有多酷。Σd=(・ω- ｀o)ｸﾞｯ♪

最后

怎么样？关于自定义列表的基础知识，是不是有所了解了？
如果你想把列表页面变得更加丰富，自定义列表非常便利哦。

那么，下回见。

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

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

<< 第 6篇 使用表格  | 第 8篇 挑战简单的更新处理 >>