第 4篇 使用记录的值(详细页面篇)

cybozu发表于:2016年09月28日 15:42:38更新于:2019年02月11日 14:36:51

概要

这次我们来说说获取到记录数据后如何使用!!加油!!

大致就是这样,首先我想先从详细页面(PC专用)的使用方法开始讲解。

尝试获取记录编号

首先,很简单的,我们先从获取记录编号开始。所谓记录编号,就是 每一个应用自动分配的从1开始连号的独一无二的ID编号。记录编号在这之后会经常出现,所以请先把这个记住哦(^^♪

使用的函数是 kintone.app.record.getId()。下图,就是点击菜单右侧的空白部分处的按钮的话会弹出提示的简单的示例。

(function() {
    "use strict";
    kintone.events.on('app.record.detail.show', function(event) {
        var myMenuButton = document.createElement('button');
        myMenuButton.id = 'my_menu_button';
        myMenuButton.innerText = '按钮';
        myMenuButton.onclick = function() {
            // 输出获取的记录ID
            window.alert('id: ' + kintone.app.record.getId());
        };

        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myMenuButton);
    });
})();

 00157eb94ba690b36c501a36242eaf8

轻松的完成了呢!这次也是顺利的开始。

尝试获取记录的值

接着,让我们来试着获取记录的值吧(^^♪

使用的函数是kintone.app.record.get(),注意手机端使用的是kintone.mobile.app.record.get() 函数。这个函数的返回值在成功获取值时为JSON格式,失败时为NULL格式。关于JSON的说明,因为在web上有许多信息,所以在此省略。

var fieldValue = '';
var rec = kintone.app.record.get();
if (rec) {
    fieldValue = rec.record.字段代码.value;
}

字段代码可以通过 设置此应用>表单编辑 对想要获取的字段设定进行确认/变更。

00157eb99a487b04c24bacdc43924ca

00157eb9a1048ef126932b8fad04b07

看到这里应该都不难理解吧(^^)

那么,让我们来实际应用一下吧(^^♪

以下示例是,点击菜单右侧的空白部分放置的按钮后,从更新时间字段获取值并显示在上一篇介绍过“空白栏”中。

(function() {
    "use strict";

    kintone.events.on('app.record.detail.show', function(event) {
        var myMenuButton = document.createElement('button');
        myMenuButton.id = 'my_menu_button';
        myMenuButton.innerText = '按钮';
        myMenuButton.onclick = function() {
            var mySpaceField = kintone.app.record.getSpaceElement('my_space_field');
            mySpaceField.parentNode.style.width = '400px';

            // 获取更新时间
            var updatedAt = '';
            var rec = kintone.app.record.get();
            if (rec) {
                updatedAt = rec.record.更新时间.value;
            }
            kintone.app.record.getSpaceElement('my_space_field').innerText = updatedAt;
        };

        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myMenuButton);
    });
})();

JSON格式记录的值也可以使用关系数组的形式。也就是下面这种感觉。

kintone.app.record.get().record.更新时间.value;
// ↑一样↓
kintone.app.record.get().record["更新时间"]["value"];

哪种书写方法更好,是依个人的喜好和风格而定的。如果您可以根据实际情况选择比较恰当的写法,kintone JavaScript API也就可以更加运用自如了(^^)

字段类型和格式

用上述的代码应该可以获取和显示更新时间。我们再来看一下结果。

00157eb9c6796152c9ab32a770e9330

注意到了吗?红色圈出来的两个日期时间的格式不一样呢(^^;;

请注意字段格式日期与时间的格式。像这样,在Web网页上用HTML显示的格式和从API获取的值的格式有时不一样。根据自己的偏好编写Javascript时一定要注意。

kintone.app.record.get()的注意点

实际上,对于记录详情页面数据的获取处理,大家应该不会采取这种办法:在页面上做一个按钮,然后每次获取的时候点一下按钮。最实用的方法还是在打开页面的时候自动获取吧(^^♪

但是!!这里有很重要的要注意的地方!对于获取记录的值,有如下注意事项。

00158182276cd983b500006b18a90e0

也就是说,不能像下面这样写(>_<)

(function() {
    "use strict";

    kintone.events.on('app.record.detail.show', function(event) {
        var rec = kintone.app.record.get();    // 在这里不能使用kintone.app.record.get()
    });
})();

这一点非常重要,一定不要忘记!!
因为好像有人陷进去折腾好几个小时・・・(¬_¬)

event对象

在之前的注意事项里面对于“event对象( ・◇・)?”感到疑惑的人,其实一点也不难哟(^^)
就是经常写在这里的这个东西。
00157ec841bacea66b2a2a087112806 

为了更好的来理解event对象,我们再来看一下记录显示事件吧(^^♪
这里有关于event对象的属性的记载。

00157ec846b35b1175797ae6e439f47

也就是说,显示记录详情页面事件里的event对象中,已经存放了数据,和使用kintone.app.record.get()获取到的数据一样滴。ヾ(@^▽^@)ノ

根据event对象获取记录的值

那么我们基于以上学习过的内容,试着使用event对象显示更新时间字段的值吧。在这里,用关联数组来表达event对象(^^)

(function() {
    "use strict";

    kintone.events.on('app.record.detail.show', function(event) {
        var updatedAt = '';
        if (event) {
            updatedAt = event["record"]["更新时间"]["value"];
        }

        var mySpaceField = kintone.app.record.getSpaceElement('my_space_field');
        mySpaceField.parentNode.style.width = '400px';
        mySpaceField.innerText = updatedAt;
    });
})();

这也很简单吧?

最后

到这里您已经大致习得了关于记录详情页面里面的基本操作。您还可以参考“根据地址显示地图(中文页面准备中)”等范例,自己尝试看看吧(^^)用if条件语句判定Undefined和空字符的格式(中文页面准备中)等等也可以参考哦(^^♪

那么,请期待下次吧・・・

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

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

<< 第 3篇 在记录详情页面上设置个按钮!第 5篇 使用记录的值(列表页面篇)>>


    您需要登录后才可以回复