cybozu developer network

カテゴリー内の他の記事

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

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

(著者:kintone エバンジェリスト 村濱 一樹

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

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

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

______________JS___-_________.png

アプリの準備

フィールド名 フィールドタイプ フィールドコード 補足

追加_テキスト

文字列(1行)

追加_テキスト

 

追加_チェックボックス

チェックボックス

追加_チェックボックス

項目名は次のとおり。
  • チェック1
  • チェック2

-

スペース

-

要素 ID に「addSpace」を入力。

更新_行番号

数値

更新_行番号

 

更新_テキスト

文字列(1行)

更新_テキスト

 

更新_チェックボックス

チェックボックス

更新_チェックボックス

項目名は次のとおり。
  • チェック1
  • チェック2

-

スペース

-

要素 ID に「updateSpace」を入力。

削除_行番号

数値

削除_行番号

 

-

スペース

-

要素 ID に「deleteSpace」を入力。

テーブル

テーブル

テーブル

 


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

フィールド名 フィールドタイプ フィールドコード 補足

行番号

数値

行番号

 

テキスト

文字列(1行)

テキスト

 

テーブルについて 

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

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

  1. テーブルデータの取得
    通常のフィールドのように kintone.events.on() を使って、「詳細画面が表示されたとき」の イベント でテーブルのフィールドのデータを取得することができます。イベントの定義の仕方などは第13回, 第14回を振り返ってみましょう。
  2. テーブルデータの参照・編集
    データを取得したら、データを編集してテーブルフィールドに反映させることができます。テーブルは構造が少し複雑で、下記の様になっています。API自体の詳細はこちらを参考にしてください。
    ※この記事ではAPI自体の解説ではなくプログラムを中心に解説します。
テーブル SUBTABLE
  • 取得時のレスポンスのデータ
"<フィールドコード>": {
    "type": "SUBTABLE",
    "value": [
        {
            "id": "48290",
            "value": {
                "文字列__1行__0": {
                    "type": "SINGLE_LINE_TEXT",
                    "value": "サンプル1"
                },
                "数値_0": {
                    "type": "NUMBER",
                    "value": "1"
                },
                "チェックボックス_0": {
                    "type": "CHECK_BOX",
                    "value": [
                        "選択肢1"
                    ]
                }
            }
        },
        {
             "id": "48291",
             "value": {
                 "文字列__1行__0": {
                     "type": "SINGLE_LINE_TEXT",
                     "value": "サンプル2"
                 },
                 "数値_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が入っています。
______JavaScript_16_-kintone-JavaScript___________________________________.png 

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

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

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

mceclip0.png

  • 例1: 1行目の[テキスト]フィールドの値を取り出す
    コードは下記のようになります。値までたどり着くまでに少し長いので解説します。

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

    record に.(ドット)つなぎでテーブルのフィールドコードを指定し、tableValue にテーブル自体のデータを格納します。

    先述の図と照らし合わせるとわかりますが、record.テーブル.valueの中身は配列となっています。
    1行目を取得する場合は、下記のように[0] と指定します。2行目なら[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でエラーが出てしまいますので注意してください。

 

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

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

テーブルの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/

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

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
kimiko0217

お世話になります。

デモ環境にアクセスすると「権限がありません。」と表示されます。

ご確認お願いいたします。

Avatar
cybozu Development team

kimiko0217 様

お世話になっております。cybozu developer network 事務局です。

こちらで確認したところ、デモ環境のユーザーに権限が付与されておりませんでした。
ご迷惑をおかけして申し訳ございません。
修正し、権限を付与いたしましたので再度ログインして確認していただくことは可能でしょうか?
 
お手数をおかけいたしますがよろしくお願いいたします。
Avatar
kimiko0217

閲覧でき、動作も確認することができました。
自分で作成したものと比較して、サンプルでの正解と答え合わせできると安心です。
ありがとうございます!

Avatar
cybozu Development team

kimiko0217 様

お世話になっております。cybozu developer network 事務局です。

デモ環境を閲覧できたとのことで安心いたしました!

今後ともよろしくお願いいたします。

Avatar
YK

第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③(テーブル操作)

等、デモ環境のアプリですが、

アプリそのものの使用は出来るのですが、設定の変更が出来ない(歯車マークが表示されない)ので、JSプログラム編集のプラグインの操作自体ができず、ご紹介のプログラムをいじりながら学習することができません。

何か方法があるのでしょうか。

Avatar
cybozu Development team

YK 様

お世話になっております。cybozu developer network 事務局です。

公開しているデモ環境は、サンプルの動きを確認していただくためのものであり、
コードの編集などはできません。

コードを書きながらの学習には、kintone 開発者ライセンス をご利用ください。

ご確認よろしくお願いいたします。

Avatar
YK

開発者ライセンスを取得し、いろいろとカスタマイズの練習が出来るようになりました。ありがとうございました。

Avatar
ようしゅう

問題:「Cannot read property 'appendChild' of null」

解決方法:テーブルのフォームでボタンを置く「スペース」を作り、その要素IDをプログラムどうりに設定する(下記の写真)

意見:最初にこの「スペース」フォームも設置必要とのことを伝えたらもっと理解しやすいでしょう。

 

Avatar
cybozu Development team

ようしゅう 様

お世話になっております。cybozu developer network 事務局です。

フィードバックをありがとうございます。

内容を確認し対応させていただきます。

Avatar
YK

「アプリの準備」で、チェックボックスを、追加、更新、テーブルなどにに用意する記載がありますが、

一方「プログラム」セクションのコード方では、チェックボックスの処理について記載がありません。

このまま実行すると、

「 event.record['テーブル'].value[1]['チェックボックス'] が不正です。」

となって、エラーとなると思いますが、いかがでしょうか。

Avatar
cybozu Development team

YK 様

お世話になっております。
cybozu developer network 運営事務局でございます。

フィードバックをいただき、ありがとうございます。
社内にフィードバックし、対応させていただきます。

今後ともよろしくお願いします。

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