データテーブルによるマスター-詳細関係

概要

このチュートリアルでは、古典的な〜を作成する方法を示します マスター・ディテール 関係をAvonniの二つの データテーブル コンポーネント間で作成します。作成するコンポーネントでは：

• 1つのデータテーブル（「マスター」）がアカウントの一覧を表示します。

• 2つ目のデータテーブル（「ディテール」）が連絡先を表示します 現在選択されているアカウントに関連する.

ディテールテーブルのデータソースに反応型フィルターを設定することが重要です。このフィルターはマスターテーブルで選択された行に基づいて動的に更新され、関連する連絡先のみが表示されるようにします。これによりシームレスでインタラクティブなユーザー体験が生まれます。

以下の手順に従います：

• アカウントテーブル（マスターテーブルとも呼ばれます）を設定します。

• 連絡先テーブル（ディテール）を設定します。

• これら二つのテーブルを結びつける反応型フィルターを作成します。

• テスト

ガイド付きステップ

1

アカウントのデータテーブルを設定する（マスタ

• ページにAvonniのデータテーブルコンポーネントを追加します。

• データソースを設定してアカウントの一覧を表示するようにします（クエリを使用）。

2

連絡先のデータテーブルを設定する（ディテール

• ページにもう1つのAvonniデータテーブルコンポーネントを追加します。

• データソースを設定して連絡先を表示するようにします（使用するのは Avonni Query Data Source).

便利なヒント

次のものを使用できます カラムコンポーネント を使って二つのデータテーブルを横並びに表示できます。

3

反応型フィルターを作成する

• フィルター条件を追加：

  • フィールド： 先ほど追加した AccountId 連絡先オブジェクトのフィールド（または連絡先をアカウントにリンクするフィールド）。

  • 演算子： 選択 が.

  • 値： 固定値を入力しないでください。 代わりに、選択されたアカウントのIDを参照します：

    !AccountsTable.firstSelectedRow.Id

    • 説明：

      • !AccountsTable：あなたのアカウントデータテーブルコンポーネント（APIの 名前).

      • ）。firstSelectedRow：アカウントテーブルで現在選択されている行。

      • .Id：その選択された行の Id フィールド。

  • コンポーネント名とフィールド名を正しく使用していることを確認してください。

4

反応性をテストする

• ページをプレビューします。

• アカウントデータテーブルで異なるアカウントを選択してください。連絡先データテーブルは自動的に更新されるはずです。