後で追加した計算フィールドに一括で値を反映する方法

フォローする

(著者:ラジカルブリッジ 斎藤

kintoneエバンジェリストに指名いただきましたラジカルブリッジの斎藤と申します。
当社Webサイト内の「kintoneブログ」でもkintoneに関する様々な小ネタを発信しておりますが、今後はこちらのdeveloper networkでも情報発信をしていきたいと思っていますのでどうぞ宜しくお願いいたします。

今回は、運用中のアプリに新たに「計算」フィールドを追加した際に、JavaScriptを用いて一括でフィールドの更新行う方法を紹介します。

kintoneは、一度作成したアプリでも後で簡単にフィールドを追加することができるため、最初に全ての要件が揃っていなくてもまずは作り始められるというのが素晴らしいところです。

しかしながら、数値フィールドの計算結果を格納するような計算フィールドを後で追加した場合、そのままでは既存のレコードには自動的に計算結果が格納されません。

レコードの詳細画面を開いて、何も変更せずに再保存することで計算フィールドに計算結果を反映することはできますが、大量のレコードが登録されているような場合、全てのレコードに対してこのような作業を行うのはベターなやり方ではありません。

そこで、ボタンを一回押すだけで一括で値を反映させてみたいと思います。

サンプルイメージ

今回ご紹介するJavaScriptはどんなアプリにでも対応できるのですが、ここではある会合の「合計金額」と「参加人数」を記録するアプリを想定してみましょう。下の図はその一覧画面を表示したもので、3レコード登録されています。

ここで参加者一人当たりの金額を計算で出してみたくなり、「一人当たりの金額」という計算フィールドを追加しました。もちろん計算式は「合計金額 / 参加人数」です。(フィールドのタイトルとフィールドコードを揃えています)

下の図は、「一人当たりの金額」フィールドを追加した直後の一覧画面です。

ご覧のように、計算フィールドを追加しただけでは、まだ計算結果が格納されていません。
このサンプルでは3レコードしかありませんので、一つ一つのレコードを再保存することで計算結果を反映することもできるのですが、これが数百レコードある場合は作業する気にもなりません。。

そこで今回は複数レコードを空更新することで一括更新をしたいと思います。

複数レコードに空更新を行う

あとは、このパラーメータをもとにPUTメソッドでレコードを更新すれば更新完了です。
尚、このスクリプトは「レコード番号」フィールドのフィールドコードが、既定値である「レコード番号」になっていることを前提としています。

※このままスクリプトを作成すると100レコードまでのアプリの対応となります。100レコードより多い場合はこちらをご参照ください。

一括更新をやってみよう

JavaScriptでレコード一覧画面にボタンを配置して、一括更新をしてみましょう。

このボタンをクリックして空更新を行う関数を呼び出します。
以下の図のように「一人当たりの金額」フィールドに正しい計算結果が格納されていることがわかります。

とっても楽チンですね!

kintoneアプリの運用を続けているとフィールドの追加は必ず発生してくるものですが、今回ご覧いただいたような計算フィールドへの一括反映処理が必要となる場面が必ず出てくるかと思います。このスクリプトはどんなアプリにでも対応可能ですので、同様の場面に遭遇した際にぜひご活用ください。

このTipsは、2014年4月版で確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/71/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
hatano

はじめましてKintoneを利用しはじめて2か月目のJS初心者です。
こちらを見て作成してみましたがうまく動きません、どこがおかしいのでしょうか?
お手数ですがご教授頂けますでしょうか、よろしくお願いいたします。

(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.innerHTML = '更新ボタン';

    // ボタンクリック時の処理
    myIndexButton.onclick = function() {

    kintone.api('/k/v1/records', 'GET', {app: appId}, function(resp) {

            //////// 空更新オブジェクトの生成
            var param = {
                "app": appId,
                "records": []
            };

            for (var i = 0; i < resp['records'].length; i++) {
                param['records'][i] = {
                    "id": resp['records'][i]['売上NO']['value'],
                    "record": {}
                }
            }

    }

    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});

})();

Avatar
cybozu Development team

hatanoさん
cybozu.com developer network事務局です。
どのようなエラーになりますでしょうか?

Avatar
鈴木佑介

hatanoさん
はじめまして。
鈴木と申します。

// ボタンクリック時の処理
myIndexButton.onclick = function() {

// 下記を追加 -----
var appId = kintone.app.getId();
// -----
kintone.api('/k/v1/records', 'GET', {app: appId}, function(resp) {

としたらどうでしょうか?

Avatar
川合アサノリ

デモで使われてるコードがほしい

Avatar
吉村啓治郎

はじめまして

Kintone5か月、JS3か月の初心者です。

 

上記のサンプルと、その他のページのサンプルをつなぎ合わせて以下のコードを作りました。

一応ボタンは表示され、レコードを投げるまではできているようですが、データの更新はされていないみたいです。

(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.innerHTML = '再計算';

 

        // ボタンクリック時の処理

        myIndexButton.onclick = function() {

            var appId = kintone.app.getId();

            kintone.api('/k/v1/records', 'GET', {app: appId}, function(resp) {

                 //////// 空更新オブジェクトの生成

                 var param = {

                     "app": appId,

                     "records": []

                 };

                 for (var i = 0; i < resp['records'].length; i++) {

                     param['records'][i] = {

                         "id": resp['records'][i]['レコード番号']['value'],

                         "record": {}

                     }

                 }

                    kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', param, function(resp) {

                     // success

                     console.log(resp);

                 }, function(error) {

                     // error

                     console.log(param);

                     console.log(error);

                 });

             });

         }

         kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);

     });

 })();

 

IEの開発者ツールを開くと、コンソールに次のようなメッセージを含んだレコードが出力されています。

             messages: [

               0: "更新するレコードを、「id」か「updateKey」のいずれかのパラメーターで指定する必要があります。",

                length: 1

             ]

    id: "1505999166-1853162239",

       message: "入力内容が正しくありません。"

 

送ったレコードの書式が間違っているのでしょうか?

 

 

 

吉村啓治郎により編集されました
Avatar
斎藤 栄

吉村さん
初めまして。著者の斎藤です。

本記事では1レコードずつの更新ではなく、「一括更新」を想定した空更新オブジェクトの生成を行っていますので、
APIのURIは '/k/v1/record' ではなく '/k/v1/records' にする必要があります。
(最後にsがつきます)

kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', param, function(resp) {
                            ↓
kintone.api(kintone.api.url('/k/v1/records', true), 'PUT', param, function(resp) {

いかがでしょうか?

レコードの一括更新については、下記リファレンスもご確認いただければと思います。
https://cybozudev.zendesk.com/hc/ja/articles/201941784-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B4%E6%96%B0-PUT-#step2

Avatar
吉村啓治郎

斎藤さん。

無事、動作しました。

ご指摘のリファレンスも見ながら作成したのですが、URIの記述の違いに気付かずに1レコード用のものをコピー&ペーストしてしまったようです。

修正したプログラムを実行して再計算ボタンを押した後、F5を押して再読み込みをしたら、計算結果が更新されました。

ありがとうございました。

Avatar
斎藤 栄

吉村さん

無事動いたようで何よりです。
kintone REST APIのGET, POST, PUTでは record とrecords を間違えることがよくあるので一目でわかりました(^^;

JSを始めてまだ間もない様子ですが、JSそのもののつまづきポイントとkintoneならではのつまづきポイントがあるので
また何かありましたら投稿いただければと思います。

ログインしてコメントを残してください。
Powered by Zendesk