第 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篇 使用记录的(详细页面篇)>>


回复(11)

  • betsy_yan

    太好了,鼓掌

    引用 追梦人 的回复:

    已经解决了,原因是: 手机端跳转的路径写错了,原来是:window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id;正确的应该是:window.location.href = "https://cube.cybozu.cn/k/m/536/edit?id=" + id;

  • 追梦人

    已经解决了,原因是: 手机端跳转的路径写错了,原来是:

    window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id;

    正确的应该是:

    window.location.href = "https://cube.cybozu.cn/k/m/536/edit?id=" + id;

    引用 追梦人 的回复:

    您好,我遇到了一个页面 跳转 的问题 。下面是我的两个应用的代码:应用A 的代码 :12345678910111213(function() {    "use strict";         function test3(event){     var id = 222;    window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id;    };    //手机端    kintone.events.on(['mobile.app.record.edit.submit', 'mobile.app.record.detail.show'], test3);    //PC端    kintone.events.on(['app.record.create.show', 'app.record.detail.show'], test3);             })();应用B 的代码:1234567891011121314151617181920212223242526(function() {  "use strict";      /***      获取浏览器传过来的参数(下班日期)      *       **/     function GetQueryString(name) {     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");     var r = window.location.search.substr(1).match(reg);     if(r != null){      return unescape(r[2]);      }else{     return null;      }   };       /**测试获取浏览器的参数 id**/               function test3(event){      var id = GetQueryString("id");     return event;        };      //手机端    kintone.events.on(['mobile.app.record.create.show', 'mobile.app.record.detail.show'], test3);     //PC端    kintone.events.on(['app.record.create.show', 'app.record.detail.show'], test3);        })();我在 应用 A  中 使用 window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id; 这种方法 跳转到 应用B ,然后在应用B (536) 中 获取浏览器传递过来的参数,然后获取到参数进行后续的处理。在PC端测试的时候,从 应用A 中跳转到 应用B 中时,url 路径是:https://cube.cybozu.cn/k/536/edit?id=222,没有问题,但是在 手机端测试,从应用A 中跳转到应用B中的时候,url 路径是:https://cube.cybozu.cn/k/m/536/edit,  后面的参数 消失了,没有传递过来,查阅了很多资料,还是没有解决,不知道是什么原因,谢谢。

  • 追梦人

    您好,我遇到了一个页面 跳转 的问题 。

    下面是我的两个应用的代码:

    应用A 的代码 :

    (function() {	
      "use strict";	
       
       function test3(event){
         var id = 222;
        window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id;
        };
        //手机端
        kintone.events.on(['mobile.app.record.edit.submit', 'mobile.app.record.detail.show'], test3);
        //PC端
        kintone.events.on(['app.record.create.show', 'app.record.detail.show'], test3); 
           
        })();

    应用B 的代码:

    (function() {
      "use strict"; 
         /***
          获取浏览器传过来的参数(下班日期)
          *
           **/	
       function GetQueryString(name) {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r != null){
          return unescape(r[2]);	
         }else{
         return null;	
         }
       };
       
       /**测试获取浏览器的参数 id**/				
      function test3(event){	
         var id = GetQueryString("id");
         return event;	
        };	
        //手机端
        kintone.events.on(['mobile.app.record.create.show', 'mobile.app.record.detail.show'], test3); 
        //PC端
        kintone.events.on(['app.record.create.show', 'app.record.detail.show'], test3); 
           })();

    我在 应用 A  中 使用 window.location.href = "https://cube.cybozu.cn/k/536/edit?id=" + id; 这种方法 跳转到 应用B ,然后在应用B (536) 中 获取浏览器传递过来的参数,然后获取到参数进行后续的处理。

    在PC端测试的时候,从 应用A 中跳转到 应用B 中时,

    url 路径是:https://cube.cybozu.cn/k/536/edit?id=222,没有问题,

    但是在 手机端测试,从应用A 中跳转到应用B中的时候,

    url 路径是:https://cube.cybozu.cn/k/m/536/edit,  后面的参数 消失了,没有传递过来,

    查阅了很多资料,还是没有解决,不知道是什么原因,谢谢。

  • cybozu

    你可以用delete  event.error; 试下

    引用 追梦人 的回复:

    有值得时候 需要 把 event['error'] = '错误的提示信息 '。  在不点击 提示信息 旁边的  关闭 图标,直接输入 内容,当有内容的时候,直接 让 错误的提示信息 自动消失,而不是我 出现了错误的提示信息,手动去关闭错误信息。  引用 cybozu 的回复:

  • 追梦人

    有值得时候 需要 把 event['error'] = '错误的提示信息 '。  在不点击 提示信息 旁边的  关闭 图标,直接输入 内容,当有内容的时候,直接 让 错误的提示信息 自动消失,而不是我 出现了错误的提示信息,手动去关闭错误信息。  

    引用 cybozu 的回复:

    有值的时候你为什么要去判断,并且把event['error'] = null呢?你可以只判断没值的时候啊,而且你如果不想提示错误的话,直接删除event.error这个对象就行了。而不是设置为null。delete  event.error;

  • cybozu

    有值的时候你为什么要去判断,并且把event['error'] = null呢?你可以只判断没值的时候啊,而且你如果不想提示错误的话,直接删除event.error这个对象就行了。而不是设置为null。delete  event.error;

    引用 追梦人 的回复:

    您好,我在页面中定义了一个 多行文本框,我判断这个多行文本框 里面是否有值。如果没有值,我使用 event['error'] = '请输入内容!';这样的提示信息;如果有值,‘请输入内容’的提示信息 就自动消失了。现在我遇到的问题是,我想要在 手机端 和 PC端 同时实现 这样的功能,当没有值的时候, event['error'] = '请输入内容!’; 这样的提示信息  在 PC端 和 手机端 都是没有问题的,都可以提示;当有值得时候,我使用  event['error'] = null;  在 PC端 是可以把  '请输入内容!’这个提示信息 自动消失,但是,在手机端 却失效了, ‘请输入内容’提示信息 一直都在,并没有自动消失,请问应该如何解决这个问题?或者说 这是  kintone 的一个 bug.

  • 追梦人

    您好,我在页面中定义了一个 多行文本框,我判断这个多行文本框 里面是否有值。

    如果没有值,我使用 event['error'] = '请输入内容!';这样的提示信息;

    如果有值,‘请输入内容’的提示信息 就自动消失了。

    现在我遇到的问题是,我想要在 手机端 和 PC端 同时实现 这样的功能,

    当没有值的时候, event['error'] = '请输入内容!’; 这样的提示信息  在 PC端 和 手机端 都是没有问题的,都可以提示;

    当有值得时候,我使用  event['error'] = null;  在 PC端 是可以把  '请输入内容!’这个提示信息 自动消失,但是,

    在手机端 却失效了, ‘请输入内容’提示信息 一直都在,并没有自动消失,请问应该如何解决这个问题?

    或者说 这是  kintone 的一个 bug.

  • 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);

        });

    })();