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

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

題材: レコード一覧とレコード詳細画面で条件書式を設定する

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

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

テーブルについて 

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

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

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

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

プログラム

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

全体の構成 

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

イベントの説明

このサンプルコードでは下記のように app.record.cereate.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') で作成でき、さらに innnerHTMLでボタンのテキストを指定、 onclick でボタン押下時の関数を指定しています。 

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

テーブルの構造について

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

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

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

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

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

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

• 例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行目を削除する。
  .push()で追加、というように、削除も .splice() という関数があります。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

行を追加する処理

上記の図の通り、1行1行が配列として表現されているため、行を追加するには配列に要素を追加することになります。
配列に対し、.push() を使うことで要素の追加ができます。

また、サンプルでは resetRowNo() という関数を定義して使っています。 resetRowNo() は繰り返し処理を使って行番号をリセットしています。
関数の定義については はじめようJavaScript第9回 JavaScriptの基本機能 関数を使う その1 で解説しています。

行を更新する処理

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

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

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

行を削除する処理

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

行の削除には .splice( ) を使うことで削除ができます。

行を番号をリセットする処理

行を追加や削除をするときのために行番号をリセットする関数を定義しています。更新や削除と同様.forEach()を使いすべての行の行番号を1から入力しなおす処理です。

最後に

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

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

デモ環境

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

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

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