ヘッダー

Avonni ヘッダーは、タイトル、サブタイトル、アイコン、画像、ナビゲーションリンクを追加して情報性と視覚的魅力のあるヘッダーを簡単に作成する方法を提供します。

概要

Avonni Header コンポーネントは、Salesforce の Dynamic Components にタイトル、サブタイトル、アイコン、画像、および構造を追加します。レイアウト要素として、特定のデータオブジェクトに結びつけることなく、注目を集め文脈を提供するプレゼンテーションに焦点を当てます。

主な機能は次のとおりです：

• テキスト要素： キャプション、タイトル、サブタイトルによる階層的な情報表示。

• ビジュアル： エンゲージメントのためのアイコンと背景画像。

• 動的バインディング： 変数、数式、レコードフィールドにリンクして適応可能にする。

• 統合： 下のコンテンツと馴染ませるための「結合」オプション。

• 簡潔さ： ページ、セクション、フォームのヘッダーを素早く設定可能。

ユースケース

• ページヘッダー： アプリやレコードページの最上位タイトル（例：「Account Overview」）。

• セクション区切り： カードやコンテナ内のコンテンツを整理（例：「Billing Details」）。

• フォームヘッダー： 入力グループのラベル（例：「Create New Contact」）。

• ダッシュボードラベル： チャートやメトリクスセクションのタイトル。

• 視覚的区切り： 長いページを分割して可読性を向上。

Header コンポーネントと Card コンポーネントの選び方

どちらも見出しとして機能しますが、用途に応じて選択してください：

コンポーネント	最適な用途	主な違い
Header	シンプルな独立タイトルと基本的なアイコン/テキスト向け。	テキスト/アイコンに注力し、ネストされたコンポーネント用のスロットはなし。
Card	下にコンテンツを含む統合見出し向け。	他の要素用のスロットを含み、レイアウトの柔軟性とスタイリングが豊富。

設定

キャンバス上で Header を選択すると、右側のプロパティパネルでプロパティにアクセスできます。

プロパティ

これらはテキスト、ビジュアル、および動作を制御します。

プロパティ	タイプ	説明	例
API名	AccountId equals {!inputAccountId}	インタラクションや数式で参照するための一意の識別子。	AccountHeader
キャプション	テキスト/バインディング（任意）	タイトル上の短いテキスト。静的または変数/数式にバインド可能。	"Account" または {!accountType}
タイトル	テキスト/バインディング	メイン見出し。動的にするには（例：レコードフィールド）にバインド。	"Account Details" または $Component.record.Name
サブタイトル	テキスト/バインディング（任意）	タイトルの下に表示する詳細用テキスト。	"Industry: {!industryVar}"
アイコン名	テキスト/バインディング（任意）	タイトルの横に表示する SLDS または Avonni アイコン。数式で動的に指定可能。	standard:account
背景画像	テキスト/URL（任意）	背景用の URL。動的にするには変数にバインド。	"https://example.com/bg.jpg" または {!bgImageVar}
結合するか	Boolean	ヘッダーを下のコンテンツと視覚的に接続（例：下境界を削除）。	統合された見た目にするためにオンにします。

ヒント： アイコンについては Salesforce Lightning Design System (SLDS) のドキュメントで名前を参照してください。プロパティをバインドしてヘッダーを文脈に応じたものにしましょう。

例

静的ヘッダー

1. プロパティの設定：

   • キャプション：（空白）

   • タイトル：「Account Details」

   • サブタイトル：「Information about the current Account」

   • アイコン名：standard:account

   • 背景画像：（なし）

   • 結合：オン

結果： アイコン付きの基本的で変化しないヘッダー。静的なデータテーブルの上に置くのに最適です。

アカウントレコードページの動的ヘッダー

1. プロパティの設定：

   • ターゲットページオブジェクトを Account に設定する：Dynamic Component の設定（例：キャンバスやメインプロパティ）で「Account」を選択します Target Page Object. なぜこれをするのか？ これによりコンポーネントが Account レコードページ上に配置されていることが通知され、$Component.record.FieldName のようなバインディングを通じて現在のレコードのデータにアクセスできるようになります。これを設定しないと、動的なレコードバインディングは動作せず、ヘッダーは静的なままになります。

   • キャプション："Account"

   • タイトル: にバインドされます）。ユーザーはこれらのフィールドを表示または編集できます。 （現在の Account の Name フィールドにマッピング）

   • サブタイトル: $Component.record.Industry （現在の Account の Industry フィールドにマッピング）

   • アイコン名: standard:account

   • 背景画像：（なし）

   • 結合するか：オン

結果： ヘッダーはレコードごとに更新されます（例：タイトルに「Acme Corp」が表示され、サブタイトルが動的に変化）。

主な注意点

• 動的な力： キャプション／タイトル／サブタイトルをレコード変数やターゲットページオブジェクトにバインドして、文脈に応じたヘッダー（例：ユーザー固有やレコードベース）を作成します。

• アイコン選択： 関連する SLDS アイコンを選択し、デバイス間で視覚的一貫性があるかテストしてください。

• 背景画像： テキストの可読性を確保するためにコントラストの高い画像を選び、注意をそらさないように多用を避けてください。

• 結合オプション： 下のコンテンツと統合するにはトグルで切り替えます。

• アクセシビリティ： 明確で階層的なテキストを使用し、画像やアイコンに代替テキストが必要な場合はカスタム属性で追加してください。

• パフォーマンス： 動的バインディングは、読み込み時の遅延を避けるため効率的な数式を必要とする場合があります。

よくある問題のトラブルシューティング

• バインディングが更新されない場合： リソース名（例：$Component.record.Name）を確認し、ページのコンテキスト（アプリとレコード）をチェックしてください。

• アイコンが表示されない場合： 有効な SLDS 名か確認し、利用可能なオプションについては Avonni/SLDS のドキュメントを参照してください。

• 背景がテキストを覆っている場合： サポートされている場合は CSS で画像の不透明度を調整するか、より明るい画像を選んでください。

• 視覚的な接続がない場合： Is Joined がオンになっていることと、親コンポーネントに競合する境界線がないことを確認してください。

• バインディングがあるのに静的な場合： サンプルデータでテストし、キャンバスをリフレッシュするかアプリでプレビューしてください。

まとめ

Avonni Header コンポーネントは、Dynamic Components を構造化するための柔軟で魅力的なタイトルを提供します。動的バインディングとビジュアルを活用することで、Salesforce における明確で文脈に沿った UI に不可欠です。関連コンポーネントは Avonni Card やレイアウトガイドを参照してください。