Data Table と Map をリンクして動的な位置情報を表示する

概要

このガイドでは、Experience Cloud サイトで Avonni Data Table コンポーネントと Avonni Map コンポーネントを接続し、動的でインタラクティブな表示を作成する方法を説明します。2つのコンポーネントを連携させることで、Data Table でアカウントを選択すると Map が更新され、関連する場所が表示されるため、ユーザーのエンゲージメントが高まります。

利点

これらのコンポーネントを連携すると、サイトはユーザーの選択にリアルタイムで応答でき、手動で更新しなくてもアカウントの場所を集中的かつ直感的に確認できます。

連携の設定

Data Table の設定

1

Data Table コンポーネントを追加する

• アカウント情報を表示するために、Experience Cloud ページに Avonni Data Table コンポーネントを配置します。
• なぜこれが必要なのですか？ Data Table は出発点として機能し、ユーザーが選択できるアカウントの詳細を表示します

2

Data Table に名前を付ける

• Data Table のプロパティパネルで、を設定します API 名 に accountsDatatable.
• なぜこれが必要なのですか？ API 名は一意の識別子として機能し、他のコンポーネント（Map など）がそれを認識して反応できるようにします。

3

1つの選択に制限する

• Data Table のプロパティで、を見つけてください 最大行選択数 設定し、をにします 1.
• なぜこれが必要なのですか？ 1行に制限することで、Map は1つのアカウントの場所を表示し、わかりやすく集中した体験を維持できます。

Avonni Map の設定

1

Map コンポーネントを追加する

• 同じページに Avonni Map コンポーネントを配置します（例: 名前を relatedLocationsMap).
• なぜこれが必要なのですか？ Map は、選択されたアカウントに基づいて場所データを表示します。

2

データソースを設定する

• Map のプロパティパネルで、に移動します データソース セクション。
• 選択 クエリデータソース を選択し、 Account オブジェクト（または場所データを持つオブジェクト）を選択します。
• なぜこれが必要なのですか？ このクエリは Salesforce から場所データを動的に取得します

3

結果をフィルターする

• クエリ設定にフィルター条件を追加します:
• なぜこれが必要か? このフィルターにより、Map は Data Table で選択されたアカウントに紐づく場所のみを表示し、選択されたレコードの ID を使用します

フィールド	演算子	値
アカウント ID	等しい	{{accountsDatatable.selectedRecord.Id}}

4

フィールドをマッピングする

• フィールドをマッピングして場所マーカーを表示するように Map を設定します（例: を設定します 緯度 と 経度 Account オブジェクトまたは関連オブジェクトのフィールド）。
• なぜこれが必要なのですか？ 適切なフィールドマッピングにより、Map は取得したデータに基づいてマーカーをどこに配置するかを認識します。

結果

ユーザーが Data Table でアカウントを選択すると、Map はそのアカウントに関連付けられた場所のみを自動的に表示するよう更新されます。これにより、シームレスでインタラクティブな体験が生まれ、訪問者は効率的にデータを探索できます。

一般的な問題のトラブルシューティング

• Map が更新されない: accountsDatatable の API 名が正確に一致していること、また Max Row Selection が 1 に設定されていることを確認してください。フィルター構文（{{accountsDatatable.selectedRecord.Id}}）を確認してください。
• 場所が表示されない: Account オブジェクトまたは関連オブジェクトに緯度と経度のフィールドがあることを確認し、クエリがデータを返すことを確認してください。
• パフォーマンスの問題: Map の読み込みが遅い場合は、クエリを簡素化するか、レコード数を減らしてください。
• 問題が解決しない場合: サポートチームまでご連絡ください： [email protected] サポートが必要な場合