アバター

概要

Avonni Avatar コンポーネントは、Salesforce 内でユーザーやエンティティの画像、シンボル、イニシャルを表示します。ユーザープロファイル、連絡先、その他のエンティティを表す場合でも、Avatar は一貫して視覚的に魅力的な表示を提供します。

アバターのカスタマイズ

Avonni Avatar コンポーネントは、Salesforce Experience Cloud サイト内でユーザーやエンティティを視覚的に一貫して表現するのに役立ちます。以下はアバターをニーズに合わせてパーソナライズする手順ガイドです：

1. イニシャルの表示

Avatar コンポーネントは、イニシャルの表示方法に柔軟性を提供します：

手動入力

表示したいイニシャルが分かっている場合は、"Initials" フィールドに直接入力してください。

動的生成（式）

Avonni コンポーネントを動的にするには、次を使用できます Experience Cloud Expressions。例えば、下の Avatar コンポーネントでは、次の式を使用して現在ログインしているユーザーの名前を自動的に表示できます：

{!User.Record.Name} 

を置き換えることができます 名前 Salesforce 組織内でユーザーの名前を格納している実際のフィールド名に。

フルネームからイニシャルを自動生成したい場合は、"Initials Auto Formatted" オプションを有効にしてください。これにより、Experience Cloud の式を使用して名前内の各単語の最初の文字を抽出およびフォーマットします。

2. カスタム画像

• 目的： カスタム画像を追加することでパーソナライズが強化され、Avatar がすぐに識別しやすくなります。これはブランディング、ユーザープロファイル、または視覚的識別が重要なあらゆる状況に最適です。

• カスタマイズ方法： "Selected Content" オプションを使用して画像をアップロードしてください。コンポーネントは自動的に Avatar 内に収まるようフォーマットします。

3. バリアント（形状）

• 目的： サイトのデザイン美学を補完するために、円形または四角形の形状を選択してください。

• カスタマイズ方法： "Variant" フィールドを使用して、"circle" または "square" のいずれかを選択します。

4. サイズ

• 目的： Avatar のサイズを調整して、ページ上の他の要素と視覚的にバランスを取るようにしてください。

• カスタマイズ方法： "Size" プロパティを次のいずれかのオプションに設定します：x-small、small、medium、large、x-large、xx-large。

5. プライマリおよびセカンダリテキスト

• 目的： Avatar の横に情報を直接追加して、さらに文脈を提供します。一般的な使用例は次のとおりです：

  • フルネーム

  • 職種（役職）

  • メールアドレス

  • その他の関連情報

• カスタマイズ方法：

  • 最も重要な情報には "Primary Text" フィールドを使用してください。

  • "Secondary Text" フィールドに追加の詳細を入力します。

  • 各テキストレベルに適切なフォントスタイルを選択します（例：見出し、段落）。

式（EXPRESSIONs）

6. タグ

• 目的： タグは Avatar を素早くカテゴライズしたり、関連するキーワードを視覚的に追加したりする手段を提供します。

• カスタマイズ方法： Avatar にリンクされたタグを作成します。識別を助けるために独自のタグ "Variant"（例：色、スタイル）を選択してください。

利用例

• ユーザープロフィール： カスタム画像、名前、役職を持つ Avatar は、プロファイルページ上で明確な表現を作成します。

• コミュニティフォーラム： コメントの横にユーザーの Avatar を表示して、エンゲージメントとやり取りを向上させます。

• チームページ： 関連情報やタグを含めてチームメンバーを Avatar で表現し、コラボレーションを支援します。

仕様