リアクティブコンポーネント
概要
リアクティブコンポーネントは、Experience Site内のデータやユーザー操作の変化に動的に応答するよう設計されています。ユーザーが項目を選択するなどして一つのコンポーネントが更新されると、関連するコンポーネントが自動的にリフレッシュされてその変更を反映し、訪問者にとって滑らかで魅力的な体験を提供します。
主要コンポーネント
リアクティブコンポーネントには以下が含まれます：
サイトに対する利点
これらのリアクティブコンポーネントをExperience Siteに統合することで、動的でインタラクティブなデザインの新たな可能性が開けます。ユーザーの操作にリアルタイムで適応し、手動での更新や追加のナビゲーションを必要とせずに関連情報を提供することで、全体的な使いやすさを向上させます。
実用的なユースケース
マップを使った動的なアカウント詳細表示
Avonniマップを設定してアカウントの場所を表示します。ユーザーがある場所を選択すると、関連するアカウントの詳細（例：名前、説明、業種）がAvonniテキストブロックに自動的に表示され、直感的にデータを探索できます。
相互接続されたデータテーブル
Avonniデータテーブルをアカウント一覧として設定します。アカウントを選択すると、別のデータテーブルが更新され、関連する取引先担当者を表示するようにして、大規模データセットをシームレスにナビゲートできます。
リアクティブコンポーネントが重要な理由
リアクティブコンポーネントはExperience Siteが要素間で応答し連携することを可能にし、より動的で使いやすいサイトにします。このインタラクティビティにより訪問者は情報を効率的に発見・アクセスでき、より魅力的で生産的な体験につながります。
リアクティブなAvonniコンポーネントの設定
これらのリアクティブコンポーネントをExperience Siteに取り入れることで、単純なセットアップ手順でインタラクティビティを向上させます：
コンポーネントを「リアクティブ」にするとは？
コンポーネントは、データを他のコンポーネントにリンクすることでリアクティブになります。これによりユーザー操作に基づいて自動的に更新されます。これは2つの簡単なステップで達成されます。
リアクティビティを有効にする手順
他のコンポーネントにどのように反応させるかを伝える
ユーザーが別のコンポーネントと対話したときにどのコンポーネントを更新するかを指定します。ターゲットコンポーネントのプロパティに次の構文を使用します：text
{{componentApiName.selectedRecord.componentFieldApiName}}内訳：
componentApiName: あなたが割り当てたニックネーム（例：accountsDatatable).selectedRecord: ユーザーが選択した行または項目。componentFieldApiName: 表示する特定のフィールド（例：Name,Industry).
なぜこれが必要か？ この構文は選択されたデータ（例：アカウントの
Name)を別のコンポーネントにリンクし、自動更新を引き起こします
よくある問題のトラブルシューティング
コンポーネントが更新されない： 各コンポーネントに固有の
componentApiNameがあり、構文（{{componentApiName.selectedRecord.componentFieldApiName}}）がターゲットコンポーネントのプロパティに正しく入力されていることを確認してください。データが表示されない： ソースコンポーネント（例：
accountsDatatable）にデータがあること、そしてcomponentFieldApiNameが利用可能なフィールド（例：Name).リアクティビティの遅延： 複雑なデータセットを確認してください。クエリを簡素化するか、リアクティブリンクの数を減らしてパフォーマンスを向上させます。
問題が解決しない場合： サポートチームに以下までお問い合わせください： [email protected] 支援します。
ガイド付きの例
Experience SiteでAvonniデータテーブルとマップを接続し、ユーザーが選択したアカウントに基づいて場所を動的に表示する方法を学びます。
アカウント用のAvonniデータテーブルを連携させ、連絡先テーブルを動的に更新して選択したアカウントの連絡先のみを表示する方法を確認します
最終更新
役に立ちましたか？