リアクティブコンポーネント

概要

Reactive コンポーネントは、ユーザーが Experience Site とやり取りすると自動的に更新されます。ユーザーがあるコンポーネントで何かをクリックまたは選択すると、接続された他のコンポーネントが即座に更新され、関連情報が表示されます。これにより、シームレスでインタラクティブな体験が生まれます。

主要コンポーネント

Reactive コンポーネントは次のとおりです:

これが役立つ理由

Reactive コンポーネントを使うと、ユーザーがデータを動的に探索できるインタラクティブなページを構築できます。たとえば、AX - データテーブルでレコードをクリックすると、AX - マップが自動的に更新されてそのレコードの所在地を表示したり、AX - タイムラインをフィルタリングして関連アクティビティを表示したりできます。どれもページの再読み込みや移動は不要です。

これにより、ユーザーが閲覧または選択している内容に応じて情報が即座に更新される、より魅力的なポータル体験が実現します

実用例

マップを使った動的なアカウント詳細

Avonni Map を設定してアカウントの所在地を表示します。ユーザーが所在地を選択すると、関連するアカウントの詳細（例: 名前、説明、業界）が Avonni Text Block に自動的に表示され、データを直感的に確認できます。

連携するデータテーブル

Avonni Data Table を設定してアカウントを一覧表示します。アカウントを選択すると、2 つ目の Data Table が更新され、関連する連絡先が表示されるため、大規模なデータセットでもシームレスに移動できます。

Reactive コンポーネントが重要な理由

Reactive コンポーネントにより、Experience Site は要素間で応答し、通信できるようになり、より動的で使いやすくなります。このインタラクティブ性により、訪問者は情報を効率的に見つけてアクセスできるようになり、より魅力的で生産的な体験につながります。

Reactive Avonni コンポーネントの設定

これらの Reactive コンポーネントを、わかりやすい設定手順で Experience Site に組み込み、インタラクティブ性を高めましょう:

コンポーネントを「Reactive」にするものは何か?

コンポーネントは、データを他のコンポーネントにリンクすることで Reactive になり、ユーザー操作に基づいて自動更新されるようになります。これは 2 つの簡単な手順で実現できます

リアクティビティを有効にする手順

データコンポーネントに名前を付ける（componentApiName）

プロパティパネルで各コンポーネントに一意のニックネームを割り当てます。たとえば、アカウントを一覧表示する Data Table に accountsDatatable という名前を付けます。
なぜこれが必要なのか? このニックネームは、リアクティビティ用にコンポーネントを識別し、他のコンポーネントがそのデータを参照できるようにします

他のコンポーネントがどう反応するかを指定する

ユーザーが別のコンポーネントとやり取りしたときに、どのコンポーネントを更新するかを指定します。ターゲットコンポーネントのプロパティで次の構文を使用します:text{{componentApiName.selectedRecord.componentFieldApiName}}
内訳:
- componentApiName: 割り当てたニックネーム（例: accountsDatatable).
- selectedRecord: ユーザーが選択した行または項目。
- componentFieldApiName: 表示する特定のフィールド（例: 名称, 業界).
なぜこれが必要なのか? この構文は、選択したデータ（例: アカウントの 名称）を別のコンポーネントにリンクし、自動更新をトリガーします

よくある問題のトラブルシューティング

コンポーネントが更新されない

各コンポーネントに一意の componentApiName と構文（{{componentApiName.selectedRecord.componentFieldApiName}}）がターゲットコンポーネントのプロパティに正しく入力されていることを確認してください。

データが表示されない

ソースコンポーネント（例: accountsDatatable）にデータがあり、かつ componentFieldApiName が利用可能なフィールド（例: 名称).

リアクティビティの遅延

複雑なデータセットがないか確認し、クエリを簡素化するか、リアクティブリンクの数を減らしてパフォーマンスを改善します。

問題が解決しない場合

サポートチームまでお問い合わせください: [email protected] サポートを受けるには。

ガイド付きの例

データテーブルとマップを連携して動的な所在地を表示する

Experience Site で Avonni Data Table と Map を接続し、ユーザーが選択したアカウントに基づいて所在地を動的に表示する方法を学びます。

連携したデータテーブル

アカウント用の Avonni Data Table を Contacts Table に連携し、選択したアカウントの連絡先のみを表示するよう Contacts Table を動的に更新する方法を学びます

最終更新 4 か月前

役に立ちましたか？