kintone の 関連レコード一覧 、便利な機能ですよね。

例えば顧客アプリの詳細画面にさまざまなアプリの関連レコード一覧を表示し、その顧客に関する受注やお問合せなど様々なアプリの情報を集約して表示する、といった事が可能です。


ただ、関連レコード一覧の対象となるのはレコードのみであるため、kintoneの基本機能だけだと他のアプリのテーブルに登録した行を関連レコードに表示することはできません。

今回はカスタマインを使う事で、他のアプリのテーブル行を”関連レコードのように”表示する方法をご紹介します。


例の中では、「発送依頼」アプリのテーブルを「発送依頼一覧」アプリのスペースにまとめて表示します。


表示するための処理の順番は次の通りです。

  1. 「発送依頼一覧」アプリの詳細画面が表示されたら「発送依頼」アプリからテーブルが入ったレコードを取得する

  2. 1で取得したレコードからテーブルすべてをレコードとして取り出す

  3. 2で取り出したレコードを並べ替える(並べ替える必要がなければ不要です)

  4. 3で並べ替えたレコードをスペースフィールドに表示する


アプリの設定

今回のカスタマイズでは3つのアプリを使用します。


顧客リストアプリ


※このアプリの作成にはkintone アプリストア にある「顧客リスト」アプリを使用しています

※フィールド名とフィールドコードは同じものを設定しています

※設定情報が必要なフィールドのみ以下に記載しています

フィールドコード

フィールドタイプ

備考

会社名

文字列(1行)

必須入力にする

値の重複を禁止する

郵便番号

文字列(1行)


住所

文字列(1行)


電話番号

文字列(1行)



発送依頼アプリ


※フィールド名とフィールドコードは同じものを設定しています

※設定情報が必要なフィールドのみ以下に記載しています

フィールドコード

フィールドタイプ

備考

発送依頼コード

文字列(1行)


出荷予定日

日付

必須入力にする

発送先

ルックアップ

必須入力にする

顧客リストアプリから会社名を取得

郵便番号

文字列(1行)

ルックアップのほかのフィールドのコピーで取得

出荷一覧テーブル

テーブル


コード

文字列(1行)

出荷一覧テーブル内フィールド

※自動計算で発送依頼コードを指定

商品コード

文字列(1行)

出荷一覧テーブル内フィールド

小計

計算

出荷一覧テーブル内フィールド

式:価格 * 数量


発送依頼一覧アプリ

こちらがCustomineでのカスタマイズ対象となるアプリです。

「発送日」と「送付先」を指定してレコードを保存すると、詳細画面で「発送依頼」アプリのレコードを取得し、取得されたテーブルの行が関連レコードの様に表示されます。


※フィールド名とフィールドコードは同じに設定しています

フィールドコード

フィールドタイプ

備考

発送日

日付

必須入力にする

送付先

ルックアップ



スペース

下記画像を参考に要素IDを設定する


スペースフィールドの要素IDは「list」と設定しました。


Customineでのカスタマイズ

「発送依頼一覧アプリ」アプリのカスタマイズを作成します。


「発送依頼一覧」アプリの詳細画面が表示されたら「発送依頼」アプリからテーブルが入ったレコードを取得する

まず、「発送依頼」アプリからテーブルが入ったレコードを取得します。


やること「条件を組み立ててレコードを取得する」、条件「詳細画面を表示した時」を選択します。


検索条件は次の画像のように条件を指定します。


これは、発送依頼アプリの「出荷予定日」フィールドの値が、発送依頼一覧アプリの「発送日」フィールドの値と一致し、かつ発送依頼アプリの「発送先」フィールドの値が発送依頼一覧アプリの「送付先」フィールドの値と一致しているレコードを取得する、という内容です。


なお、ここでは二つのフィールドを条件としたため「条件を組み立ててレコードを取得する」を選択しましたが、レコードを取得する条件によっては次のような「やること」で実現可能なこともあります。

レコードの取得条件によってどの「やること」を使用するのか使い分けてください。「やること」の一例を次に示します。

全レコードを取得する

キーを指定してレコードを取得する


レコードからテーブルすべてをレコードとして取り出す

次に、アクション番号1で取得したレコードからテーブルを取り出します。


やること「他のレコード内のテーブルをレコードとして取得する」、条件「他のアクションの実行が完了した時」を使用します。


なお、「他のレコード内のテーブルをレコードとして取得する」を使うと、テーブルの内容をカスタマイン上でのレコードと同じ形式で取得する事ができるようになっています。
実際、このアクションの後に様々なレコードに対する「やること」を使って、テーブルのテーブル行やフィールドの情報を処理する事が可能となります。

テーブルを含むレコードは、レコードを取得するアクションである「1」、テーブルには「出荷一覧テーブル」を指定しました。

また、空の行は表示したくないので「空の行は取得しない」、取得したレコード全てのテーブルをまとめて取得したいので「すべてのレコードのテーブルを結合する」を指定します。


なお、レコードの取得が完了してからテーブルを取り出したいので「他のアクションの実行が完了した時」を指定します。

アクションには「1」を指定しました。


取り出したレコードを並べ替える(並べ替える必要がなければ不要です)

続いて、アクション番号2で取り出したテーブル行を並べ替えます。


やること「レコードを並べ替える」、条件「他のアクションの実行が完了した時」を使用します。


レコード選択アクションは、並べ替えの対象としたいアクション番号「2」です。

もし並べ替えの必要がなければこのアクションを省いていただいて問題ありません。

今回は、商品コード順に並べたいので、キーとなるフィールド(1)に「商品コード」を指定しました。


また、レコードからテーブル行の取り出しが完了してから並べ替えたいので「他のアクションの実行が完了した時」を指定します。

アクションには「2」を指定しました。


並べ替えたレコードをスペースに表示する

最後に、並べ替えたテーブル行(レコードに変換済み)をスペースに表示します。


やること「レコードの一覧をスペースに表示する」、条件「他のアクションの実行が完了した時」を使用します。


表示する場所は、あらかじめスペースフィールドに要素IDを指定しておいた「list」です。

レコードは、並べ替えた後のアクション番号「3」、表示するフィールドには下記のフィールドを指定します。

  • コード

  • 商品コード

  • 商品名

  • 数量


レコードへのリンクは、「レコード詳細画面」を選んでおきます。これにより表示されたリンクアイコンをクリックすると関連レコード一覧と同じように各行の詳細画面が開きます。


そして、レコードの並べ替えが終わってから表示したいので「他のアクションの実行が完了した時」を指定します。

アクションには「4」を指定しました。


以上でカスタマイズは完了です。

「kintoneアプリへ登録」し、実行を確認してみてください。


まとめ

関連レコード一覧のように、テーブルの値が表示されたでしょうか?

なお、元のフィールドがルックアップフィールドやリンクであっても、ただの文字列として表示されますので、その点ご注意ください。


また、ご不明点等ございましたら、チャットにてご質問ください!

Customineドキュメントサポートページも、ぜひご活用ください。