リレーションシップグラフ
Avonni Relationship Graph コンポーネントは、Lightning ページ上で Salesforce レコード間の接続や階層関係を直接視覚化する、強力で直感的な方法を提供します。単純なリストを超えて、データがどのように本当に結びついているかを確認できます。
概要
このコンポーネントはデータをインタラクティブなグラフとしてレンダリングし、ノード（レコードを表す）と線（関係を表す）を表示します。アカウント階層、組織図、異なるレコード間の依存関係など、複雑な構造を理解するのに最適です。
主な機能
ビジュアル関係マッピング： 親から子への関係や、場合によっては他のルックアップ関係をグラフィカルな形式で表示します。
階層データの表示： 複数レベルのネストに対応（例：Account -> Contacts -> Cases）。
対話的な探索： 設定に応じて、ユーザーはノードを展開・折りたたみできる場合があります。
データ駆動： 強力な Avonni Nested Query Data Source を使用してデータを取り込みます。
ノードのカスタマイズ： ラベル、アイコン、追加フィールドなど、各ノードに表示する情報を制御します。
アクション可能なノード： グラフ内の親ノードまたは子ノードに直接インタラクションを追加します。
ユースケース
関連する Contacts と Opportunities を含むアカウント階層の可視化。
組織図の表示（例：次に基づくユーザー階層：
ManagerIdフィールド）。製品構造のマッピング（例：製品バンドルとそのコンポーネント）。
ケースの依存関係や関連するナレッジ記事の表示。
親子タスクを伴う複雑なプロジェクト構造の可視化。
Relationship Graph コンポーネントの追加
ドラッグアンドドロップ: コンポーネントライブラリ（左ペイン）から「Relationship Graph」コンポーネントを見つけ、キャンバスにドラッグします。
設定
キャンバス上の Relationship Graph コンポーネントを選択して、プロパティパネルでプロパティにアクセスします。構成には、データへの接続、データの表示方法のマッピング、動作のカスタマイズが含まれます。
階層データへの接続（データソース）
Relationship Graph は階層データで動作するように設計されています。このデータを提供する主な方法は、 Avonni Nested Query Data Source.
ネストクエリを構成
をクリックします クエリを作成 または クエリを編集.
親オブジェクトのクエリ： トップレベルのレコード用のクエリを定義します（例：オブジェクト：
Account）。必要に応じてフィルターを追加します。子オブジェクトの追加： ネストクエリビルダー内で、子関係を追加します。
子オブジェクトを選択（例：
Contact).正確な 関係フィールド の 子 それを次のオブジェクトにリンクする 親 を指定します（例：
フィールド（または Contacts を Accounts にリンクする関連フィールド）を選択します。（Contact 上）。
さらなるネストの追加（任意）： さらに別のレベルを追加することも可能です（例：
Caseを次の子として追加Contactし、ContactId関係フィールドを使用）。複数の親オブジェクト（任意）： コンポーネントの機能に応じて、 複数の独立した親クエリ を追加して、同じグラフに異なる開始階層を表示できる場合があります。
クエリを保存： ネストクエリの定義を保存します。
データをグラフノードへマッピング（データマッピング）
この重要なセクションでは、 どのように ネストクエリの各レベルのデータをグラフのノード上に視覚的に表示するかを定義します。
各レベルの属性をマップ
選択したアイテムレベル（例：Account）について：
ラベル： ノードの主要表示テキストとなるクエリ結果のフィールドを選択します（例：
Account.Name).アイコン名（任意）： SLDS アイコン名を含むフィールドを選択するか、静的なアイコン名（例：
standard:account）を入力してノードにアイコンを表示します。追加フィールド（任意）： ノードの副次情報として表示したいクエリの他のフィールドを追加します。
展開状態（任意 - 親ノード用）： （ブール値）グラフの読み込み時に子を表示するため、このレベルのノードをデフォルトで展開するかどうかを設定します。ブールフィールドへバインドするか静的値を設定します。
ヘッダー設定
グラフ上部に表示されるヘッダーをカスタマイズします。
タイトル： （テキスト）グラフのタイトルを入力（例：「Account Relationships」）。
アイコン名： （テキスト、任意）ヘッダー用のアイコン。
アクション： （アクション、任意）以下に関連するヘッダーレベルのボタンを追加 グラフ全体 （例：「Expand All」「Collapse All」「Refresh」）。これらは標準の Avonni Interactions を使用します。
ノード構成
子を持つノードの展開/折りたたみコントロールの外観をカスタマイズします。
展開アイコン名： （テキスト）ノードを展開するボタンのアイコン名（例：
utility:add).折りたたみアイコン名： （テキスト）ノードを折りたたむボタンのアイコン名（例：
utility:dash).
インタラクション構成
グラフノードに直接インタラクティビティを追加します。インタラクションは通常、 データマッピング 各アイテムレベルのセクション内、または全体コンポーネントのインタラクションとして構成されます。
グループ/親ノードのアクション： トップレベル（親）ノードのクリックでトリガーされるインタラクションを定義します。
アイテム/子ノードのアクション： 個々の子ノードのクリックでトリガーされるインタラクションを定義します。
グラフノードの一般的なインタラクションアクション：
ナビゲート: これを使用してユーザーを別ページに誘導します。よくあるユースケースは、クリックしたノードの レコードページにある場合 を開くことです。
構成例： ページ参照タイプを次に設定：
Record Page、そのノードレベルに適した Object API Name を選択し、Record ID をItem Nameとしてマッピングした属性に設定します。
フローダイアログを開く / フローパネルを開く: 次を起動： Screen Flow モーダルまたはサイドパネルで、クリックされたノードに関連するプロセス（例：詳細の編集、関連タスクの作成、通話の記録）をユーザーに案内します。
構成例： 目的の Screen Flow を選択し、クリックされたノードの ID（
Item Name属性を使用）を Flow へ入力変数として渡します。
フローを実行: 次をトリガー： 自動起動フロー クリックされたノードに関連するバックグラウンド処理（例：レコードのステータス更新、メール通知の送信、標準タスクの作成）を行います。
構成例： 該当する自動起動フローを選択し、ノードの ID（
Item Nameから）を入力変数として渡します。
トーストを表示: ユーザーに簡易な情報メッセージを表示し、クリックされたノードにマッピングされた他フィールドの詳細を含めることも可能です。
例：Account -> Contact -> Case 階層
データソース（ネストクエリ）：
親：
Account子1：
Contact（関連：フィールド（または Contacts を Accounts にリンクする関連フィールド）を選択します。,子2（Contact 配下にネスト）：
Case（関連：ContactId,)
データマッピング：
Account Item：
ラベル：Name,アイコン名：standard:account,展開：trueContact Item：
ラベル：Name,アイコン名：standard:contactCase Item：
ラベル：CaseNumber,Item Name：Id,アイコン名：standard:case,追加フィールド：Status
結果： アカウントを表示するインタラクティブなグラフで、関連するコンタクトを表示するために展開でき、さらに関連するケースを表示するために展開できます。任意のノードをクリックすると、そのレコードページへ移動します。
主な注意点
データモデル： Salesforce データ内に明確な親子関係（ルックアップフィールド）が必要です。
ネストクエリのセットアップ： Nested Query Data Source の正しい構成が重要です。
パフォーマンス： 非常に大きい、または深くネストした階層（数千のノードを含む）は、読み込みパフォーマンスに大きく影響する可能性があります。可能であればクエリにフィルターを使用してください。
明瞭性： ラベルや追加フィールドを含むグラフ表示は、明確で煩雑にならないように設計してください。
まとめ
Avonni Relationship Graph は、Lightning ページ上で階層データを直接探索・操作するための強力なビジュアル手段を提供します。ネストクエリを活用し、明示的なデータマッピングを構成することで、複雑な関係をコード不要で直感的かつ実用的な可視化に変換できます。
最終更新
役に立ちましたか？