YouTube ChannelSchedule a CallSubscribe for Updates

読み込み時のインタラクション

概要

その 読み込み時 読み込み時のインタラクションは、Avonni Dynamic Components の重要な機能で、アクションを実行できるようにします 自動的に 直前に コンポーネントがページ上で表示される。コンポーネントの初期化フェーズでは、重要なデータを取得したり、セットアップロジックを実行したり、変数を準備したりする一度きりの機会があり、レンダリングされる瞬間にコンポーネントが必要なすべてを持っていることを保証します。

コンポーネントの準備

「読み込み時」インタラクションは、本番のパフォーマンス前に舞台を準備する裏方のようなものと考えてください。それは 一度だけ コンポーネントが読み込まれたときに 前に いかなる視覚要素が表示されるよりも先に実行されます。

これにより次に最適です:

  • 必須データの事前読み込み: 即時表示や使用のために必要な特定のレコードを取得すること。

  • 変数の初期化: コンポーネントの動作や表示を制御する変数に対して、デフォルトまたは計算済みの値を設定すること。

  • セットアップフローの実行: （自動起動フローを介して）初期状態を決定したり複雑なセットアップを実行するためのバックグラウンドロジックを実行すること。

  • 条件付き表示: 表示を駆動するために変数の値を設定すること。

要点

「読み込み時」は実行されるため、 前に レンダリング中、あなたは 参照できません キャンバス上のコンポーネントを（使用して）参照することはできません（例: @ComponentName）そのアクション内では。データや初期化リソース（入力やグローバル変数など）に純粋に基づいて動作します。

「読み込み時」はいつ最も役立つか？

Target Object API Name を設定すると 現在のレコードにアクセスできます $Component.record を介して レコードページ上では、しかし「読み込み時」インタラクションは多くの他のシナリオでも不可欠です: 関連レコードの取得:

  • 主レコードにリンクされたデータを取得する（例: Contact を表示するときに親の Account を取得する）。 モーダル/パネル用データの読み込み:

  • 重要な点として 別の Dynamic Component をモーダルやパネルで開くとき（「Open Dynamic Component Dialog/Panel」を使用）、モーダル/パネルのコンポーネント内の「読み込み時」が、渡された ID に基づいて特定のレコードのデータを取得するために使用されます。（下の例を参照）。 モーダル/パネルコンポーネント 特定の構成レコードの取得:

  • カスタムメタデータや設定のような既知のレコードからデータを読み込むこと。 初期計算/集計の実行:

  • 「Execute Flow」を使用して KPI を計算したり、関連レコードをカウントしたり、結果を表示する前に複雑なロジックを実行すること。 外部構成の読み込み:

  • 「Execute Flow」を使用して（フローが対応していれば）他のシステムから設定やデータを取得すること。 「読み込み時」で利用可能なアクション

「読み込み時」イベント内で順次実行する1つ以上のアクションを設定できます:

「読み込み時」イベント内で順に実行する1つ以上のアクションを構成できます:

レコード取得（Get Records）

機能説明: ID によって単一の Salesforce レコードを取得し、それを変数に格納します。

使用する場面

  • 特定のレコードのデータを表示または操作する必要があるとき

  • 特定のレコードの詳細を表示するためにモーダル/パネルを開くとき

  • 関連レコードの取得（例: Contact の親 Account を取得する）

  • フォームで編集するためにレコードを読み込むとき

なぜ Execute Flow ではなく Get Records を選ぶか

  • 必要なのは1つのレコードのデータだけである場合

  • 計算やロジックが不要な場合

  • 構成がより簡単であること

  • 単純な取得ではパフォーマンスが良いこと

フローの実行（Execute Flow）

機能説明: 自動起動される Salesforce フローを実行し、複雑な操作を行い結果を返すことができます。

使用する場面

  • 表示前に複雑なロジックや計算が必要なとき

  • 複数のレコードや集計データを取得する必要があるとき

  • データ変換や検証を行うとき

  • 複雑なフィルタ条件でレコードを照会するとき

  • 外部サービスや API を呼び出すとき

  • 権限チェックや条件付きロジックを行うとき

  • 複数ソースから構成データを取得するとき

なぜ Get Records より Execute Flow を選ぶか

  • 単一のレコードの生データだけでは不十分なとき

  • 複雑なフィルタリング、並べ替え、または複数クエリが必要なとき

  • 計算やデータ変換が必要なとき

  • 表示前にビジネスロジックを実行する必要があるとき

  • 複数のデータソースを結合する必要があるとき

生体認証（Biometric）

機能説明: コンポーネントへのアクセスを許可する前に、ユーザーに対してデバイスレベルの生体認証（指紋、顔認証など）を要求します。

使用する場面:

  • 機密データを表示する前にユーザーの本人確認が必要なとき

  • 機密情報に対する追加のセキュリティ層を追加したいとき

  • コンプライアンス要件で生体認証が義務付けられているとき

  • 強化されたセキュリティを備えたモバイルアプリ（Salesforce Mobile App）を構築するとき

  • 高価値または制限された操作を保護するとき

設定手順

読み込み時インタラクションは、コンポーネントが読み込まれるときにどのアクションが実行されるかを決定するために構成が必要です。以下は利用可能な設定とオプションです。

1

インタラクションパネルを開く

Component Builder で Dynamic Component を編集している間に、 インタラクション アイコン/ボタンを 左側のパネルで探してクリックします。これにより、すべてのコンポーネントインタラクションを管理するメインパネルが開きます。

2

「読み込み時」インタラクションを追加する

インタラクションパネルで「Add On Load Interaction」ボタンをクリックします。これにより、アクションを追加する準備ができた専用の「読み込み時」イベントセクションが構成に追加されます。

3

アクションタイプを選択

次のいずれかを選択します レコード取得（Get Records） , フローの実行（Execute Flow） または 生体認証（Biometrics）

4

アクションの詳細を構成する

  • ために、 レコード取得（Get Records）:

    • レコード変数: を選択します 事前定義されたレコード変数リソース （正しいオブジェクト型の）取得したデータが格納される場所。

    • オブジェクト API 名: 取得したいオブジェクトを選択します（例: Contact).

    • レコード ID: 取得するレコードの ID を指定します。これはしばしば次にバインドされます:

      • 入力用の Input Variable （このコンポーネントが別のコンポーネントによって開かれ、ID を渡される場合）。

      • URL パラメータ（@recordId).

      • からのフィールド レコードページ上では、しかし「読み込み時」インタラクションは多くの他のシナリオでも不可欠です: （例: $Component.record.AccountId).

    • フィールド: 取得したい特定のフィールドを選択します。

  • ために、 フローの実行（Execute Flow）:

    • フロー API 名: あなたの 自動起動 フローを選択します。

    • フロー入力変数（任意）: フローの入力に静的値、URL パラメータ、リソースなどの値をマッピングします。

    • 出力変数（任意）: フローの出力を 変数リソース にマッピングして Dynamic Component 内で使用します。

例: 編集モーダルでの Contact データの読み込み

作成するもの

モーダルダイアログで Contact レコードを編集できるようにする 2 コンポーネントのシステムを作成します:

コンポーネント A - Contact リスト（メインページ）

  • Data Table に Contact の一覧を表示する

  • 各行に「編集」ボタンがある

  • 「編集」をクリックするとモーダルダイアログが開く

コンポーネント B - 編集モーダル（ポップアップダイアログ）

  • 「編集」がクリックされるとモーダルオーバーレイとして開く

  • 選択された Contact のデータを自動的に読み込む

  • Contact の編集可能なフィールドを表示する

  • レコードを更新する「保存」ボタンがある

セットアップ

コンポーネント A（Contact リスト）

  • Avonni のリストまたはデータテーブルに連絡先が表示されます。

  • Data Table の各 Contact 行には「編集」ボタンが含まれており、テーブル設定でボタンタイプを選択して新しい列として追加できます。

  • 「編集」ボタンには「On Click」インタラクションがあり、 「Open Dynamic Component Dialog」が使用されています.

コンポーネント B（編集モーダル）:

1

入力変数を作成する

作成する テキスト変数 名前を inputContactIdとします。 「入力可能」に設定しますこれは Component A から ID を受け取ります。

なぜ？ その inputContactId テキスト変数は、Component B（モーダルダイアログ）が開かれたときに Component A（Contact リスト）から選択された Contact の ID を受け取ります。これを 入力可能にすることで、 Component A が Contact ID を渡せるようになり、Component B はその ID を使用して正しい Contact レコードを取得・表示して編集できます。

2

レコード変数を作成する

作成する レコード変数 名前を contactToEditを作成します。 その オブジェクト API 名 Contact.

なぜ？ その contactToEdit を設定します。 レコード変数は、モーダルダイアログで編集される特定の Contact レコードのデータを格納します。これによりコンポーネントは渡された ID に基づいて Contact のデータ（例:, FirstNameEmail

3

）を取得、表示、更新でき、モーダルが正しいレコードで動作することを保証します。

  • コンポーネント B に「読み込み時」インタラクションを追加する

  • コンポーネント B（トップレベル）を選択します。 読み込み時 にアクションを追加します

なぜ？ その 読み込み時 このインタラクションは、コンポーネント B（モーダルダイアログ）が読み込まれ、表示される前に自動的に実行されます。これにより Component A から渡された ID を使って特定の Contact レコードのデータを取得し、 contactToEdit レコード変数に格納できます。これによりモーダルが開かれたときに編集用の正しいデータで埋められます。

4

「Get Records」アクションを構成する

  • アクションタイプ: レコード取得（Get Records）.

  • レコード変数: を選択します {!contactToEdit}.

  • オブジェクト API 名: Contact.

  • レコード ID: これを入力変数にバインドします: {!inputContactId}.

なぜ？ その レコード取得（Get Records） このアクションは、コンポーネント B（モーダルダイアログ）が読み込まれたときに特定の Contact レコードのデータを取得します。レコード変数を contactToEditに設定することで、取得したデータが編集用にそこに格納されます。オブジェクト API 名は Contact オブジェクトを指定し、レコード ID を inputContactId にバインドすることで、Component A（Contact リスト）から渡された ID に基づいて正しい Contact レコードを取得することを保証します。

5

入力フィールドを追加する

設定した 読み込み時 インタラクションで、コンポーネント B（モーダルダイアログ）に Contact レコードを編集するための入力フィールドを追加します。Component Builder でコンポーネントメニューの フィールド タブに移動し、必要なフィールドをキャンバスにドラッグして、表示および編集するために contactToEdit レコード変数にバインドします。

なぜ？ 入力フィールドにより、ユーザーはモーダル内で Contact のデータ（例: レコード変数は、モーダルダイアログで編集される特定の Contact レコードのデータを格納します。これによりコンポーネントは渡された ID に基づいて Contact のデータ（例:, FirstName）を表示および変更できます。フィールドを contactToEdit レコード変数にバインドすることで、読み込み時の 読み込み時 インタラクション中に取得された特定の Contact レコードのデータでフィールドが初期化され、正確な編集が可能になります。

6

保存ボタンを追加する

コンポーネント B（モーダルダイアログ）にボタンを追加します。 On Click インタラクションを構成し、 レコード変数から更新（Update from Record Variable） アクションをターゲットにして {!contactToEdit} レコード変数を指定します。

なぜ？ 保存ボタンは、モーダル内で行われた Contact のデータの変更を保存できるようにします。 レコード変数から更新（Update from Record Variable） アクションは contactToEdit レコード変数を使用して、編集されたフィールド値で Salesforce 内の Contact レコードを更新し、変更が永続化されるようにします。

7

コンポーネント A からのインタラクション

Data Table の 編集 ボタンがコンポーネント B（モーダルダイアログ）を開くようにするには、次の手順に従います:

  • データテーブルを選択する: Component A で Component Builder 内のデータテーブルを選択します。

  • インタラクションタブに移動する: コンポーネントメニューの インタラクション タブに移動します。

  • 行アクションを追加する: 行アクションの下に、先ほど作成した 編集 ボタンの新しいアクションを追加します。

  • インタラクションタイプを設定する: Open Dynamic Component Dialog をインタラクションタイプとして選択します。

  • コンポーネント B を選択する: ターゲットとしてコンポーネント B（モーダルダイアログ）を選択します。

  • 入力変数を構成する:

    • Component B で「入力可能」に設定した inputContactId 変数を選択します。

    • 値を次に設定します Record: Id 選択した行から Contact の ID を渡すためです。

なぜ？ このインタラクションは、各 Data Table 行の 編集 ボタンをコンポーネント B にリンクし、選択された Contact の ID を inputContactId 変数に渡します。コンポーネント B はこの ID を自身の 読み込み時 インタラクションで使用して、正しい Contact レコードを取得・表示し編集できるようにします。これによりスムーズで正確な編集プロセスが実現します。

結果

ユーザーがコンポーネント A の「編集」をクリックすると、コンポーネント B が開きます。 表示される 前に inputContactId コンポーネント B は、その「読み込み時」インタラクションが発火し、渡された contactToEdit を使用して「Get Records」で完全な Contact レコードを取得し、 contactToEdit変数を埋めます。入力フィールド（

にバインドされた）はレンダリングされるときには既に正しい Contact のデータで埋められており、編集する準備ができています。

  • 重要な考慮事項 自動起動フローのみ:

  • 「Execute Flow」は自動起動フローが必要です。 レコード ID の出所:

  • 「Get Records」に有効な ID があることを確認してください（多くは入力変数や URL パラメータから）。 一度きりの実行:

  • レンダリング前に一度だけ実行されます。 キャンバスコンポーネントの参照不可: 「読み込み時」の間はキャンバス上のコンポーネント（例:@MyComponent

  • ）を参照できません。 パフォーマンス:

  • コンポーネント表示の遅延を避けるために「読み込み時」アクションを効率的に保ってください。 エラーハンドリング:

使用する場合はフロー内でエラーハンドリングを実装してください。

要約すると 前に 読み込み時インタラクションは、データの準備と変数の初期化のための重要なツールです レコード取得（Get Records） Dynamic Component がレンダリングされるときに。特に関連データやモーダル/パネル用の特定レコードを取得するには フローの実行（Execute Flow） より複雑なセットアップロジック、計算、または構成設定の取得には

最終更新

役に立ちましたか？