カテゴリー内の他の記事

N:N(複数対複数)の関連レコード一覧を自作する

フォローする

(Author : Fuji Business International Mamoru Fujinoki)

はじめに

関連レコード一覧フィールドは関連性が1:Nであれば標準機能で設定できるのですが、テーブルの内容を条件とするような、関連性がN:Nの場合は標準機能で設定することができません。

こちらのQ&Aの回答のように詳細データのアプリを別個作成して対応するなどの方法もありますが、今回は、JavaScript APIを利用して関連レコード一覧のテーブルを作成、表示するカスタマイズ方法を説明したいと思います。

kintoneアプリの作成

サンプルのアプリとして、学習塾クラスの管理アプリを作成します。

生徒管理アプリとクラス管理アプリを作成して、生徒管理アプリから複数のクラスをルックアップ選択し、クラス管理アプリでは、そのクラスに登録した生徒を一覧表示するように設定します。1人の生徒が複数のクラスを選択でき、一つのクラスには複数の生徒が登録されるので、N:Nの関連性となります。

1.クラス管理アプリの作成

次の画像、テーブルを参考にクラス管理アプリの作成を行います。
studentsv2.png

フィールドの種類 フィールド名 フィールドコード 備考
レコード番号 クラス番号 class_no
文字列(1行) クラスコード class_code
文字列(1行) クラス名 class_name
スペース student_list テーブル表示スペース

2.生徒管理アプリの作成

次の画像とテーブルを参考に生徒管理アプリを作成します。
classv3.png

フィールドの種類 フィールド名 フィールドコード 備考
レコード番号 生徒番号 student_no
文字列(1行)

生徒コード

student_code
文字列(1行) 氏名 student_name
ルックアップ クラスコード class_code テーブル
文字列(1行) クラス名 class_name テーブル

classcode.png

コーディング

下記を参考にコーディングします。尚、テーブルのHTMLのクラス名は、スタイルをkintoneのスタイルと調和するため、こちらのプラグイン用スタイルシートを参考にしています。こちらのGitHub上のスタイルシートをダウンロードし、アプリに反映してください。

解説

レコード詳細表示およびレコード編集イベントのブロックに生徒一覧テーブル生成処理を記述します。

REST APIを使って、生徒管理アプリからクラス登録した生徒の情報を取得します。尚、queryのパラメータには、クラスコードが一致するレコードのみを取得するように指定します。取得するフィールドは、レコード番号、「生徒コード」、「生徒氏名」となります。

レコードの取得が成功した場合に生徒一覧のテーブルを生成します。

生徒コードをクリックすると該当の生徒レコードを表示するようにリンクを設定します。

取得した生徒レコードから、「氏名」を表示します。

尚、クロスサイトスクリプティングの対策として、特殊文字をエスケープ処理しています。

動作確認

「生徒管理アプリ」、「クラス管理アプリ」それぞれにいくつかデータを入力します。生徒管理アプリから、いくつかクラスをルックアップで登録し、「クラスアプリ管理」上に生徒一覧のテーブルが表示されていることを確認します。

students_tablev2.png

まとめ

こちらのQ&Aの回答にあるように詳細アプリを作成して、標準機能で対応も可能ですが、JavaScript APIでカスタマイズすれば、わざわざ詳細データ設定用のアプリを作成しなくて済みます。コード自体も意外とシンプルですので、是非試してみてください。

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

デモ環境

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

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

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

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

Avatar
大田 浩

デモ環境:https://dev-demo.cybozu.com/k/#/space/6/thread/6

へサンプルアプリを掲載していただくとありがたいです。

Avatar
cybozu Developer team

大田 浩 様
お世話になっております。
cybozu developer network運営事務局です。

コメントいただきありがとうございます。
ご提示いただいたdev-demo環境の適用の件とコミュニティの方に
ご投稿いただいた内容につきましては、早速検討を進めさせていただきます。

引き続きcybozu developer networkのほど、よろしくお願い致します。

Avatar
cybozu Developer team

大田 浩 様

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

こちらの記事内容をdev-demo環境へ適用させていただきました。
それと伴い、「kintone アプリで抽選カスタマイズ」こちらの記事も
dev-demoの環境に新しく追加しましたので、よろしければ、ぜひ試しみてください。

今後ともcybozu developer networkをよろしくお願いいたします。

Avatar
大田 浩

ありがとうございます。
デモ環境のコンテンツの充実は、カスタマイズ初心者にとって頼もしいものだと思います。

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