縦型ナビゲーション

概要

この Avonni 縦型ナビゲーション コンポーネントは、ナビゲーションリンクやメニュー項目を縦方向に提示するための、分かりやすく直感的な方法を提供します。Salesforce アプリケーション内でのスペースの効率的な管理とユーザーフレンドリーなナビゲーションに最適です。


縦型ナビゲーションコンポーネントの設定

キャンバス上で縦型ナビゲーションコンポーネントを選択し、プロパティパネル(右側パネル)でそのプロパティにアクセスします。

基本プロパティ

  • API 名: (テキスト) このコンポーネントインスタンスの一意の識別子(例: MainVerticalNav).

  • コンパクト: (ブール - チェックボックス) 有効にすると、縦方向のスペースが限られている場合に適した凝縮された形式でナビゲーションが表示されます。

  • シェード: (ブール - チェックボックス) 有効にすると、ナビゲーションの背景が白から控えめな淡いグレーに変わり、視覚的な区別が向上します。


データソース

ナビゲーション項目の入力方法を決定します:

  • 手動:

    • ナビゲーション項目をコンポーネントの設定に直接入力します。

  • クエリ:

    • SOQL クエリを使用して Salesforce レコードから動的にナビゲーション項目を取得します。

  • ピックリスト:

    • 標準またはカスタムの Salesforce ピックリスト値から自動的にナビゲーション項目を取得して表示します。


データマッピング

を使用する場合、 クエリ データソースとして縦型ナビゲーションコンポーネントを使用する場合、 データマッピング Salesforce のフィールド値が各ナビゲーション項目の視覚的および機能的プロパティにどのように反映されるかを定義できます。

データマッピングは、生の Salesforce データを構造化されたユーザーフレンドリーなナビゲーションメニューに変換するために不可欠です。データの特定フィールドをコンポーネントの表示および動作属性に接続することで、各ナビゲーション項目が文脈に沿った情報を持ち、視覚的に区別され、条件に応じてインタラクティブになるようにします:

  • ラベル: 各ナビゲーション項目に表示される主要なテキスト。

  • アバター: ナビゲーション項目の横に表示されるアバターまたはアイコン画像への URL またはリソースリンク。

  • タグ: 二次的なメタデータとして表示されるテキストラベルまたはタグ。

  • 無効: ナビゲーション項目が選択可能かどうかを示すブールフィールド。

  • 非表示: ナビゲーション項目を表示するかどうかを指定するブールフィールド。

注意: 手動データソースを使用する場合、これらの属性は各ナビゲーション項目ごとに手動で提供する必要があります。


アクティブタブ値の有効化

この アクティブタブ値の有効化 設定では、コンポーネント読み込み時にどのナビゲーション項目をデフォルトでアクティブ(つまり視覚的に選択された状態)にするかを定義できます。これにより、ユーザーは特定のセクションが事前に選択された状態で開始でき、アプリ内の案内とコンテキストが向上します。

アクティブなタブ値は次の2つの方法で設定できます:

  • 手動データソース: 手動で入力したナビゲーション項目を使用する場合、アクティブな項目は、 アクティブタブ値の有効化 フィールドに入力された値と 属性のいずれかを照合することで決定されます。デフォルトで項目をアクティブにするには、その がアクティブタブ値の設定で指定したものと完全に一致するようにしてください。

  • 動的データソース(クエリまたはピックリスト): アクティブタブ値をフィールドや変数にバインドして、実行時に動的に変更できるようにできます。これは、レコード ID やユーザー入力に基づいて項目を選択するなど、コンテキストに応じたシナリオで有用です。

アクティブなタブを設定することで、コンポーネントが読み込まれた瞬間からユーザーにより集中した関連性の高いナビゲーション体験を提供できます。


表示設定

これらの設定は、縦型ナビゲーションの視覚的な表示とレイアウトを制御します:

  • コンパクト: 縦方向の画面領域が限られている場合にスペースを節約するのに最適です。

  • シェード: 周囲のコンテンツと明確に区別するために控えめな背景色を追加します。


Interactions

この 縦型ナビゲーション コンポーネントでは、ナビゲーション項目がクリックされたときに応答するカスタムのインタラクションを定義できます。これらのインタラクションにより、単純なメニューがページロジック、オートメーション、ユーザーフローを駆動する強力な制御機構に変わります。

項目クリック時

ユーザーがナビゲーション項目を選択したときにトリガーされるアクションを構成できます。これには次が含まれます:

  • ナビゲート:ユーザーをレコード詳細ページ、カスタムページ、または外部 URL にリダイレクトします。

  • フローを実行:選択された項目のデータを入力パラメータとして使用して Salesforce フローを起動します。

  • トーストを表示:項目がクリックされたときに通知または確認メッセージを表示します。

インタラクションの代替:条件付きコンポーネント表示

インタラクションの使用に加えて、縦型ナビゲーションで選択された項目に基づいてページ上の他のコンポーネントの表示を制御できます。を構成することで、 コンポーネント表示ルール特定の項目(値による)が選択されている場合にのみコンポーネントを表示するように設定できます—インタラクションを定義する必要はありません。これは、表示コンテンツがユーザーのナビゲーション選択に応じて適応するコンテキスト対応レイアウトの構築に役立ちます。

これらのオプションを組み合わせることで、縦型ナビゲーションコンポーネントを使用して動的で個別化された応答性の高いインターフェースを作成する柔軟性が得られます。


例:Salesforce レコードからナビゲーション項目を表示する

シナリオ: Salesforce の商談(Opportunity)を表すナビゲーション項目を動的に表示します。

設定手順:

  1. クエリを作成:

    • 主要オブジェクトとして Opportunity を選択します。

    • データを絞り込むための必要なフィルターを適用します。

  2. データマッピングを設定:

    • ラベル:にマッピング 商談名(Opportunity Name) フィールド。

    • アバター:必要に応じて画像 URL または静的リソースにマッピングします。

    • タグ:ステータスまたは種類フィールドにマッピングします。

    • 無効/非表示:ビジネスロジックに基づくブールフィールドまたは条件にマッピングします。

  3. アクティブタブ値:

    • 商談の条件に基づいて動的に設定します。例えば、最初のレコードをデフォルトでアクティブに選択するなど。

これで縦型ナビゲーションは商談レコードをナビゲーション項目として動的に読み込み、ステータスを明確に示し、インタラクティブでコンパクトなナビゲーション体験を提供します

最終更新

役に立ちましたか?