プログレスバー

設定 あなたのバーコード

進捗バーの値は何によって決まりますか？

進捗バーが進捗を表示する方法にはいくつかの選択肢があります：

進捗バーの値を決定する方法

Progress Bar コンポーネントに表示される値は、次のいずれかの方法で設定できます：

オプション	説明	最適な用途
マッピング済み	進捗バーの値を単一の Salesforce フィールドまたは変数に直接リンクします。	1 つの値で進捗を表す単純なシナリオ（例：パーセンテージフィールド、タスク数）。
高度（数式）	複数のフィールドや変数を組み合わせるなど、進捗値を計算するカスタム数式を定義します。	カスタム計算や異なる基準に対する重み付けされた進捗が必要な複雑なシナリオ（例：平均スコア、重み付きタスク）。
クエリ	クエリを実行して進捗値を計算または取得します。多くの場合、集計関数（AVG、SUM、MAX など）を使用します。	複数レコードにまたがるデータを集計して進捗を決定する場合（例：個々のタスクのステータスに基づくプロジェクト全体の完了度）。

例となるシナリオ

• 販売目標の進捗：

  • マッピング： バーを「成約金額（Amount Closed）」フィールドにリンクします。

  • 高度： 「成約金額」を「割当（Quota）」で割ることで進捗を計算します。

  • クエリ： 特定のステージにあるすべての商談の「完了率（Percent Complete）」の平均を取ります。

• カスタマーサティスファクション：

  • マッピング： 「顧客満足度スコア（Customer Satisfaction Score）」フィールドの値を表示します。

  • 高度： 複数のアンケート回答フィールドを組み合わせて合成スコアを作成します。

  • クエリ： 製品に対するすべての顧客レビューの平均評価を求めます。

適切なオプションの選び方

進捗バーの値を設定する方法をどのように決めますか？次の点を考慮してください：

• シンプルな進捗トラッキングの場合： 進捗が単一のフィールドや変数（例：完了率フィールド）で表される場合は、 マッピング済み オプションが最も迅速かつ簡単な選択です。

• カスタム計算が必要な場合： 複数のフィールドを組み合わせたり、特定の重み付けを適用したり、カスタムロジックで進捗値を決定する必要がある場合は、 高度（数式） リッチテキストフィールドは

• レコード間でデータを集計する場合： 進捗値を複数レコードのデータを要約して計算する必要がある場合（例：全体プロジェクトのためのタスクステータスの平均化）、 クエリ オプションは最も柔軟で強力な機能を提供します

バリアントとテーマの選択

バリアント 値を参照するフィルターを追加します： テーマ 属性は Progress Bar インジケーターの外観を定義します。バリアントでは Base から Circular まで選択できます。

Base と Circular のバリアント比較

The テーマ 属性を使うと Progress Theme の特定のテーマを定義できます。テーマのスタイリング設定は、 スタイルパネル.

アバターの追加

属性を使用すると、進捗バーの左右どちらかにアバターを追加できます。アバターは Lightning Design System ライブラリのアイコンか、カスタム画像をアップロードして使用できます（カスタム画像は 画像 属性でそれらの単位を視覚的に示すことを検討してください。

アバター付き進捗バー

---

インタラクションの追加

利用可能なインタラクションはありません。

---

進捗バーの外観のカスタマイズ

The スタイル パネルでは、デザインに合わせて進捗バーの外観を調整できます。カスタマイズできる項目は次のとおりです：

• サイズ： 進捗バーの全体サイズを調整します（小、中、大）。

• カラーバリアント：

  • ベース： 標準的なカラースキーム。

  • 代替（Alt Inverse）： 暗い背景向けの高コントラスト。

  • エラー： 問題や失敗を示します。

  • 情報（Info）： 情報表示のための中立的な色。

  • インバース（Inverse）： 暗い背景上のライトバー。

  • オフライン： バーがアクティブに更新されていないときに表示されます。

  • 成功： ポジティブな結果を表します。

  • 警告： 注意や潜在的な問題を示します。

• 特定の要素：

  • 値： 表示される数値のスタイルを変更します。

  • ラベル： 任意のテキストラベルの外観をカスタマイズします。

進捗バーのスタイル方法

1. を開きます スタイル コンポーネントのスタイルタブ。

2. カスタマイズしたい属性を選びます。

3. 希望する色、フォント、サイズを選択します。

詳細な手順や高度なスタイリングオプションについては、当社の スタイリングガイド.

進捗バーにグラデーションを適用する方法

Progress Indicator コンポーネントでは、グラデーションを使用して進捗バーの外観をカスタマイズできます。

手順は次のとおりです：

1. 「完了色（Completed color）」の設定を見つける： スタイルパネルの「Bar」スタイルセクションを見つけます。そこに「Completed color」属性が表示されます。

2. グラデーションを適用する：

   • グラデーション角度： グラデーションの方向を選択します。

   • グラデーションの色： グラデーションに使用する色を定義します。

   • 色の位置： 各色が開始および終了する位置をパーセンテージ（%）で指定します。

例: 赤（0%）から黄（50%）を経て緑（100%）へ移行するグラデーションにしたい場合は、それぞれの色を対応するパーセンテージ位置に設定します。