はじめようJavaScript第16回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう④（テーブル操作）

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

（著者：kintone エバンジェリスト 村濱 一樹）

題材: テーブル操作（行の追加・更新・削除）を行う

今回は kintoneにおけるテーブル操作の基本（行の追加・更新・削除）のサンプルプログラムからテーブル内のチェックボックスフィールドを省いた簡易的なアプリを用意しましたのでそれをつかって学んでいきましょう。 テーブルは非常に便利な機能ですので、JavaScriptカスタマイズもできるようになるともっとやれることの幅が広がります。

サンプル記事と少し重複している内容もあると思いますがより細かく説明します。 

アプリの準備

フィールド名	フィールドタイプ	フィールドコード	補足
追加_テキスト	文字列（1行）	追加_テキスト
追加_チェックボックス	チェックボックス	追加_チェックボックス	項目名は次のとおり。 チェック1 チェック2
-	スペース	-	要素 ID に「addSpace」を入力。
更新_行番号	数値	更新_行番号
更新_テキスト	文字列（1行）	更新_テキスト
更新_チェックボックス	チェックボックス	更新_チェックボックス	項目名は次のとおり。 チェック1 チェック2
-	スペース	-	要素 ID に「updateSpace」を入力。
削除_行番号	数値	削除_行番号
-	スペース	-	要素 ID に「deleteSpace」を入力。
テーブル	テーブル	テーブル

テーブル内のフィールドは以下のとおりです。

フィールド名	フィールドタイプ	フィールドコード	補足
行番号	数値	行番号
テキスト	文字列（1行）	テキスト

テーブルについて 

テーブルの機能自体については下記のページ等を参考にしてください。

• フォームに表（テーブル）を追加する
• 入力項目数が増減する場合に 便利なテーブル機能を(PDF)

テーブルをJavaScriptカスタマイズするには

1. テーブルデータの取得
   通常のフィールドのように kintone.events.on() を使って、「詳細画面が表示されたとき」の イベント でテーブルのフィールドのデータを取得することができます。イベントの定義の仕方などは第13回, 第14回を振り返ってみましょう。
2. テーブルデータの参照・編集
   データを取得したら、データを編集してテーブルフィールドに反映させることができます。テーブルは構造が少し複雑で、下記の様になっています。API自体の詳細はこちらを参考にしてください。
   ※この記事ではAPI自体の解説ではなくプログラムを中心に解説します。

テーブル

SUBTABLE

取得時のレスポンスのデータ "<フィールドコード>": { "type": "SUBTABLE", "value": [ { "id": "48290", "value": { "文字列__1行__0": { "type": "SINGLE_LINE_TEXT", "value": "サンプル１" }, "数値_0": { "type": "NUMBER", "value": "1" }, "チェックボックス_0": { "type": "CHECK_BOX", "value": [ "選択肢1" ] } } }, { "id": "48291", "value": { "文字列__1行__0": { "type": "SINGLE_LINE_TEXT", "value": "サンプル２" }, "数値_0": { "type": "NUMBER", "value": "2" }, "チェックボックス_0": { "type": "CHECK_BOX", "value": [ "選択肢2" ] } } } ] }

プログラム

プログラムは下記です。少しずつピックアップして、内容を解説していきます。

全体の構成 

このJavaScriptカスタマイズは、大まかに分けると「スペースフィールドにボタンを設置する」部分と「テーブルの行追加・更新・削除」部分に分かれます。以降、下記のように分割して説明していきます。

• スペースフィールドにボタンを設置する処理

• テーブルの行を追加する処理

• テーブルの行を更新する処理

• テーブルの行を削除する処理

• テーブルの行番号を更新する処理

イベントの説明

このサンプルコードでは下記のように　["app.record.create.show", "app.record.edit.show"] とイベントが指定されているので、
「レコード追加画面が表示された後」「レコード編集画面が表示された後」にプログラムが動作します。

スペースフィールドへボタン設置の説明

はじめようkintone API 第3回 レコード詳細にもボタンを設置しよう！ にも説明がありますが、
ボタンを設置する方法について解説します。

今回のサンプルアプリのようにフォーム内にボタンを設置する手順は下記の通りです。手順1はkintoneフォーム設定画面、手順2,3,4はJavaScriptカスタマイズです。 

1. 任意の場所にスペースフィールドを設置し、[要素ID]を指定する（スペースフィールドはデフォルトで[要素ID]は空欄なので注意）
2. kintone.app.record.getSpaceElement('要素ID') を使ってスペースフィールドの要素を取得する
3. ボタン要素を作成する
4. 取得したスペースフィールドに対して.appendChild() を使い、作成したボタン要素を挿入する 

下記部分は追加ボタンを設置するためのコードです。

スペースフィールドの要素を取得します。

ボタン要素は document.createElement('button') で作成します。

innerHTMLでボタンのテキストを指定し、onclick でボタン押下時に呼び出す関数を指定します。

スペースフィールドにボタン要素を挿入します。

テーブルフィールドの操作

テーブルの構造について

ここから先はテーブル操作について詳細を説明します。

前提として、テーブルフィールドのデータは、配列で表現されています。
配列の中にさらにオブジェクトが入っており、その中にテーブルの中のフィールド情報やvalueが入っています。
 

テーブルのデータの配列とオブジェクト、その扱い方の例 

第12回kintone JavaScript カスタマイズでkintoneのデータを見てみる で配列とオブジェクトについて触れていますが、
テーブルも配列とオブジェクトで構成されています。
実際にデータを取り出したり、変更したりするには下記のようにします。

例）テーブルが下記の状態の場合

• 例1: 1行目の[テキスト]フィールドの値を取り出す
  コードは下記のようになります。値までたどり着くまでに少し長いので解説します。
  
  まず、 kintone.app.record.get().record で現在開いている画面のレコードを取得し、定数 record に格納します。
  
  record に.（ドット）つなぎでテーブルのフィールドコードを指定し、tableValue にテーブル自体のデータを格納します。
  
  先述の図と照らし合わせるとわかりますが、record.テーブル.valueの中身は配列となっています。
  1行目を取得する場合は、下記のように[0] と指定します。２行目なら[1], 3行目なら[2]となり、0からスタートすることを覚えておいてください。
  最後に、[テキスト]フィールドの値を取得します。
  先述の図と照らし合わせながら.valueまでドットでつなげることでフィールドの値を取得できます。

• 例2: 2行目の[テキスト]フィールドの値を変更する
  要領としては例1と似ています。
  row.value.テキスト.valueに、改めて値を代入し、最後に kintone.app.record.set() をすることで書き換えることができます。

• 例3: 3行目を追加する。追加するものは[行番号]: 3, [テキスト]: テキスト3とする
  「行を追加する」ということは、JavaScript上では「配列を追加する」ということになります。.push() という関数で配列の要素を追加することができます。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push .pushを使い、上記のように1行分のオブジェクトを追加させます。このとき、Typeも指定しないとkintoneでエラーが出てしまいますので注意してください。

• 例4: 2行目を削除する。
  .splice() という関数で行（配列の要素）を削除します。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

テーブルの行を追加する処理

下記は行を追加する関数です。

テーブルの1行1行は配列の要素なので、行を追加するためには配列に要素を追加することになります。
配列に対し、.push() を使うことで要素の追加ができます。

kintone.app.record.get().record で、現在開いている画面のレコードを取得します。

入力された文字列を取得し、addText に格納します。

record.テーブル.valueに、新しい行を.push()します。
テーブルに必要な[行番号]フィールドと[テキスト]フィールドの情報を渡しています。

後述の「行番号更新関数」で行番号を更新します。

ここまでの変更点をkintoneに反映させます。

また、サンプルでは関数を定義して使っています。関数の定義については はじめようJavaScript第9回 JavaScriptの基本機能 関数を使う その1 で解説しています。

テーブルの行を更新する処理

下記は行を更新する関数です。行を追加する処理と同様、同じ要領で関数に行を更新する処理を定義します。

入力された文字列と行番号を取得し、targetRowNo に格納します。

forEach を利用して、テーブルの行数分ループ処理します。
ループ中、指定された行番号と同じ行のときだけ[テキスト]フィールドの値を変更します。

このサンプルではループ処理（繰り返し処理）にforEachというものを使っています。
forとはちがい、何回繰り返すのか、を指定せずとも行数があるだけ繰り返されるので便利です。

forEachについてはこちらの記事でも使い方を解説しています。

テーブルの行を削除する処理

下記は行を削除する関数です。行を更新する処理と同様に、forEachでループし、該当の行は削除するという流れになっています。

削除する行番号を取得し、targetRowNo に格納します。

forEach を利用して、テーブルの行数分ループ処理します。ループ中、指定された行番号と同じ行を削除します。

行の削除には .splice() を使います。

テーブルの行番号を更新する処理

下記は行番号を更新する関数です。
行を追加したり削除したりすると行番号がずれるため、行番号を振り直す処理が必要です。
行の更新や削除の処理と同様.forEach()を使い、行番号を1から順番に振り直します。

最後に

今回はテーブルの作成・更新・削除やそのためにボタンを設置するなど、複合的なサンプルになっており行数も多いですが、一つ一つは難しくはなく、少しずつ積み重ねれば書けるものだと思います。たとえば、追加だけ試す、ボタンを表示するところだけ試す、など、気になる部分だけでも少しずつ試してもらえればと思います。

この記事は、2022年6月版 kintoneで確認したものになります。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/316/

ログイン情報はcybozu developer network デモ環境で確認してください。

<< はじめようJavaScript第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③（経過年数を表示する） |