Dynamic Component

Avonni Dynamic Component コンポーネントは、別の Dynamic Component を埋め込むことができます。

概要

この ダイナミックコンポーネント は、他のAvonniダイナミックコンポーネントを埋め込むことができるコンテナコンポーネントです。これは再利用可能なコンポーネントを作成し、Avonniダイナミックコンポーネント内で複雑な階層レイアウトを構築するための鍵となります。事前に作成されたコンポーネント（またはコンポーネントの一部）を別のコンポーネントに挿入する方法と考えてください。

これにはいくつかの重要な利点があります：

• 再利用性： 複雑なUI要素（例：カスタムの関連リスト、特殊なフォーム、ミニダッシュボード）を 一度 別のダイナミックコンポーネントとして作成します。その後、Dynamic Componentコンポーネントを使用して、その事前に作成したコンポーネントを複数の場所（異なるレコードページ、アプリページ、または他のダイナミックコンポーネント内）に埋め込みます。

• モジュール性： 大きく複雑なコンポーネントを、より小さく扱いやすい部分に分割します。これによりコンポーネントの理解、保守、更新が容易になります。

• 整理： UIのための明確な階層構造を確立し、関連要素を論理的にグループ化します。

• カプセル化： ネストされたコンポーネントの内部処理は親コンポーネントから隠されます。これにより複雑さが軽減され、命名の衝突が防止されます。

仕組み

1. 「子」コンポーネントを作成する： まず、埋め込みたいダイナミックコンポーネント（ 埋め込む （「子」コンポーネント））を作成します。この通常のダイナミックコンポーネントは、任意の組み合わせのAvonniコンポーネントで構築されます。親コンポーネントと通信するために必要な 入力 および 出力 変数を定義します。

2. Dynamic Componentコンポーネントを追加する： 子を埋め込みたい「親」ダイナミックコンポーネント内で、コンポーネントライブラリから ダイナミックコンポーネント コンポーネントをキャンバスにドラッグします。

3. 表示するコンポーネントを選択する： Dynamic Componentコンポーネントのプロパティパネルに「Name」と表示された設定があります。コンポーネントセレクターを使って 選択 した 名前 に、ステップ1で作成したダイナミックコンポーネントを指定します。

ユースケース

• 再利用可能な関連リスト： カスタムの「Related Contacts」コンポーネントを一度作成し、Dynamic Componentコンポーネントを使用してそれをAccount、Opportunity、または他のレコードページに埋め込みます。親レコードのIDを入力変数として渡して関連リストをフィルタします。

• カスタムフォーム： 専門的なフォームを別のダイナミックコンポーネントとして作成し、必要に応じて他のコンポーネントに埋め込みます。

• ミニダッシュボード： 小さな自己完結型のダッシュボード（例：チャートと概要テーブル）をダイナミックコンポーネントとして作成し、より大きなダッシュボードやレコードページに埋め込みます。

• 複雑なレイアウト： 複雑なページレイアウトを、各セクションを別々のダイナミックコンポーネントとして実装することで、より小さく管理しやすいセクションに分割します。

• 条件付きセクション： Dynamic Componentコンポーネントを表示ルールと組み合わせて使用し、条件に基づいてUIのセクション全体を表示/非表示にします。

例：再利用可能なRelated Contacts

1. 「RelatedContacts」コンポーネントを作成する：

   • 新しい ダイナミックコンポーネントを 作成し、名前を RelatedContacts.

   • に設定します。 その ターゲットオブジェクトのAPI名 を Account

   • （Accountページで使用することを想定しています）。

   • 連絡先を表示するためにData Tableコンポーネントを追加します。 Data Tableのクエリを設定して、Accountに関連する連絡先を取得します。に: フィルター.

   • 新しい AccountId equals {!inputAccountId} という テキスト 変数リソース名を inputAccountIdとし、

   • 入力可能 RelatedContacts.

2. としてマークします。これにより親コンポーネントからAccount IDを受け取ります。

   • 保存して有効化します 「AccountDetailPage」コンポーネントを作成する：.

   • に設定します。 その ターゲットオブジェクトのAPI名 を.

   • 別のダイナミックコンポーネントを作成し、名前を

3. AccountDetailPage

   • にします。 「AccountDetailPage」コンポーネントを作成する：Accountの詳細を表示するために必要なコンポーネントを追加します。 ダイナミックコンポーネント 「RelatedContacts」を埋め込む：

   • 中で、 RelatedContacts コンポーネントをキャンバスにドラッグします。

   • Dynamic Componentコンポーネントのプロパティで、表示するコンポーネントとして テキスト を選択します。 これで 入力変数が一覧表示されているのが見えます。 これをバインドして$Component.record.Id

4. に渡します。これにより現在のAccountのIDがネストされたコンポーネントに渡されます。 Accountページに追加： 「AccountDetailPage」コンポーネントを作成する： コンポーネントをAccountレコードページに追加します。

これで、任意のAccountレコードページで 「AccountDetailPage」コンポーネントを作成する： コンポーネントが表示されます。それはさらに、 埋め込む した RelatedContacts コンポーネントに現在のAccountのIDを渡します。 RelatedContacts そのコンポーネントはそのIDを使用してData Tableをフィルタし、関連する連絡先を表示します。

パフォーマンスに関する考慮事項

ネストされたコンポーネントは大きな柔軟性を提供しますが、過度または不適切な設計のネストは パフォーマンスに 影響を与える可能性があります。以下は幾つかのヒントです：

• 深いネストを避ける： ネストのレベルを制限してください。非常に深い階層は管理が難しく、レンダリングを遅くする可能性があります。

• 入力/出力変数を使用する： ネストされた各コンポーネントが独自にデータを取得するのではなく、入力/出力変数を使用して親子間でデータを渡してください。

• 条件付き表示： 表示ルールを使用して不要なコンポーネントの読み込みを防いでください。

• データ読み込みの監視： ネストされたコンポーネント内でデータがどのように読み込まれているかに注意してください。冗長なクエリを避けてください。