カテゴリー内の他の記事

第6回 テーブルの値を利用する

フォローする

(著者:Cstap 落合 雄一

はじめに

今回は、JavaScript APIでのデータ取得の中で質問が多いテーブルについて扱ってみようと思います(^^)

~~~~~~~~~~~~~~

とある森の隅で小さなパン屋を経営しているJおじさんの焼くパンは、愛と勇気がたくさん詰まっていると子供たちから大評判です。しかしJおじさんは、街の平和を守る必要もあり、売上の管理までなかなか手が回りません。そこで困ったJおじさんは、心強いビジネスパートナーでもある友人のkintoneマンに相談して、kintoneのテーブルとJavaScript APIを使って日別売上集計を行うことに決めました!

(この物語はフィクションであり、実在の人物・団体・事件などとは一切関係ありません。)

~~~~~~~~~~~~~~

それでは、皆さんもkintoneマンと一緒にJおじさんを助けましょう!O( ・`ω´・)乂(・∀・` )O

アプリの準備

Jおじさんが作ったアプリの設定を見てみましょう。テーブルの作り方は、フォームに表(テーブル)を追加する を参考にしてください。

各フィールドとフィールドコードは以下のようになっています。毎度のことですが、フィールドコードはあとで使いますのでφ( ̄ー ̄ )メモメモ

フィールド名

フィールドタイプ

フィールドコード

日付

日付

日付

-

テーブル

order_items

-

スペース

sub_total_area

作成日時

作成日時

作成日時

更新日時

更新日時

更新日時

また、テーブル(order_items)フィールドの中はこのような感じです。

フィールド名

フィールドタイプ

フィールドコード

カテゴリ

ラジオボタン

カテゴリ

商品名

文字列(1行)

商品名

単価(円)

数値

単価

個数

数値

個数

レコードの取得

以下は、6月23日のパン屋さんの売上データです。このデータを利用してみる事にしましょう(^^♪

テーブルのレコードオブジェクトを取得する、といっても特に難しい事はありません。他のフィールドタイプと同じように、eventオブジェクトのrecord要素にテーブルに設定したフィールドコードを指定してください。つまり、以下のような形です。

var tableRecords = event.record.order_items.value;

これによってどのようなデータが取得出来るのかについては、フィールド形式 のページを確認しましょう。テーブルのレスポンスデータについては、カスタムフィールドのテーブルの欄に記載があります。

 

試しに、テーブルにある2件目のレコードの商品名を取得してみましょう(^^♪
ここで注意したいのが、配列の要素は0から数えるのでテーブルの2件目のデータは配列では1番目となる点です。

無事、2件目の商品名「食パン」が取得出来ました!\(*^▽^*)ノ

上記のキャプチャでも分かると思いますが、alertの出力はテーブルのレコードを表示するより先に出ています。つまり、'app.record.detail.show'イベントはテーブルのデータ表示より先に実行されているという事ですね。ここについては、今後取得したテーブルのデータを利用して高度な事をするときのために覚えておいた方が良いかも知れません。

カテゴリ別の合計を算出する

Jおじさんとしては、材料の仕入れなどの都合でパンとそれ以外の売れ行きを別々に知りたいという事なので、それぞれのカテゴリ別に売上を集計してスペースフィールドに表示するスクリプトを作ってみましょう。ここまではじめようシリーズを読んで下さった皆さんには詳しい説明はいらないかと思いますが、以下はそのサンプルです。

今回も簡単に出来ました!!

 Jおじさんの悩みもこれで解決できましたね。Σd=(・ω-`o)グッ♪

最後に

ここでは取り上げませんでしたが、テーブルのデータの集計には、自動計算機能を利用する方法もあります。そちらも是非マスターしておいた方が便利な機能ではありますが、今回のように何かの条件を加えて自由な計算をするにはJavaScriptを利用したほうが色々な事が出来るかと思います。目的に応じて必要なものを選べるようなkintoneマスターを是非目指していきましょう!

Let’s kintoneカスタマイズ\(^o^)/

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

<<第5回 レコードの値を利用してみよう(一覧画面編)  | 第7回 カスタマイズビューを利用してみよう>>

デモ環境

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

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

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

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

Avatar
h.kaburagi

テーブル内にボタンを設定して、その行内で計算させて表示するような使い方はできないでしょうか?

 

Avatar
cybozu Development team

鏑木様

記事のシナリオと異なる追加要望の場合は、今後はコミュニティの方に投稿をお願いいたします。

その上で、類似のご質問がコミュニティにございますのでご参考ください。

https://developer.cybozu.io/hc/ja/community/posts/206744026

ご要望と異なる場合は、上記の投稿と同様のイメージで、新規にコミュニティの方に投稿をお願いいたします。

Avatar
h.kaburagi

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

Avatar
近藤史人

テーブル内の金額をprice、テーブル外に合計を表示するamountというフィールドコードをつけて、下記のプログラムを書きましたが、金額の合計が文字タイプのように表示されます。

1行目に5を入れ、2行目に14を入れると0514となります。

何がおかしいのでしょうか?

ちなみに合計欄に表示もされず、confirmで確認しています。

(function() {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {

if (!event.record) {
return;
}

var record = event.record;
var table = record.order_items.value;
var subTotals = new Number();

confirm('price1= '+table[0].value['price'].value)
confirm('price2= '+table[1].value['price'].value)

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

subTotals = subTotals + table[i].value['price'].value;

}
confirm('subTotals= '+subTotals);

record.amount.value = subTotals;

confirm('amount= '+record.amount.value);

return event;
});

})();

 

Avatar
近藤史人

テーブルの中のpriceを整数に変換することでうまく動きましたが、この解決方法で正しいのでしょうか?

(function() {
"use strict";

var events = ['app.record.detail.show','app.record.create.submit',
'app.record.edit.submit'];

kintone.events.on(events, function(event) {

if (!event.record) {
return;
}

var record = event.record;
var table = record.order_items.value;
var subTotals = new Number();

for (var i = 0; i < table.length; i++) {
subTotals = subTotals + parseInt(table[i].value['price'].value);
}

record.amount.value = subTotals;
return event;
});

kintone.events.on(['app.record.edit.show', 'app.record.create.show'], function (event) {
event.record['amount'].disabled = true;
return event;

});
})();

Avatar
cybozu Development team

近藤史人 様

解決したとのことで何よりです。

 

整数処理のために、paeseInt()を用いたので問題ないかと思います。

 

なお、今後は技術的な質問に関してはcybozu developer コミュニティをご活用頂けると幸いです。

有志の開発者から回答が頂けるかと思います。

 

宜しくお願い致します。

Avatar
近藤史人

了解しました。

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