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

## 概要

リアクティブコンポーネントは、ユーザーがエクスペリエンスサイトと対話すると自動的に更新されます。ユーザーがあるコンポーネントでクリックや選択を行うと、接続された他のコンポーネントが関連情報を表示するために即座にリフレッシュされ、シームレスでインタラクティブな体験を作り出します。

{% hint style="success" %}

## 主要コンポーネント

リアクティブコンポーネントは以下の通りです：

* [AX - データテーブル](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu)[マップ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-di-tu)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu)[一覧](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-risuto)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu)[タイムライン](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-taimurain)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu)[テキストブロック](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-tekisutoburokku)
  {% endhint %}

### **これが役立つ理由**

リアクティブコンポーネントを使うと、ユーザーがデータを動的に探索できるインタラクティブなページを構築できます。例えば、AX - データテーブルでレコードをクリックすると、そのレコードの位置を表示するようにAX - マップが自動的に更新されたり、関連する活動を表示するようにAX - タイムラインがフィルタリングされたりします。ページのリフレッシュや遷移は不要です。

これにより、ユーザーが見ている内容や選択に基づいて情報が瞬時に更新される、より魅力的なポータル体験が生まれます。

***

## 実用的なユースケース

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

Avonniマップを設定してアカウントの場所を表示します。ユーザーが場所を選択すると、関連するアカウントの詳細（例：名前、説明、業界）がAvonniテキストブロックに自動的に表示され、直感的にデータを探索できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVjhaFMV1pHEy9rtf7kQw%2FAvonni%20Components%204.2%20Jan%2031.webp?alt=media&#x26;token=d1a35dea-24dc-4323-8297-f6d77aa535b0" alt=""><figcaption></figcaption></figure>

### 相互連結されたデータテーブル

アカウントを一覧表示するAvonniデータテーブルを設定します。アカウントを選択すると、関連する連絡先を表示する別のデータテーブルが更新され、大規模なデータセットの中をシームレスにナビゲートできます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVvAnrlEXAdP1tcoOxM07%2F2024-02-04_16-43-22%20(1).gif?alt=media&#x26;token=c99e3f73-a58a-4378-bd93-00fdad6152a0" alt=""><figcaption></figcaption></figure>

***

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

リアクティブコンポーネントにより、エクスペリエンスサイトは要素間で応答および通信できるようになり、より動的で使いやすくなります。このインタラクティビティは訪問者が情報を効率的に発見・アクセスするのを助け、より魅力的で生産的な体験につながります。&#x20;

***

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

これらのリアクティブコンポーネントをエクスペリエンスサイトに取り入れることで、次の簡単な設定手順によりインタラクティビティを向上させます：

### **コンポーネントを「リアクティブ」にする要素は？**

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

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

{% stepper %}
{% step %}

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

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

{% step %}

#### 他のコンポーネントにどのように反応するかを伝える

* ユーザーがあるコンポーネントと対話したときにどのコンポーネントを更新するかを指定します。対象コンポーネントのプロパティに次の構文を使用します：text`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **内訳：**
  * `componentApiName`: あなたが割り当てたニックネーム（例： `accountsDatatable`).
  * `selectedRecord`: ユーザーが選択した行またはアイテム。
  * `componentFieldApiName`: 表示する特定のフィールド（例： `名前`, `Industry`).
* *なぜこれをするのか？* この構文は、選択されたデータ（例：アカウントの `名前`）を別のコンポーネントにリンクし、自動更新をトリガーします
  {% endstep %}
  {% endstepper %}

***

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

<details>

<summary><strong>コンポーネントが更新されない</strong></summary>

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

</details>

<details>

<summary><strong>データが表示されない</strong></summary>

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

</details>

<details>

<summary><strong>リアクティビティの遅延</strong></summary>

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

</details>

<details>

<summary><strong>問題が続く場合</strong></summary>

次のサポートチームに問い合わせてください： <support@avonni.com> 支援を受けるため。

</details>

***

## **ガイド付きの例**

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="../chtoriaru/riakutibukonpnento/dtatburutowoshitenawosuru"><strong>動的な場所表示のためのデータテーブルとマップのリンク</strong></a></td><td>Experience SiteでAvonniデータテーブルとマップを接続し、ユーザーが選択したアカウントに基づいて場所を動的に表示する方法を学びます。</td><td><a href="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FITT78gjzqT0HViqyTa1s%2FCSV%20Parser%20from%20Figma.png?alt=media&#x26;token=c39267bf-66c3-4ae6-9384-ef5412b6e9a7">CSV Parser from Figma.png</a></td></tr><tr><td><a href="../chtoriaru/riakutibukonpnento/dtatburu"><strong>連動するデータテーブル</strong></a></td><td>アカウント用のAvonniデータテーブルを連絡先テーブルとリンクし、選択されたアカウントに対応する連絡先のみを表示するように連絡先テーブルを動的に更新する方法を学びます。</td><td><a href="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZK2FJjsLqEUYMVFZyUjV%2FAvonni%20Component%20Builder%20Illustrations%20(4).png?alt=media&#x26;token=c3d6ff5a-5b6e-4294-ac66-37424de04ffc">Avonni Component Builder Illustrations (4).png</a></td></tr></tbody></table>