> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-progress-indicator.md).

# AX - 進捗インジケーター

## 概要

**AX - 進行状況インジケーター** Experience Sites ページ上のピックリスト項目の値に基づいて、プロセスの段階を視覚的なステップトラッカーとして表示する Experience Cloud コンポーネントです。

ポータルユーザーに、レコードがワークフローのどこにあるかを示すために使用します。注文ステータス、申請段階、オンボーディングの手順、承認プロセスなどです。ユーザーは現在の進行状況と完了済みのステップを確認できます。水平、垂直、またはパス形式のレイアウトから選択し、Experience Builder で設定します。

注文追跡、申請ステータスの表示、オンボーディングの進行、承認ワークフロー、またはポータルユーザーが複数ステップのプロセス状況を視覚的に把握する必要があるあらゆる場面に最適です。

{% hint style="warning" %}

#### 注意

このコンポーネントは **表示専用** — ステップをクリックしてもレコードは更新されず、現在のピックリスト値を読み取り、対応するステップを視覚的に表示するだけです。ユーザーにレコードのステータスを変更させるには、レコード更新を処理する別のコンポーネントまたはカスタムソリューションと組み合わせる必要があります（以下の FAQ セクションを参照）
{% endhint %}

## はじめに

この簡単なチュートリアルを使って、Progress Indicator コンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed url="<https://app.arcade.software/share/ZU4p8JnowZCmgWi7FUKf>" flowId="ZU4p8JnowZCmgWi7FUKf" %}

## 設定

### プロパティ

**タイプ** スタイルを選択します: **ベース**, **垂直**, **バー**, **円形**, **Path**、または **縦型ナビゲーション**.

**形式** フローを制御します: **リニア** （標準の進行フロー）または **ノンリニア** （進行は順序どおりには進みません）。

**シェーディング** コンポーネントにシェーディング効果を適用します。

**現在のステップ** 進行フローにおける現在のステップを定義します。

**アイコンの配置** ステップアイコンを配置します: **中央** （ステップ内）または **上** （ステップの上部）。 **アイコンサイズ** 小、中、大から選択します。

**ステップ番号を表示** 各ステップの番号を表示します。 **ステップラベルを表示** 各ステップのラベルを表示します。

**バー値を非表示** 進行バー上の値／割合を非表示にします。

**データソース** ステップを定義します: **手動** （進捗データを手動入力）または **ピックリスト値** （ピックリストの値を使用して進捗を定義します）。

**代替テキスト** スクリーンリーダー向けに進行状況インジケーターを説明するアクセシブルなテキストを提供します。

## スタイリング

{% tabs %}
{% tab title="バー" %}
色と完了色をカスタマイズします。
{% endtab %}

{% tab title="アイコン" %}
次のような幅広い色のカスタマイズを提供します:

* **`フォーカス`**, **`通常`**, **`塗りつぶし`**, **`枠線`**, **`アクティブ`**, **`完了`**、および **`エラーの色`** （およびその塗りつぶし／枠線バリアント）。
  {% endtab %}

{% tab title="ステップラベル" %}

* **テキスト色**：ラベルテキストの色を設定します。
* **フォントサイズ**：フォントサイズを定義します。
* **フォントファミリー**：ラベルの書体を選択します。
* **フォントの太さ**：フォントの太さを選択します。
* **テキストシャドウ**：テキストに影効果を追加します。
* **行数制限**：ラベルテキストの行数を制限します
  {% endtab %}
  {% endtabs %}

## ユースケース

### 例 1: 販売プロセスのパス

{% @arcade/embed url="<https://app.arcade.software/share/WPNsAX5UXy9v9pc0SGSp>" flowId="WPNsAX5UXy9v9pc0SGSp" %}

パートナーユーザーを、導入を促進し商談を前進させる、視覚的で直感的なパスで販売プロセスの各段階へ導きます。

***

#### **達成できること**

* **ガイド付きの販売体験:** 各商談が販売プロセスのどこにあるかを、パートナーユーザーに明確で視覚的に示します
* **利用促進:** Experience サイト上で適切な段階情報を直接表示し、混乱を減らしてエンゲージメントを向上させます
* **パイプラインの可視化:** ポータルを離れずに、次のステップについてパートナーの認識を揃えるのに役立ちます

***

#### **設定方法**

{% stepper %}
{% step %}

#### **ページにコンポーネントを追加する**

* AX – Progress Indicator コンポーネントを、目的のページの Experience Builder にドラッグします
  {% endstep %}

{% step %}

#### **データソースを設定**

* 選択し **ピックリスト値を使用** をデータソースの種類として
* 次を設定します。 **オブジェクト API 名** を `Opportunity`
* 次を設定します。 **ピックリスト項目** を `ステージ`
* 次を設定します。 **レコードタイプ** を `Master`
* 次を設定します。 **並び順** を `デフォルト`
  {% endstep %}

{% step %}

#### **表示をカスタマイズ**

* 次を設定します。 **タイプ** を `Path`
* 次を設定します。 **現在のステップ** を `{!Item.Stage}` 各商談のアクティブなステージを動的に反映するために
  {% endstep %}

{% step %}

#### **作業をプレビュー**

* Experience Builder のプレビューを使用して、さまざまな商談ステージでパスが正しく表示されることを確認します
  {% endstep %}
  {% endstepper %}

***

#### **リンク**

{% content-ref url="/pages/dc821f53af680f5554da87764b9ae7bc1cda96ed" %}
[AX - レコード詳細](/experience-cloud/experience-cloud-ja/experience-components/ax-record-detail.md)
{% endcontent-ref %}

***

### 例 2: 顧客の注文ステータス

{% @arcade/embed url="<https://app.arcade.software/share/MQbhk3KEUgyVjAfo4zfb>" flowId="MQbhk3KEUgyVjAfo4zfb" %}

注文から完了まで、すっきりとして追いやすい縦型進行インジケーターで、顧客に注文の進捗をすぐに分かりやすく示します。

***

#### **達成できること**

* **注文状況のリアルタイム可視化:** 最新の注文ステータス情報を顧客ポータル内で直接表示します
* **サポート問い合わせの削減:** 顧客が自分で注文追跡できるようにし、サポートへの連絡の必要性を減らします

***

#### **設定方法**

{% stepper %}
{% step %}

#### **ページにコンポーネントを追加する**

* AX – Progress Indicator コンポーネントを、目的のページの Experience Builder にドラッグします
  {% endstep %}

{% step %}

#### **データソースを設定**

* 選択し **ピックリスト値を使用** をデータソースの種類として
* 次を設定します。 **オブジェクト API 名** を `注文`
* 次を設定します。 **ピックリスト項目** を `ステータス`
* 次を設定します。 **レコードタイプ** を `Master`
* 次を設定します。 **並び順** を `デフォルト`
  {% endstep %}

{% step %}

#### **表示をカスタマイズ**

* 次を設定します。 **タイプ** を `垂直`
* 次を設定します。 **現在のステップ** を `{!Item.Status}` 各注文のアクティブなステータスを動的に反映するために
  {% endstep %}

{% step %}

#### **作業をプレビュー**

* Experience Builder のプレビューを使用して、注文ステータス全体にわたって縦型インジケーターが正しく表示されることを確認します
  {% endstep %}
  {% endstepper %}

## FAQ

**ユーザーはステップをクリックしてレコードのステータスを更新できますか？**

いいえ。AX - Progress Indicator は読み取り専用の表示コンポーネントです。ピックリスト項目の現在値を反映しますが、ユーザーがステップをクリックしても Salesforce に書き戻しません。Progress Indicator 自体は、Experience Cloud 版ではインタラクションやアクションを提供しません。

**ヒント：** Lightning ページで構築している場合（Experience Site ではなく）、 [Avonni Dynamic Components 版](https://docs.avonnicomponents.com/dynamic-components/) の [進捗インジケーター](/dynamic-components/components/progress-indicator.md) はサポートしています [インタラクション](/dynamic-components/component-builder/interactions.md) Interaction タブを通じたレコード更新アクションとの

## リンク

{% content-ref url="/pages/ea6d034bc47be3d9aad837e34cf9c853af96a199" %}
[AX - マップ](/experience-cloud/experience-cloud-ja/experience-components/ax-map.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-progress-indicator.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.