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

## 概要

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

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

注文追跡、申請ステータス表示、オンボーディングの進捗、承認ワークフローなど、ポータル利用者が複数ステップのプロセス状態を視覚的に把握したいあらゆる場面に最適です。

{% hint style="warning" %}

#### 注意

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

***

## はじめに

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

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

***

## 設定

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

| 名前             | 説明                                                                                                             |
| -------------- | -------------------------------------------------------------------------------------------------------------- |
| **タイプ**        | 以下から選択 **`ベース`**, **`縦方向`**, **`バー`**, **`円`**, **`パス`**、または **`縦方向`** ナビゲーションスタイル。                            |
| **形式**         | <ul><li><strong>線形</strong>: 標準的な進捗フロー。</li><li><strong>非線形</strong>: 進捗は順次順序に従いません</li></ul>                  |
| **シェーディング**    | コンポーネントにシェーディング効果を適用します                                                                                        |
| **現在のステップ**    | 進捗フロー内の現在のステップを定義します。                                                                                          |
| **アイコンの配置**    | <ul><li><strong>中央</strong>: ステップ内でアイコンを中央に配置します。</li><li><strong>上部</strong>: ステップの上部にアイコンを配置します</li></ul>    |
| **アイコンサイズ**    | 小・中・大から選択します。                                                                                                  |
| **ステップ番号を表示**  | 各ステップの番号を表示します。                                                                                                |
| **ステップラベルを表示** | 各ステップのラベルを表示します。                                                                                               |
| **バーの値を非表示**   | 進捗バー上の値/パーセンテージを非表示にします。                                                                                       |
| **データソース**     | <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> （およびそれぞれの塗りつぶし・枠線バリエーション）。</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 flowId="WPNsAX5UXy9v9pc0SGSp" url="<https://app.arcade.software/share/WPNsAX5UXy9v9pc0SGSp>" %}

導入を促進し、案件を前進させ続ける、視覚的で直感的なパスを使って、パートナーユーザーを営業プロセスの各段階へ案内します。

***

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

* **ガイド付きの営業体験:** 各商談が営業プロセスのどの位置にあるかを、パートナーユーザーに明確で視覚的に示します
* **導入率の向上:** Experience サイト内で適切なステージ情報を直接表示することで、混乱を減らし、エンゲージメントを向上させます
* **パイプラインの可視化:** ポータルを離れずに、次のステップについてパートナーが足並みをそろえやすくします

***

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

{% stepper %}
{% step %}

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

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

{% step %}

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

* 選択 **ピックリスト値を確認** をデータソースタイプとして
* を設定する **オブジェクト API 名** を `商談`
* を設定する **ピックリスト項目** を `ステージ`
* を設定する **レコードタイプ** を `マスター`
* を設定する **並び順** を `デフォルト`
  {% endstep %}

{% step %}

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

* を設定する **タイプ** を `パス`
* を設定する **現在のステップ** を `{!Item.Stage}` で各商談の現在のステージを動的に反映します
  {% endstep %}

{% step %}

#### **作業内容をプレビューする**

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

***

#### **リンク**

{% content-ref url="ax-rekdo" %}
[ax-rekdo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-rekdo)
{% endcontent-ref %}

***

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

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

注文から fulfillment まで、すっきりと見やすい縦型の進捗インジケーターで、顧客に注文の進捗状況をすぐに分かるようにします。

***

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

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

***

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

{% stepper %}
{% step %}

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

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

{% step %}

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

* 選択 **ピックリスト値を確認** をデータソースタイプとして
* を設定する **オブジェクト API 名** を `注文`
* を設定する **ピックリスト項目** を `ステータス`
* を設定する **レコードタイプ** を `マスター`
* を設定する **並び順** を `デフォルト`
  {% 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://app.gitbook.com/o/9SPYZVrIHB81fz19OpSr/s/ODPvvv7Cx9Z9RECLn3oV/) の [Progress Indicator](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/progress-indicator) は [インタラクション](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) を、その Interaction タブ経由でレコード更新アクションと共にサポートしています

***

## **リンク**

{% content-ref url="ax-di-tu" %}
[ax-di-tu](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-di-tu)
{% endcontent-ref %}