第 2篇 在记录列表页面设置按钮!

cybozu发表于:2016年09月30日 14:07:45更新于:2019年02月11日 14:31:57

概要

通过前一篇【第 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的使用方法】以及事件处理的写法

设置按钮

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

00157f1f212743f73cc73ebacde3d77

要获取红色部分的元素,需要使用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)。

00157f1f297ebed7b4a897002fa1435

咦!还挺简单的♪一下子就出来了(^^♪
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

(@゜ Д゜@;)诶・・・?

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

  • 换页时

  • 点击列重新排序时

00157f1f2b550254984a31a469dbb8e

就是上面所说的重复创建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事件就可以了♪

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

00157f1f2ca4d1e3def48d0b8177a88

简单吧♪

稍微加点花样

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

00157f1f2f938e60880824989fb4544

红色框框部分可以用 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事件的功能是创建字符串元素以及在菜单栏下方的空白处显示文字。
把这一行删除了会怎么样呢・・・会有好玩的发生哦。( ̄▽ ̄)
请务必试一下。

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

00157f1f30dd5a6fea738a69edec027

越来越好玩了吧(笑)

像这样大家带着好奇的心情边玩着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篇 在记录详情页面上设置按钮!>>


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复