リアクティブな地図とデータテーブル

概要

この例は、リアクティブコンポーネントの日常的な使用例を示しています：Avonniの データテーブル とAvonniの マップ を接続してインタラクティブなビジュアライゼーションを作成します。データテーブルでレコードを選択すると、どのように 自動的に 対応する場所が表示されるようにマップが更新されるかがわかります。

作成するもの

主に2つの要素を持つシンプルなコンポーネントを作成します：

• データテーブル： アカウントの一覧を表示します。

• マップ： データテーブルで 現在選択されている アカウントの場所を表示します。

仕組み

この相互作用の鍵は、マップコンポーネントのデータソースに対する リアクティブフィルター です：

1. データテーブル： データテーブルはアカウントレコード（例：クエリ）を取得するデータソースで構成され、 住所／位置情報を含みます （例：請求先住所、請求先市区町村、請求先州／都道府県、請求先郵便番号、請求先国）。

2. ユーザーの選択： ユーザーがデータテーブルでアカウントを選択します。

3. firstSelectedRow 更新： データテーブルの firstSelectedRow プロパティは、新しく選択されたアカウントを自動的に反映します。

4. リアクティブフィルター： マップコンポーネントのデータソースは、データテーブルの firstSelectedRow.Id プロパティを参照するフィルターで構成されています。 これがリアクティブなリンクです。

5. 自動マップ更新： リアクティブフィルターのため、 firstSelectedRow が変わると、マップのデータソースはSalesforceに再クエリを実行し、 新しく選択された アカウントの位置データを取得してマップ表示を自動的に更新します。

これにより、アカウントを選択すると瞬時にその場所がマップに表示されるシームレスなユーザー体験が生まれます。

---

ガイド付きステップ

データテーブルとマップの間にリアクティブな接続を作成するには、次の手順に従ってください：

1

レイアウトの準備

2カラムレイアウト： 動的コンポーネントに2カラムのレイアウトコンポーネントを追加します。これにより、データテーブルとマップを横並びに配置できます。

2

データテーブル（マスター）の追加と構成

• データテーブルを追加： Avonniのデータテーブルコンポーネントをレイアウトの 左側 列にドラッグします。

• データソースを構成：

  • データテーブルコンポーネントをクリックしてプロパティパネルを開きます。

  • 選択： Avonni クエリデータソース をデータソースの種類として選択します。

  • をクリックします クエリを作成、または既存のクエリを選択します。

  • オブジェクト： 選択： Account.

  • フィルター（任意）： 必要な 静的です フィルター（例：特定のタイプのアカウントのみ表示するため）を追加します。ここで アクセス権を リアクティブフィルターを追加しないでください。

  • プロパティパネルの「Columns」セクションからデータテーブルに列を追加します。各列について「列を追加」をクリックし、「ソースフィールド」を選択し、ラベル、編集可否などのその他の設定を構成します。

• 行の選択を制限：

  • データテーブルのプロパティで、 最大行選択数 （または類似の設定）を見つけます。

  • をに設定します。 1これにより、同時に選択できるアカウントが1つだけに制限され、リアクティブなマップに必要な設定となります。

3

マップ（詳細）の追加と構成

• マップを追加： Avonniのマップコンポーネントを 右側に 列にドラッグします。

• データソースを構成：

  • にドラッグします。マップをクリックしてプロパティを開きます。

  • 選択： Avonni クエリデータソース.

  • オブジェクト： 選択： Account.

• リアクティブフィルターを作成：

  • マップのクエリデータソースのフィルターエディタを開きます。

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

    • フィールド： 位置情報を含む Id フィールド（またはアカウントを一意に識別するフィールド）を選択します。

    • 演算子： を選択します： 演算子を選択します。.

    • 値： 既存のレコードデータを取得するには、 直接属性参照 を使用してデータテーブルの選択行にリンクします：

      !AccountsTable.firstSelectedRow.Id

      （ と呼ぶことにします）と Contacts を表示する別の Data Table がある場合、Contacts Data Table のクエリを Accounts の選択行に基づいてフィルターするように設定できます。 をあなたのデータテーブルコンポーネントの実際の 名前 に置き換えてください）。

• マップの位置フィールドを選択

  • マップのプロパティで、位置フィールドに対応するフィールドを選択します。

  • マップの位置フィールドを構成： マップコンポーネントのプロパティで、位置データを構成するセクション（「Location」「Map Settings」などのラベルが付いている場合があります）を見つけます。マップコンポーネントに対して、データソース内のどのフィールドが住所または座標を含んでいるかを指定する必要があります。 どのフィールド データソース内のフィールドに住所または座標が含まれていることを伝えます。たとえば、次のようにマッピングする場合があります：

    • BillingStreet をマップ設定の「Street」フィールドにマッピングします。

    • BillingCity を「City」フィールドにマッピングします。

    • BillingState を「State/Province」フィールドにマッピングします。

    • BillingPostalCode を「Zip/Postal Code」フィールドにマッピングします。

    • BillingCountry を「Country」フィールドにマッピングします。

    住所の各部分に対応する適切なフィールドをデータソースから選択してください。緯度／経度を使用している場合は、それらのフィールドを適切にマップしてください。

4

リアクティビティをテストする

• プレビュー： 動的コンポーネントをプレビューします。

• アカウントを選択： データテーブルの行をクリックします。

• マップを観察： 選択したアカウントの場所を表示するようにマップが自動的に更新されるはずです