# 実装ガイド

## **Avonniコンポーネントでリアクティビティを実装するためのガイド**

リアクティブなデータコンポーネントの設定に関するガイドで、Avonniコンポーネントを動的でインタラクティブな体験に変えましょう。このチュートリアルではプロセスを順を追って説明し、コンポーネントがデータを表示し、ユーザー操作にリアルタイムで応答するようにします。

{% hint style="info" %}
リアクティブ対応のデータ体験コンポーネントは次のとおりです： [データテーブル](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), [マップ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-di-tu), [タイムライン](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-taimurain) および Avonni テキストブロック。
{% endhint %}

### ステップ1：データコンポーネントにAPI名を割り当てる

まず、各データコンポーネントに一意の識別子（API名）を付けます。この名前は参照ポイントとして機能し、ページの異なる部分が通信できるようにします。

* **例として**:
  * データテーブルコンポーネントを扱っている場合、次のように名付けることができます `accountsDatatable`.

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FA1azYErbZk0m8nAPimi8%2F2024-01-29_21-22-15.png?alt=media&#x26;token=54501d17-7c8d-4c6b-b1b4-6a71168b8076" alt=""><figcaption></figcaption></figure>

### ステップ2：ターゲットコンポーネントでリアクティブ式を設定する

次に、インタラクティブなデータをどこに表示したいかを決めます。これはテキストブロック、別のデータテーブル、またはデータを表示する任意のコンポーネントで構いません。ここでは、フィルターメニューでコンポーネントにどのデータをいつ表示するかを指示するためにリアクティブ式を使用します。

* **リアクティブ式の形式**: 次の形式を使用します `{{componentApiName.selectedRecord.componentFieldApiName}}` でコンポーネントを連携させます。
  * `componentApiName`: ここにはデータコンポーネントのAPI名（上で命名したようなもの）を入れます。 `accountsDatatable` you named above).
  * `componentFieldApiName`: これは表示したいレコードの特定のフィールドを指します（例えば、 `名前` または `Industry`).
* **例として**:
  * レコードから選択した「Name」フィールドを表示するには、 `accountsDatatable`を使用します。 `{{accountsDatatable.selectedRecord.Name}}`.
  * 同じ選択から「Industry」フィールドを表示するには、次を使用します。 `{{accountsDatatable.selectedRecord.Industry}}`.

### 実用的な使用例：

1. **アカウントの可視化のためのインタラクティブマップ**:
   * インタラクティブマップにタグを付けているとします（ `accountMap`）。ユーザーが場所を選択すると、次のような式を使用してテキストブロックにアカウント名を表示できます： `{{accountMap.selectedRecord.Name}}`。これにより、ユーザーの操作に基づいて選択されたアカウント名が動的に表示されます。
2. **アカウントと取引先責任者の同期されたデータテーブル**:
   * 一方のテーブルにアカウントを表示しているとします（`accountsDatatable`）そして別のテーブルに関連する取引先責任者を表示している（`contactsDatatable`).
   * ）場合、 `contactsDatatable` を `accountsDatatable`の選択に反応させるように設定できます。例えば、選択されたアカウントに関連する取引先責任者の名前を表示するには、次を使用します `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrtipSKqwjQ5pxwb9xqpg%2F2024-01-29_21-37-28.png?alt=media&#x26;token=c4256efa-998c-437d-99fd-4152cc464312" alt=""><figcaption></figcaption></figure>

これらの手順により、静的なコンポーネントを豊かで反応性の高い体験に変え、ウェブアプリケーションをより直感的で使いやすくします。リアクティブデータの力は、サイト上のすべてのインタラクションをつながりのある目的あるものに感じさせる点にあります。&#x20;

楽しい開発を！