概要

通过前一篇【第 1篇kintone javascript API的使用方法】 的学习，大家掌握了kintone JavaScript API基础内容的【关键】了吗？从这篇起让我们来实践一下JavaScript的自定义(^^♪

在第二篇和第三篇中，分两篇介绍最基础的自定义【在kintone上设置按钮，以及点击按钮时的处理！】。

kintone的事件处理

关于kintone的事件处理，上一篇已经接触了一点了吧。这篇要使用的是【记录列表页面显示后的事件】，如下所示。

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

详情请参考前一篇的【kintone javascript API的使用方法】以及事件处理的写法。

设置按钮

那么，我们来实际操作一下在记录列表中设置按钮吧(^^♪
关于放置按钮的地方，比较常见的是记录列表页面的菜单栏右边的空白部分。

要获取红色部分的元素，需要使用kintone.app.getHeaderMenuSpaceElement()。
那么，我们试着写一下。

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        kintone.app.getHeaderMenuSpaceElement().innerHTML = '<button id=\'my_index_button\'>列表的按钮</button>';
    });
})();

然后将这个代码文件上传到任意一个应用中(^^♪
保存文件时别忘了选择扩展名【.js】，文字编码为UTF-8(无BOM)。

咦！还挺简单的♪一下子就出来了(^^♪
kintone JavaScript API果然厉害!!

但是，像这样按钮直接放在innerHTML标签中的写法不是很好，很容易出现bug。试着换一种写法(^^)

(function() {
    "use strict";
    // 记录列表页面显示后的事件
    kintone.events.on('app.record.index.show', function(event) {
        // 按钮
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '列表的按钮';
        // 在菜单栏右边的空白处放置按钮
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

要创建按钮元素，放在红色框框内的话，这样写比较好♪

防止重复创建的bug

(＠゜ Д゜＠；)诶・・・？

使用上面代码的话，每执行一次以下的操作就会增加一个列表按钮。。。。。

• 换页时

• 点击列重新排序时

就是上面所说的重复创建bug。

在开头的地方，试着加上用于判断是否有按钮元素的'my_index_button'的if语句吧。

(function() {
    kintone.events.on('app.record.index.show', function(event) {
        // 防止重复创建的bug
        if (document.getElementById('my_index_button') !== null) {
            return;
        }
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '列表的按钮';
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

点击按钮时的处理

接着，我们试着加上点击按钮时的处理吧(^^♪
这次要加的处理是点击按钮时弹出警报。

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if (document.getElementById('my_index_button') !== null) {
            return;
        }
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '列表的按钮';
        // 点击按钮时的处理
        myIndexButton.onclick = function() {
            window.confirm('你按了吧！');
        };
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

只要给刚才创建的按钮元素添加一个onclick事件就可以了♪

然后将这个代码文件上传到任意一个应用中(^^♪
再去看看刚才的按钮，鼓起勇气点一下试试(^^♪

简单吧♪

稍微加点花样

接下来，试着在上面的基础上加点花样(^^♪ 在记录列表页面还有一个元素可以获取，就是菜单下面的空白部分，这次我们就用这个。

红色框框部分可以用 kintone.app.getHeaderSpaceElement()来获取。这次要做的是点击按钮时，可以在菜单下方的空白部分显示文字。通过JavaScript自定义看看吧

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if (document.getElementById('my_index_button') !== null) {
            return;
        }
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '列表的按钮';
        myIndexButton.onclick = function() {
            var myHeaderSpace = kintone.app.getHeaderSpaceElement();
            // 字符串元素
            var myListHeaderDiv = document.createElement('div');
            myListHeaderDiv.style.width = '100%';
            myListHeaderDiv.style.height = '35px';
            myListHeaderDiv.style.textAlign = 'center';
            myListHeaderDiv.style.fontSize = '30px';
            myListHeaderDiv.style.fontWeight = 'bold';
            myListHeaderDiv.style.backgroundColor = '#ffd78c';
            myListHeaderDiv.innerText = '你按了吧！按了才出来的的的的...';
            // 在菜单栏的下方空白处显示文字
            myHeaderSpace.innerText = null; // ← 为了防止重复创建，设为null
            myHeaderSpace.appendChild(myListHeaderDiv);
        };
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

刚才的例子中使用的onclick事件的功能是创建字符串元素以及在菜单栏下方的空白处显示文字。
把这一行删除了会怎么样呢・・・会有好玩的发生哦。(￣▽￣)
请务必试一下。

然后将这个代码文件上传到任意一个应用中(^^♪
啥时候按啊！？就现在，还等什么！！（古っ(￣□￣;)!!）

越来越好玩了吧(笑)

像这样大家带着好奇的心情边玩着kintone JavaScript API边把工作中实际用到的kintone应用变得更加强大吧(^^♪

最后

最后，说点正经的事情。
这次列表页面中用来显示按钮以及文字的地方（元素）是使用reference中的函数来获取的。就是kintone.app.getHeaderMenuSpaceElement()和kintone.app.getHeaderSpaceElement()。但是，也许你会想：“也不一定要这样写吧？用常见的方法，使用getElementById()等也可以起到同样效果吧？”。

・・・ 是的，确实。
但是，别忘了kintone JavaScript 编码指南中有如下记载。
-----
关于在kintone上使用的id/class属性
需要注意的是：kintone上各个元素绑定的id/class属性，可能会变更，一般事先不会有预告通知。
另外DOM结构也有可能被变更。
-----

也就是说，使用才望子提供的函数之外的函数进行编码时，在版本升级等情况下HTML更新后可能程序就动不了了。所以推荐使用reference中的函数。当然，除了本次介绍的方法之外，还有很多写法。但是请注意，使用自己的神技术写的JavaScript有可能在版本升级后动不了。

本次就到这里。下一篇介绍【第3篇 在记录详情页面上放置按钮！】。下回见・・・

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

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

<< 第1篇 kintone javascript API的使用方法 | 第 3篇 在记录详情页面上设置按钮！>>