カテゴリー内の他の記事

kintoneにおけるテーブル操作の基本(行の追加・更新・削除)

フォローする

kintoneで便利なテーブルですが、JavaScriptカスタマイズで操作する場合は入れ子構造が深くて少々複雑ですので、構造や操作方法について解説します。

テーブルの操作の仕方

テーブルの構造

テーブルの構造は少々複雑ですが、どのような構造になっているか下記の図に示しましたので困ったときに参考にしてください。
特に、テーブルのオブジェクトの中には3階層にわたって value がありますので注意してください。
実際のオブジェクトを示すとこのようになります。(テーブル以外のフィールドは省略)

_____5_2x-100.jpg

 

 

サンプルアプリ:テーブル操作

テーブルをJavaScriptカスタマイズで操作するための、デモ環境にサンプルアプリを用意してみました。

デモ環境

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

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

このアプリでは、「追加」「更新」「削除」ができます。

  • 追加ボタンを押したとき・・・「追加_テキスト」「追加_チェックボックス」フィールドにいれた値をテーブルに追加する
  • 更新ボタンを押したとき・・・「更新_行番号」で指定したテーブルの対象の「テキスト」フィールドを「更新_テキスト」「更新_チェックボックス」に入れた値に更新する
  • 削除ボタンを押したとき・・・「削除_行番号」で指定したテーブルの対象の行を削除する

 

 

 

このJavaScriptカスタマイズは、「スペースフィールドへボタンを設置する」部分と「テーブルの行追加・更新・削除」部に分かれます。
今回はテーブルを中心に解説しますので、スペースフィールドの扱い方は下記の記事を参考にしてください。

第3回 レコード詳細にもボタンを設置しよう!

________________cybozu_developer_network.png

以下に、それぞれの部分ごとに解説をします。

ここでは、スペースフィールドへのボタン設置と、ボタン押下時の設定をそれぞれいれています。
例えば下記は「追加ボタン」に後続に宣言している「行追加」の関数を指定しています。

テーブルは配列で表現されていますので、JavaScriptで言うと配列の最後に値を追加する処理を書きます。
配列に行を追加するには .push() を使います。
.push() の中にはテーブルの行に相当する、フィールドコードやtype, valueも指定する必要があります。

  • テーブルへ1行追加するためのコード(例)
  • 行追加のイメージ

    _____6_2x-100.jpg
  • サンプルアプリのコードの追加部の解説
    前述の例の通り.push()をつかって行を追加します。
    このサンプルでは、追加/更新/削除すべてのタイミングで resetRowNo() という関数を読んで行番号をリセットしています。(詳しくは後述)
    ________________cybozu_developer_network.png

行更新処理 

行を更新する場合は、大まかにわけて「更新したい行を探す」「行の値を書き換える」の2つの処理が必要です。
「更新したい行を探す」方法はいくつかありますが、今回はループして該当の行の場合は書き換えるという処理にしています。

________________cybozu_developer_network.png

 

行削除処理 

追加と同じく、JavaScriptの配列操作によって配列を一部削除する必要があります。
配列の一部要素を削除するには、 .splice() を使うことでできます。

  • テーブルの行を削除するためのコード(例)
    .splice() は2つの引数が必要です。
    • 1つ目の引数: 何番目の配列か
    • 2つ目の引数: 何個消すか
    二つ目の行を1行削除するには下記の通りになります。
  • 行削除のイメージ

    _____7_2x-100.jpg
  • サンプルアプリのコードの削除部の解説
    更新のときのように.forEach()でループさせて判定処理を行い、対象の行を.splice()を削除する流れになっています。
    ________________cybozu_developer_network.png

行番号リセット処理 

今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットするようにしています。
行番号更新と削除と同じように.forEach()で繰り返し処理をして、番号を書き換えています。
※リセット処理は各追加/更新/削除関数で呼ばれるため、recordデータは引数に渡すようにしています。

________________cybozu_developer_network.png

 

補足

保存時に処理を実行させたい場合

今回のサンプルアプリでは、編集画面でボタンを押したときに動作するものなので、
kintone.app.record.get() / kintone.app.record.set() をつかっています。
保存時に処理を実行させる場合は、レコード保存時のイベントハンドラを使って、
引数eventに渡されるrecordを編集すればOKです

.forEach() などの繰り返し処理について

通常のfor文よりも、.forEach()や.map(), .reduce() などの繰り返し処理が便利ですので、下記リンクを参考にしてください。
forEach, map, filterなどをつかってkintoneのrecords配列をもっと上手に扱う

テーブルを一括削除したい場合

テーブルは配列でできていますので、配列の中身を空にすれば一括で削除できます。

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

デモ環境

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

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

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

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

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