> 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" %}

***

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前             | 説明                                                                                                        |
| -------------- | --------------------------------------------------------------------------------------------------------- |
| **タイプ**        | 次から選択 **`ベース`**, **`垂直`**, **`バー`**, **`円`**, **`Path`**、または **`垂直`** ナビゲーションスタイル。                        |
| **形式**         | <ul><li><strong>リニア</strong>：標準的な進行フロー。</li><li><strong>非リニア</strong>：進行は順次の順序に従いません</li></ul>            |
| **影付き**        | コンポーネントにシェーディング効果を適用します                                                                                   |
| **現在のステップ**    | 進行フローにおける現在のステップを定義します。                                                                                   |
| **アイコンの配置**    | <ul><li><strong>中央</strong>：ステップ内でアイコンを中央揃えにします。</li><li><strong>上</strong>：アイコンをステップの上部に配置します</li></ul>  |
| **アイコンサイズ**    | Small、Medium、Large から選択します。                                                                               |
| **ステップ番号を表示**  | 各ステップの番号を表示します。                                                                                           |
| **ステップラベルを表示** | 各ステップのラベルを表示します。                                                                                          |
| **バーの値を非表示**   | 進捗バー上の値/パーセンテージを非表示にします。                                                                                  |
| **データソース**     | <ul><li><strong>手動</strong>：進捗データを手動で入力します。</li><li><strong>選択リスト値</strong>：選択リストの値を使って進捗を定義します</li></ul> |
| {% endtab %}   |                                                                                                           |

{% tab title="🎨 スタイリング" %}

| 名前            | 説明                                                                                                                                                                                                                                                                                                                                             |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **バー**        | 色と完了色をカスタマイズします。                                                                                                                                                                                                                                                                                                                               |
| **アイコン**      | <p>次のような幅広い色のカスタマイズが可能です：</p><ul><li><strong><code>フォーカス</code></strong>, <strong><code>通常</code></strong>, <strong><code>塗りつぶし</code></strong>, <strong><code>枠線</code></strong>, <strong><code>アクティブ</code></strong>, <strong><code>完了</code></strong>、および <strong><code>エラーカラー</code></strong> （およびそれぞれの Fill と Border のバリエーション）。</li></ul> |
| **ステップラベル**   | <ul><li><strong>文字色</strong>：ラベルテキストの色を設定します。</li><li><strong>フォントサイズ</strong>：フォントサイズを定義します。</li><li><strong>フォントファミリー</strong>：ラベルの書体を選択します。</li><li><strong>フォントの太さ</strong>：フォントの太さを選択します。</li><li><strong>テキストシャドウ</strong>：テキストに影の効果を追加します。</li><li><strong>行数制限</strong>：ラベルテキストの行数を制限します</li></ul>                                     |
| {% 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 名** に `注文`
* を **選択リスト項目** に `Status`
* を **レコードタイプ** に `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.