YouTube ChannelSchedule a CallSubscribe for Updates

ツリー

Avonni Tree は階層データを使いやすい折りたたみ可能なツリー形式で表示し、ナビゲーションを簡単にします。

ツリーコンポーネントの構成

キャンバス上でツリーコンポーネントを選択し、プロパティパネル（右側のパネル）でそのプロパティにアクセスします。

基本プロパティ

  • 実際の:（テキスト）このコンポーネントインスタンスの一意の識別子（例：AccountHierarchyTree）。

  • ヘッダー:（テキスト、任意）ツリーの上に表示されるタイトル。例: "Account Hierarchy"。

  • マルチセレクト:（ブール値 - チェックボックス）有効にすると、ユーザーは複数の項目を選択できます。

  • 独立したマルチセレクト:（ブール値 - チェックボックス）有効にすると、ユーザーは異なる階層レベルで複数の項目を選択できます。

  • アイテム数を表示:（ブール値 - チェックボックス）有効にすると、各ノードの子の数が表示されます。

データソース

データソース: ツリーのデータをどのように取得するかを選択します:

手動

コンポーネントの設定に直接データを入力してください。

ピックリスト

Salesforce内の標準またはカスタムのピックリスト項目から動的にデータを取得します。

ネストされたクエリ

サブクエリを使用して関連する Salesforce オブジェクトからデータを取得し、複雑なデータ取得を可能にします。

データマッピング

動的なデータソースを使用する場合は、データソースのフィールドをツリーコンポーネントの属性にマッピングする必要があります。これにより、データの表示方法と階層の構造化方法をコンポーネントに指示します。

クエリデータソースに関する重要な注意

"Query" データソースを使用するには、 必ず クエリを次のように構成する必要があります ネストされたクエリ、たとえ単一レベルのデータのみを表示する場合（つまり真の親子関係がない場合）でも。ネストされたクエリの最上位は主要データを表し、必要に応じてツリーのより深いレベルのために子クエリを追加できます。これは標準のクエリとは異なります。

ネストされたクエリの手順に関する注意

次の設定用インターフェースとオプション ネストされたクエリ は、このチュートリアルの作成以降に更新されています。中核となる概念は同じですが、以下に示す具体的な手順は現在の Avonni Component Builder のものと異なる場合があります。最新の強化点を反映するため、本ガイドの更新に取り組んでいます。

その他の設定

このセクションでは、Avonni のツリーコンポーネントで利用可能な各種設定オプションについて説明します。

ヘッダー（任意）

これらの設定は、ツリーコンポーネント上部の任意のヘッダー領域の外観を制御します。

ヘッダー: メインのヘッダータイトルとして表示するテキスト。

ヘッダーアイコン名:（おそらく Salesforce Lightning Design System（SLDS）のアイコン名）ヘッダーテキストの横に表示するアイコンを指定します。例: utility:folder。

ヘッダー画像ソース: ヘッダーに表示する画像の URL（アイコンの代わり、またはアイコンに加えて）。静的リソースまたは動的に生成された URL である可能性があります。

選択とインタラクション

これらの設定は、ユーザーがツリー内の項目をどのように操作・選択するかを制御します。

マルチセレクト

有効にすると、ユーザーはチェックボックスや Ctrl+クリックなどで同時に複数のツリーノードを選択できます。無効にすると、単一選択のみが許可されます。折りたたみを無効: true の場合、展開済みツリーノードの折りたたみを禁止します。これにより、すべてのブランチが開いたままになります。

アイテム数を表示

有効にすると、各親ノードの横に子アイテム数を表示します（例: "Accounts (5)"）。

折りたたみを無効

ツリー内の展開済みノードをユーザーが折りたたむことを防ぎます。 を実行します—追加の設定は不要です。に設定されている場合、ツリーのすべてのブランチは開いたままとなり、展開/折りたたみコントロール（通常は山形記号やプラス/マイナスアイコン）は非表示または無効化されます。

インタラクション

アイテムクリック時（On Item Click）

ユーザーがツリーアイテムを クリック したときにトリガーされるインタラクションを定義します。一般的なアクション:

  • ナビゲート: 選択された項目のレコード詳細ページへ移動。

  • 変数値を設定: 選択された項目の value （通常はその ID）を変数リソースに保存します。

  • フローを実行: フローを起動し、選択された項目のデータを入力変数として渡します。

  • Show Toast: メッセージを表示します。

例: アカウント配下に関連する取引先責任者を表示

この例では、アカウントを親ノード、その関連する取引先責任者を子ノードとして表示するツリーの作成方法を示します。これは ネストされたクエリ を使用して、アカウントと取引先責任者の両方を効率的に取得します。

1. ネストされたクエリを作成

  • クエリを追加: 新しい「ネストされたクエリ」を追加

  • 親オブジェクト:

    • を選択し、 Account を オブジェクト。ç

    • 必要に応じてフィルターを追加

    • ラベルおよびメタテキスト属性でデータマッピングを行う

  • 子オブジェクト:

    • 親オブジェクト名の横にある小さな矢印をクリックして「子オブジェクトを追加」をクリックします。

    • を選択し、 取引先責任者（Contact） を オブジェクト.

    • ラベルおよびメタテキスト属性でデータマッピングを行います。

これで、ツリーコンポーネントはアカウントを親ノードとして表示します。アカウントノードを展開すると、関連する取引先責任者が子ノードとして表示されます。

最終更新

役に立ちましたか？