リレーションシップグラフ

概要

Avonni Relationship Graph コンポーネントは、Salesforce レコード間の接続と階層関係を Lightning ページ上で直接視覚化する強力で直感的な方法を提供します。単純なリストを超えて、データがどのように実際に連結しているかを確認できます。

ユースケース

  • 関連する取引先責任者と商談を含む取引先の階層の視覚化。

  • 組織図の表示(例: ManagerId フィールドに基づくユーザ階層)。

  • 製品構造のマッピング(例:製品バンドルとそのコンポーネント)。

  • ケースの依存関係や関連ナレッジ記事の表示。

  • 親子タスクを含む複雑なプロジェクト構造の視覚化。


設定

キャンバスで Relationship Graph コンポーネントを選択してプロパティパネルでそのプロパティにアクセスします。設定には、データへの接続、データの表示方法のマッピング、および動作のカスタマイズが含まれます。

階層データへの接続(データソース)

Relationship Graph は階層データで動作するように設計されています。このデータを提供する主な方法は、 Avonni Nested Query Data Source.

1

データソースを選択

プロパティパネルで、 データソース プロパティを Avonni Nested Query Data Source.

2

ネストクエリを構成

クリック クエリを作成 または クエリを編集.

  • 親オブジェクトのクエリ: 最上位レコードのクエリを定義します(例:オブジェクト: Account)。必要に応じてフィルタを追加します。

  • 子オブジェクトを追加: ネストクエリビルダー内で子の関係を追加します。

    • 子オブジェクトを選択します(例: Contact).

    • 次に リレーションシップフィールド を指定します オブジェクトの (例: AccountId が Contact 上にある場合)。

  • さらにネストを追加(オプション): 必要に応じて別のレベルを追加できます(例: CaseContactの子として追加し、 ContactId リレーションシップフィールドを使用する)。

  • 複数の親オブジェクト(オプション): コンポーネントの機能に応じて、次のことが可能な場合があります:追加することが 複数の独立した親クエリ 同じグラフ内で異なる開始階層を表示したい場合。

  • クエリを保存: ネストクエリ定義を保存します。

グラフノードへのデータのマッピング(データマッピング)

この重要なセクションは定義します どのように ネストクエリの各レベルからのデータがグラフノード上に視覚的に表示されるか。

1

データマッピングにアクセス

プロパティパネルで、次を見つけます データマッピング セクション。

2

アイテムレベルを選択

通常、ネストクエリで定義された各レベル(例:「Account Item」「Contact Item」「Case Item」)に対応するセクションが表示されます。設定したいレベルを選択してください。

3

各レベルの属性をマップ

選択したアイテムレベル(例:Account)について:

  • ラベル: ノードの主要な表示テキストにするクエリ結果のフィールドを選択します(例、 Account.Name).

  • アイコン名(オプション): SLDSアイコン名を含むフィールドを選択するか、静的なアイコン名を入力します(例、 standard:account)をノードにアイコンを表示するために使用します。

  • 追加フィールド(オプション): ノードに補助情報として表示したい他のクエリフィールドを追加します。

  • 展開(オプション - 親ノード向け): (ブール)グラフが読み込まれたときにこのレベルのノードをデフォルトで子を表示するために展開するかどうかを設定します。ブールフィールドにバインドするか静的値を設定します。

4

マッピングを繰り返す

ステップ3を繰り返します 各アイテムレベルごとに (例:まずContactsのマッピングを設定し、次にCasesを設定します)。

ヘッダー設定

グラフ上部に表示されるヘッダーをカスタマイズします。

  • タイトル: (テキスト)グラフのタイトルを入力します(例:「Account Relationships」)。

  • アイコン名: (テキスト、オプション)ヘッダー用のアイコン。

  • アクション: (アクション、オプション)グラフ全体に関連するヘッダーレベルのボタンを追加します、 グラフ全体 (例:「すべて展開」「すべて折りたたむ」「更新」)。これらは標準のAvonniインタラクションを使用します。

ノード設定

子を持つノードの展開/折りたたみコントロールの外観をカスタマイズします。

  • 展開アイコン名: (テキスト)ノードを展開するボタンのアイコン名(例、 utility:add).

  • 折りたたみアイコン名: (テキスト)ノードを折りたたむボタンのアイコン名(例、 utility:dash).

インタラクション設定

グラフのノードに直接インタラクティビティを追加します。インタラクションは通常、各アイテムレベルの データマッピング セクション、または場合によってはコンポーネント全体のインタラクションとして構成されます。

  • グループ/親ノードのアクション: 最上位(親)ノードをクリックしたときにトリガーされるインタラクションを定義します。

  • アイテム/子ノードのアクション: 個々の子ノードをクリックしたときにトリガーされるインタラクションを定義します。

  • グラフノードの一般的なインタラクションアクション:

    • ナビゲート: これを使用してユーザーを別のページに誘導します。非常に一般的なユースケースは、 レコードページ をクリックしたノードのために開くことです。

      • 構成例: ページ参照タイプを レコードページに設定し、そのノードレベルに適切なオブジェクトAPI名を選択し、レコードIDを アイテム名 にマップした属性に設定します。

    • フローダイアログを開く / フローパネルを開く: モーダルまたはサイドパネルで スクリーンフロー を起動して、クリックしたノードに関連するプロセス(例:詳細の編集、関連タスクの作成、通話の記録)をユーザーに案内します。

      • 構成例: 目的のスクリーンフローを選択し、クリックされたノードのIDを( アイテム名 属性)を使用してフローへの入力変数として渡します。

    • フローを実行: トリガーする 自動起動フロー をクリックしたノードに関連するバックグラウンド処理(例:レコードステータスの更新、メール通知の送信、標準タスクの作成)に対して行います。

      • 構成例: 該当する自動起動フローを選択し、ノードのIDを( アイテム名)から入力変数として渡します。

    • トーストを表示: クリックされたノードにマップされた他のフィールドの詳細を含める可能性がある、簡潔な情報メッセージをユーザーに表示します


例:取引先 → 取引先責任者 → ケース階層

  1. データソース(ネストクエリ):

    • 親: Account

    • 子1: Contact (経由で関連: AccountId,

    • 子2(取引先責任者の下にネスト): Case (経由で関連: ContactId,)

  2. データマッピング:

    • 取引先アイテム: ラベル: Name, アイコン名: standard:account, 展開: true

    • 取引先責任者アイテム: ラベル: Name, アイコン名: standard:contact

    • ケースアイテム: ラベル: CaseNumber, アイテム名: Id, アイコン名: standard:case, 追加フィールド: Status

結果: アカウントを表示するインタラクティブなグラフで、関連する取引先担当者(Contacts)を展開し、さらに関連するケース(Cases)を展開して表示できます。任意のノードをクリックすると、そのレコードページに移動します。


主な考慮点

  • データモデル: Salesforce のデータにおいて、明確な親子関係(参照項目)が必要です。

  • ネストクエリの設定: ネストクエリデータソースの正しい設定が重要です。

  • パフォーマンス: 非常に大規模または深くネストされた階層(数千のノードを含むなど)は読み込みパフォーマンスに大きな影響を与える可能性があります。可能な場合はクエリにフィルタを使用してください。

  • 明確さ: ラベルや追加フィールドを含めたグラフ表示の設計を、明確で煩雑にならないようにしてください。


まとめ

Avonni Relationship Graph は、階層データを Lightning ページ上で視覚的に探索・操作する強力な方法を提供します。ネストクエリを活用し、明確なデータマッピングを設定することで、コード不要で複雑な関係を直感的で実用的なビジュアルに変換できます。

最終更新

役に立ちましたか?