第 3篇 在记录详细页面上设置个按钮!

cybozu发表于:2016年09月29日 11:09:19更新于:2019年02月11日 14:34:07

概要

上次,我们在记录列表页面里放了个按钮,并设置了简单的动作。这次,我们也同样在记录详细页面做做看吧(^^♪

kintone的事件处理

这次使用的事件是“记录详情页面显示时的事件”。就像上次和上上次做的那样,JavaScript像下面这样写比较好哦。

(function() {
    "use strict";
    // 记录详情页面显示时的事件
    kintone.events.on('app.record.detail.show', function(event) {
        // 这里写具体的处理内容
    });
})();

详细可以参考记录显示事件

按钮设置(1)

接下来,在记录详情页面放一个按钮看看(^^♪
放按钮的地方,最常见的就是在记录详请页面的菜单右侧的空白部分吧。

00157f865b0d2d8ff031b2eb320b6d9

要取得红框部分的元素,可以使用kintone.app.record.getHeaderMenuSpaceElement
接下来,我们试着编写下JavaScript程序吧(^^♪

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        // 在菜单右侧的空白部分设置按钮
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '菜单部分按钮';
        myIndexButton.onclick = function() {
            window.alert('菜单部分');
        };
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

很简单吧(^^)
是否已经习惯了使用kintone JavaScript API呢?

设置按钮(2)

在详细页面上,也可以使用空白栏来设置按钮。

00157f86781d17768d9dbedd3785aa5

关于这个,在获取空白栏的的元素里有写,一起来试试看吧(^^♪

首先,先准备“空白栏”来设置按钮。在任意的应用上,可以打开应用的设置页面,或者设计表单,将控件拖放到喜欢的地方。

00157fc83cb19d1dbea2ce2827028c5

接下来,点击添加好的空白栏的“设置”按钮,设定元素ID。
在这里,我们要使用设定好的元素ID来写JavaScript,所以要设定一个和其他不重复,且可读性好的ID哦。这次,我们就设定“my_space_field”这个ID。

00157ff30e070ec78837ee5a03cce55

接下来,就要开始放置按钮啦。这里的元素取得,是用kintone.app.record.getSpaceElement(id)对吧(^^)
在这个参数id里,指定上文设定的元素ID。也就是说元素ID是“my_space_field”。

  • kintone.app.record.getSpaceElement('my_space_field')

接下来,在之前写好的JavaScript里,追加在空间栏里放置按钮的JavaScript(^^♪

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '菜单部分按钮';
        myIndexButton.onclick = function() {
            window.alert('菜单部分');
        };
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
        // 在任意的空白栏里设置按钮
        var mySpaceFieldButton = document.createElement('button');
        mySpaceFieldButton.id = 'my_space_field_button';
        mySpaceFieldButton.innerText = '空白栏按钮';
        mySpaceFieldButton.onclick = function() {
            window.alert('空白栏');
        };
        kintone.app.record.getSpaceElement('my_space_field').appendChild(mySpaceFieldButton);
    });
})();

虽说是空白栏,但也没啥特别的吧(^^)
像这样子编写代码,可以随时在喜欢的地方放置按钮呢。
可以各种尝试各种玩哦\(^o^)/

一个小应用

好了,接下来让我们来实际运用下之前学过的内容吧(^^♪
大家一定在想可否使用kintone JavaScript API来做个有趣东东?
所以,接下来,我们将运用学过的知识,各自来实现自己的理想吧(^^)
当然条件是使用下面两个元素获取函数来做出让大家开怀一笑的小应用吧!!(笑)

  • kintone.app.record.getHeaderMenuSpaceElement

  • kintone.app.record.getSpaceElement

・・・・・・・・・・

怎么样?(^^) 成功了吗?
顺便提一下,我尝试着做了下面这个。

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        var myHeaderMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
        var startButton = document.createElement('button');
        startButton.id = 'janken_start_button';
        startButton.innerText = '挑战石头剪子布!!';
        myHeaderMenuSpace.innerText = '';
        var jankenItems = new Array("石头", "剪子", "布");
        // 挑战石头剪子布!!
        startButton.onclick = function() {
            // 游戏空间
            var jankenSpace = kintone.app.record.getSpaceElement('my_space_field');
            jankenSpace.innerText = '石头剪子・・・';
            jankenSpace.style.width = '400px';
            jankenSpace.parentNode.style.width = '400px';
            for (var i = 0; i < jankenItems.length; i++) {
                var tmpButton = document.createElement('button');
                tmpButton.id = 'j_button' + i;
                tmpButton.innerText = jankenItems[i] + '!!';
                tmpButton.onclick = function() {
                    var you = this.id.replace('j_button', '');
                    var com = (you + 2) % jankenItems.length;
                    jankenSpace.innerText = "你:" + jankenItems[you] + "对方:" + jankenItems[com] + "再来一次吗?";
                };
                jankenSpace.appendChild(tmpButton);
            }
        };
        myHeaderMenuSpace.appendChild(startButton);
    });
})();

我做了一个非常厉害的「石头剪子布」游戏哦(^^♪
大家一定要来挑战一下!!(笑)
啊,顺便提一下,我1次也没赢过(T_T)・・・(笑)

最后

是不是感觉到玩kintone的乐趣了呢?接下去将会更有趣哦,请大家期待下一篇。(^^)下次,我们将在kintone自定义的基础上尝试取得重要的记录。那么・・・

Let’s kintone customize\(^o^)/

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

 

<<第 2篇 在记录列表页面放置按钮! | 第 4篇 使用记录的(详细页面篇)>>


回复(4)

  • cybozu

    Aladdin_eric,您好!

    请问,您指的是获取 “修改当前执行者”元素吗?


    引用 Aladdin_eric 的回复:

    人气不是很高的样子,来捧个场吧。顺便问一下,如果想取 ”开始处理“ 右侧的元素,有办法吗?

  • Aladdin_eric

    人气不是很高的样子,来捧个场吧。

    顺便问一下,如果想取 ”开始处理“ 右侧的元素,有办法吗?

  • cybozu

    哈哈,有点意思。

  • betsy_yan

    我也发现「石头剪子布」游戏一次也没赢过,所以试着改了一下。如果有什么不对的地方请多指教。


    (function() {

        "use strict";

        kintone.events.on('app.record.detail.show', function(event) {

            var myheadermenuspace = kintone.app.record.getHeaderMenuSpaceElement();

            var startbutton = document.createElement('button');

            startbutton.id = 'janken_start_button';

            startbutton.innerHTML ='挑战石头剪刀布!';

            var jankenitems = new Array("石头","剪刀","布");


            startbutton.onclick = function() {

                var jankenspace = kintone.app.record.getSpaceElement('my_space_field');

                jankenspace.innerHTML = '石头剪刀。。。';

                jankenspace.style.width = '100%';

                jankenspace.style.textAlign = 'center';

                jankenspace.style.fontSize = '30px';

                jankenspace.parentNode.style.width = '100%';


                for (var i = 0; i < jankenitems.length; i++) {

                    var tmpbutton = document.createElement('button');

                    tmpbutton.id = 'j_button' + i;

                    tmpbutton.innerHTML = jankenitems[i] + '!!';

                    

                    tmpbutton.onclick = function() {

                        var you = this.id.replace('j_button','');

                        // Math.random()取0~1的随机数,Math.floor()取数值的整数部分。这样可以让com不受you的影响随意变化数值。

                        var com = Math.floor(Math.random() * jankenitems.length);  


                        // 接下来是判断到底是谁赢的部分

                        var win;

                        var ni = '你';

                        var df = '对方';

                        if (Math.abs(you - com) == 2) {

                            if (you > com) {

                                win = ni + '赢了!哈哈哈';

                            }

                            else {

                                win = ni + '输了!哈哈哈';

                            }

                        }

                        else if (you == com) {

                            win = '你们俩居然平手!';

                        }

                        else if (you < com) {

                            win = ni + '赢了!哇哈哈哈';

                        }

                        else if (you > com) {

                            win = ni + '输了!哈哈哈';

                        }


                        jankenspace.innerHTML = ni + "是" + jankenitems[you] + "," + df + "是" + jankenitems[com] + "。" + "<span style='color:#ff0000;'>"+ win + "!</span>再来一次吗?";

                    };

                    jankenspace.appendChild(tmpbutton);

                };

            };

            myheadermenuspace.appendChild(startbutton);

        });

    })();

您需要登录后才可以回复