実装ガイド

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

データコンポーネントにリアクティブな機能を設定する方法を解説したこのガイドで、Avonniコンポーネントを動的でインタラクティブな体験へと変えましょう。このチュートリアルでは、コンポーネントがデータを表示し、ユーザー操作にリアルタイムで反応するようにする手順を順を追って説明します。

リアクティブ対応のデータ体験コンポーネントは次のとおりです： データテーブル, リスト, マップ, タイムライン そして Avonni テキストブロックです。

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

まず、各データコンポーネントに API 名として知られる一意の識別子を付けます。この名前は参照点として機能し、ページ内のさまざまな部分が相互に通信できるようにします。

• 例:

  • データテーブルコンポーネントを使用している場合、次のような名前を付けることができます accountsDatatable.

ステップ 2: 対象コンポーネントにリアクティブ式を設定する

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

• リアクティブ式の形式：次の形式を使用します {{componentApiName.selectedRecord.componentFieldApiName}} でコンポーネントを連携します。

  • componentApiName：ここにはデータコンポーネントの API 名を入れます（たとえば、 accountsDatatable 上で付けた名前）。
  • componentFieldApiName：これは、表示したいレコード内の特定の項目を指します（たとえば、 名前 または 業界).
• 例:

  • あなたのから選択したレコードの「Name」項目を表示するには、 accountsDatatable、次を使用します {{accountsDatatable.selectedRecord.Name}}.
  • 同じ選択から「Industry」項目を表示するには、次を使用します {{accountsDatatable.selectedRecord.Industry}}.

実用例：

1. アカウントの可視化のためのインタラクティブマップ:

   • たとえば、次のようにタグ付けされたインタラクティブマップがあるとします accountMap。ユーザーが場所を選択したときは、次のような式を使ってテキストブロックにアカウント名を表示できます {{accountMap.selectedRecord.Name}}。これにより、選択されたアカウント名がユーザー操作に応じて動的に表示されます。
2. アカウントと連絡先の同期されたデータテーブル:

   • アカウントを表示するテーブル（accountsDatatable）contactsDatatable).
   • 設定できます contactsDatatable の選択に応答するように accountsDatatable。たとえば、選択したアカウントに関連付けられた連絡先名を表示するには、次を使用します {{accountsTable.selectedRecord.Id}}.

これらの手順により、静的なコンポーネントが豊かで応答性の高い体験へと変わり、Web アプリケーションがより直感的で使いやすくなります。リアクティブなデータの力は、サイト上のあらゆる操作をつながりのある、目的のあるものとして感じさせる能力にあります。

楽しく構築しましょう！