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

概要

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

主なコンポーネント

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

これが役立つ理由

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

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

実践的な使用例

地図による動的なアカウント詳細

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

相互接続されたデータテーブル

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

リアクティブコンポーネントが重要な理由

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

リアクティブな Avonni コンポーネントの設定

以下の簡単なセットアップ手順で、これらのリアクティブコンポーネントを Experience Site に組み込み、インタラクティブ性を高めましょう：

コンポーネントが「リアクティブ」になるのはなぜですか？

コンポーネントは、データを他のコンポーネントにリンクすることでリアクティブになり、ユーザーの操作に応じて自動更新できるようになります。これは、次の 2 つの簡単な手順で実現できます

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

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

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

他のコンポーネントに反応方法を伝える

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

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

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

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

データが表示されない

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

リアクティビティの遅延

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

問題が解決しない場合

サポートチームまでご連絡ください： [email protected] サポートが必要な場合は。

ガイド付きの例

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

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

リンクされたデータテーブル

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

最終更新 1 か月前

役に立ちましたか？