第 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篇使用记录的值（列表页面篇）>>

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

下一篇第 5篇使用记录的值（列表页面篇）

cybozu • 发表于 2019年05月29日 09:52

可以用promise 异步获取数据后，再return event。
同时请先确认你调用的事件是不是支持promise
https://cybozudev.kf5.com/hc/kb/article/1026342/
引用追梦人的回复：
我想这样做，在我的应用中，设置了一个字段：‘当前位置’输入框，当我点击添加数据的时候，调用高德地图api 并返回我当当前的地理位置信息，然后把返回的地理位置信息赋值给 ‘当前位置 ’ 输入框这个字段。我遇到的问题是：当我调用完高德地图 api 并返回值的时候，程序已经走完了，并且已经 return event 了，这个时候不可以再赋值给 '当前位置' 这个字段，我如何才能控制先执行高德地图api, 只有当我获取到高德地图的返回值的时候，才 return event ，谢谢。

追梦人 • 发表于 2019年05月24日 17:51

我想这样做，在我的应用中，设置了一个字段：‘当前位置’输入框，

当我点击添加数据的时候，

调用高德地图api 并返回我当当前的地理位置信息，

然后把返回的地理位置信息赋值给 ‘当前位置 ’ 输入框这个字段。

我遇到的问题是：当我调用完高德地图 api 并返回值的时候，程序已经走完了，并且已经 return event 了，

这个时候不可以再赋值给 '当前位置' 这个字段，

我如何才能控制先执行高德地图api, 只有当我获取到高德地图的返回值的时候，才 return event ，谢谢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
(function()
{   "use strict";
    function setUserNameAndTimeNoEdit(event) {
        //检查当日是否打过卡了
            var record = event.record;
                var loginUserName = kintone.getLoginUser().name;
                    record['员工姓名']['value'] = loginUserName;
                        record['员工姓名']['disabled'] = true;
                        record['上班时间']['disabled'] = true; //设置上班时间不可更改
      record['下班时间']['disabled'] = true; //设置下班班时间不可更改
     //设置上班地图
        //1、获取到上班地图的空白栏，在空白栏中自定义一个div,用于存放上班地图
      //var workmap = kintone.app.record.getSpaceElement('workmap');
       var workmapDiv = document.createElement("div");
      workmapDiv.id = "workmapDiv";
     workmapDiv.style.width = "300px";
     workmapDiv.style.height = "280px";
        workmapDiv.style.border = "1px #000 solid";
     kintone.app.record.getSpaceElement('workmap').appendChild(workmapDiv);
      /**设置上班地图开始**/
      var a = record['上班打卡地址'];
        var mapObj = new AMap.Map('workmapDiv');
        var workAddress = '';
        mapObj.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认:true
               timeout: 10000, // 超过10秒后停止定位，默认：无穷大
             maximumAge: 0, // 定位结果缓存0毫秒，默认：0
             convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
             showButton: true, // 显示定位按钮，默认：true
              buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
               showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
         mapObj.addControl(geolocation);
         geolocation.getCurrentPosition();
           AMap.event.addListener(geolocation, 'complete', function(a) {
                debugger
                var c = a;
               //alert("上班打卡的地理位置是： " + a.formattedAddress);
                alert("我在定位，结果已经出来了");
              workAddress = a.formattedAddress;
             record['上班打卡地址']['value'] = workAddress;
              //alert("aaaa:" + workAddress);
           }); // 返回定位信息
         AMap.event.addListener(geolocation, 'error', function() {
                alert("定位出错了");
         }); // 返回定位出错信息
       });
     alert("我已经走完了");
        return event;  };  //行内修改，修改的时候，设置  声请人不可以输入
kintone.events.on(["app.record.index.edit",
     "app.record.create.show"
    ], setUserNameAndTimeNoEdit);})();

追梦人 • 发表于 2019年05月24日 10:00

您好，我这边试了一下您的方法，这个问题已经解决了，谢谢您。
引用 cybozu 的回复：
这段代码只是想确保在调用googlemap的函数前已经加载了googlemap的api
其实你在app后台的 “通过JavaScript/CSS自定义”自定义设置里面直接加这个就行了
https://maps.googleapis.com/maps/api/js?v=3&key=xxx
（放在你的自定义js代码之前）
cybozu • 发表于 2019年05月21日 18:16

这段代码只是想确保在调用googlemap的函数前已经加载了googlemap的api
其实你在app后台的 “通过JavaScript/CSS自定义”自定义设置里面直接加这个就行了
https://maps.googleapis.com/maps/api/js?v=3&key=xxx
（放在你的自定义js代码之前）
引用追梦人的回复：
国内无法加载，谢谢您。

追梦人 • 发表于 2019年05月21日 16:41

国内无法加载，谢谢您。

引用 cybozu 的回复：

我能看到啊，估计国内网络无法加载吗？以下代码请参考

/*
 * 地図表示のサンプルプログラム
 * Copyright (c) 2013 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
    "use strict";
    // API キー
    var api_key = 'Your Google API key';
    // ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }
    // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
    kintone.events.on('app.record.detail.show', function(event) {
        var timeout = 10 * 1000; // ms
        var interval = 100; // ms
        var check = document.getElementsByName('map_latlng');
        // 住所情報を元に、地図を「住所」フィールドの下に表示します
        function setLocation_address() {
            var locationEl_address = kintone.app.record.getFieldElement('住所');
            if (locationEl_address.length === 0) { return; }
            var check_address = document.getElementsByName('map_address');
            //「map_address」という要素が存在しないことを確認
            if (check_address.length !== 0) { return; }
            // 地図を表示する div 要素を作成します
            var mapEl_address = document.createElement('div');
            mapEl_address.setAttribute('id', 'map_address');
            mapEl_address.setAttribute('name', 'map_address');
            // 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
            var elMap = kintone.app.record.getSpaceElement('Map');
            elMap.appendChild(mapEl_address);
            // Google Geocoder を定義します
            var gc = new google.maps.Geocoder();
            // 「住所」フィールドから値を取得します
            var rec = kintone.app.record.get();
            var addressValue = rec.record.住所.value;
            // Geocoding API を実行します
            gc.geocode({
                address: addressValue,
                language: 'ja',
                country: 'JP'
            }, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    // 地図要素のサイズを指定します
                    mapEl_address.setAttribute('style', 'width: 300px; height: 250px');
                    var point = results[0].geometry.location;
                    var address = results[0].formatted_address;
                    // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
                    var opts = {
                        zoom: 15,
                        center: point,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scaleControl: true
                    };
                    var map_address = new google.maps.Map(document.getElementById('map_address'), opts);
                    // マーカーを設定します
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map_address,
                        title: address
                    });
                }
            });
        }
        // Google Map がロードされるまで待ちます
        function waitLoaded() {
            setTimeout(function() {
                timeout -= interval;
                if ((typeof google !== 'undefined') &&
                    (typeof google.maps !== 'undefined') &&
                    (typeof google.maps.version !== 'undefined')) {
                    setLocation_address(); // 住所をもとに地図を表示
                } else if (timeout > 0) {
                    waitLoaded();
                } else {
                    // abort
                }
            }, interval);
        }
        if (check.length === 0) {
            // enable google maps to call document.write after onload event.
            var nativeWrite = document.write;
            document.write = function(html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) {
                    load(m[1]);
                } else {
                    nativeWrite(html);
                }
            };
            // Google Map の API ライブラリをロードします
            load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
            waitLoaded();
        }
    });
})();

追梦人 • 发表于 2019年05月21日 16:24

您好，这个案例中

https://developer.cybozu.io/hc/ja/articles/202640950

有一行代码我没有看懂，可以帮忙解释一下是什么意思吗，谢谢。

这一行代码： var check = document.getElementsByName('map_latlng');

在最下面判断

  if (check.length === 0) {
            // enable google maps to call document.write after onload event.
            var nativeWrite = document.write;
            document.write = function(html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) {
                    load(m[1]);
                } else {
                    nativeWrite(html);
                }
            };
            // Google Map の API ライブラリをロードします
            load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
            waitLoaded();
        }；

具体是什么意思，可否解释一下呀，谢谢。

--------------------------------------------下面是案例的代码-------------------

/*
 * 地図表示のサンプルプログラム
 * Copyright (c) 2013 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
    "use strict";
    // API キー
    var api_key = 'Your Google API key';
    // ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }
    // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
    kintone.events.on('app.record.detail.show', function(event) {
        var timeout = 10 * 1000; // ms
        var interval = 100; // ms
        var check = document.getElementsByName('map_latlng');
        // 住所情報を元に、地図を「住所」フィールドの下に表示します
        function setLocation_address() {
            var locationEl_address = kintone.app.record.getFieldElement('住所');
            if (locationEl_address.length === 0) { return; }
            var check_address = document.getElementsByName('map_address');
            //「map_address」という要素が存在しないことを確認
            if (check_address.length !== 0) { return; }
            // 地図を表示する div 要素を作成します
            var mapEl_address = document.createElement('div');
            mapEl_address.setAttribute('id', 'map_address');
            mapEl_address.setAttribute('name', 'map_address');
            // 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
            var elMap = kintone.app.record.getSpaceElement('Map');
            elMap.appendChild(mapEl_address);
            // Google Geocoder を定義します
            var gc = new google.maps.Geocoder();
            // 「住所」フィールドから値を取得します
            var rec = kintone.app.record.get();
            var addressValue = rec.record.住所.value;
            // Geocoding API を実行します
            gc.geocode({
                address: addressValue,
                language: 'ja',
                country: 'JP'
            }, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    // 地図要素のサイズを指定します
                    mapEl_address.setAttribute('style', 'width: 300px; height: 250px');
                    var point = results[0].geometry.location;
                    var address = results[0].formatted_address;
                    // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
                    var opts = {
                        zoom: 15,
                        center: point,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scaleControl: true
                    };
                    var map_address = new google.maps.Map(document.getElementById('map_address'), opts);
                    // マーカーを設定します
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map_address,
                        title: address
                    });
                }
            });
        }
        // Google Map がロードされるまで待ちます
        function waitLoaded() {
            setTimeout(function() {
                timeout -= interval;
                if ((typeof google !== 'undefined') &&
                    (typeof google.maps !== 'undefined') &&
                    (typeof google.maps.version !== 'undefined')) {
                    setLocation_address(); // 住所をもとに地図を表示
                } else if (timeout > 0) {
                    waitLoaded();
                } else {
                    // abort
                }
            }, interval);
        }
        if (check.length === 0) {
            // enable google maps to call document.write after onload event.
            var nativeWrite = document.write;
            document.write = function(html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) {
                    load(m[1]);
                } else {
                    nativeWrite(html);
                }
            };
            // Google Map の API ライブラリをロードします
            load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
            waitLoaded();
        }
    });
})();

cybozu • 发表于 2019年05月21日 14:57

我能看到啊，估计国内网络无法加载吗？以下代码请参考

/*
 * 地図表示のサンプルプログラム
 * Copyright (c) 2013 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
    "use strict";
    // API キー
    var api_key = 'Your Google API key';
    // ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }
    // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
    kintone.events.on('app.record.detail.show', function(event) {
        var timeout = 10 * 1000; // ms
        var interval = 100; // ms
        var check = document.getElementsByName('map_latlng');
        // 住所情報を元に、地図を「住所」フィールドの下に表示します
        function setLocation_address() {
            var locationEl_address = kintone.app.record.getFieldElement('住所');
            if (locationEl_address.length === 0) { return; }
            var check_address = document.getElementsByName('map_address');
            //「map_address」という要素が存在しないことを確認
            if (check_address.length !== 0) { return; }
            // 地図を表示する div 要素を作成します
            var mapEl_address = document.createElement('div');
            mapEl_address.setAttribute('id', 'map_address');
            mapEl_address.setAttribute('name', 'map_address');
            // 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
            var elMap = kintone.app.record.getSpaceElement('Map');
            elMap.appendChild(mapEl_address);
            // Google Geocoder を定義します
            var gc = new google.maps.Geocoder();
            // 「住所」フィールドから値を取得します
            var rec = kintone.app.record.get();
            var addressValue = rec.record.住所.value;
            // Geocoding API を実行します
            gc.geocode({
                address: addressValue,
                language: 'ja',
                country: 'JP'
            }, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    // 地図要素のサイズを指定します
                    mapEl_address.setAttribute('style', 'width: 300px; height: 250px');
                    var point = results[0].geometry.location;
                    var address = results[0].formatted_address;
                    // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
                    var opts = {
                        zoom: 15,
                        center: point,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scaleControl: true
                    };
                    var map_address = new google.maps.Map(document.getElementById('map_address'), opts);
                    // マーカーを設定します
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map_address,
                        title: address
                    });
                }
            });
        }
        // Google Map がロードされるまで待ちます
        function waitLoaded() {
            setTimeout(function() {
                timeout -= interval;
                if ((typeof google !== 'undefined') &&
                    (typeof google.maps !== 'undefined') &&
                    (typeof google.maps.version !== 'undefined')) {
                    setLocation_address(); // 住所をもとに地図を表示
                } else if (timeout > 0) {
                    waitLoaded();
                } else {
                    // abort
                }
            }, interval);
        }
        if (check.length === 0) {
            // enable google maps to call document.write after onload event.
            var nativeWrite = document.write;
            document.write = function(html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) {
                    load(m[1]);
                } else {
                    nativeWrite(html);
                }
            };
            // Google Map の API ライブラリをロードします
            load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
            waitLoaded();
        }
    });
})();

引用追梦人的回复：
在这个里面，我看到这句话，您还可以参考“根据地址显示地图（中文页面准备中）”等范例，我点进去查看，发现并没有代码，代码部分在哪里查看呢

追梦人 • 发表于 2019年05月21日 14:52

在这个里面，我看到这句话，您还可以参考“根据地址显示地图（中文页面准备中）”等范例，我点进去查看，发现并没有代码，代码部分在哪里查看呢
引用 cybozu 的回复：
暂时没有这部分的案例呢。
cybozu • 发表于 2019年05月21日 14:34

暂时没有这部分的案例呢。
引用追梦人的回复：
我想使用kintone 来调用高德地图的api ，然后获取我当前的位置，我看到这一篇范例中可以参考根据地址显示地图，但是我到这一个案例中并没有找到案例的代码部分，是否还有关于使用 kintone 来获取 map 的案例呢
追梦人 • 发表于 2019年05月21日 14:27

我想使用kintone 来调用高德地图的api ，然后获取我当前的位置，我看到这一篇范例中可以参考根据地址显示地图，但是我到这一个案例中并没有找到案例的代码部分，是否还有关于使用 kintone 来获取 map 的案例呢