> 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-timeline.md).

# AX - タイムライン

## 概要

**AX - タイムライン** は、Experience Sites ページ上で Salesforce レコードを時系列順に表示する Experience Cloud コンポーネントです。

ポータルユーザーに、ケース履歴、注文のタイムライン、プロジェクトのマイルストーン、または日付付きレコードなど、日付ベースのアクティビティを表示するために使用します。ユーザーはエントリの検索や絞り込み、項目をクリックしてレコードへ移動、期間ごとに整理されたイベントの確認ができます。日付フィールドを持つ標準オブジェクトまたはカスタムオブジェクトからデータを取得できます。

アクティビティフィード、ケース履歴、注文追跡のタイムライン、プロジェクトのステータス更新、またはポータルユーザーがスクロール可能な時系列形式で「いつ何が起きたか」を確認する必要があるあらゆる場面に最適です。

{% hint style="success" %}
Avonni タイムラインは [リアクティブ対応](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md)
{% endhint %}

## プロパティ

{% tabs %}
{% tab title="基本設定" %}

| 名前                  | 説明                                  |
| ------------------- | ----------------------------------- |
| **タイトル**            | タイムラインのメイン見出し。                      |
| **タイトルのスタイルテキスト**   | 視覚的な強調のために、タイトルのフォントスタイルをカスタマイズします。 |
| **キャプション**          | タイムラインの簡単な説明または補足テキスト。              |
| **キャプションのスタイルテキスト** | タイトルを補完するようにキャプションのフォントスタイルを調整します。  |
| {% endtab %}        |                                     |

{% tab title="視覚的要素と機能要素" %}

| 名前              | 説明                                                             |
| --------------- | -------------------------------------------------------------- |
| **アイコン名**       | タイムライン項目を表すために、Salesforce Lightning Design System のアイコンを選択します。 |
| **アイコンサイズ**     | 視覚的な一貫性のためにアイコンのサイズを決定します。                                     |
| **向き**          | コンテンツとスペースの要件に応じて、「縦」または「横」のレイアウトを選択します。                       |
| **並び順**         | 昇順には「asc」、降順の時系列には「desc」を選択します。                                |
| **グループ化**       | ナビゲーションと理解をしやすくするために、タイムライン項目を「週」「月」「年」で整理します                  |
| **項目の日付形式**     | 明確さと一貫性のために、タイムライン項目の日付表示形式を設定します                              |
| **連結する**        | タイムライン項目が線や経路で視覚的に接続されるかどうかを選択します                              |
| **閉じる**         | タイムラインを閉じた状態にするか、終端なしにするかを切り替えます                               |
| **折りたたみ可能**     | タイムラインのセクションを折りたたみ可能にして、ユーザー操作性を高めます                           |
| **検索可能**        | ユーザーがタイムライン内で特定の項目やイベントを検索できるようにします                            |
| **ページネーションを表示** | 項目数が多いタイムラインにページネーションを実装します                                    |
| **表示可能な最大項目数**  | ページネーションが開始される前に表示する項目の最大数を設定します                               |
| {% endtab %}    |                                                                |

{% tab title="操作性とカスタマイズ" %}

| 名前                | 説明                                                       |
| ----------------- | -------------------------------------------------------- |
| **ヘッダーアクション**     | ユーザーコマンドや操作のために、タイムラインのヘッダーにアクションボタンを追加します。              |
| **項目アクション**       | 特定の機能のために、項目レベルでアクションボタンを実装します。                          |
| **フィールド属性**       | 列数やフィールド表示のバリエーションを含め、タイムライン項目内のフィールドの表示を設定します           |
| **フィルタリングオプション**  | タイムライン項目を並べ替えたり絞り込んだりするための、ポップオーバーとして表示されるフィルタリング機構を含めます |
| **検索オプション**       | プレースホルダーテキストと位置設定で検索機能をカスタマイズします                         |
| **ページネーションオプション** | 配置を調整し、「先頭」「最後」「次へ」のページネーション制御用のラベルとアイコンをカスタマイズします       |
| {% endtab %}      |                                                          |

{% tab title="データソース" %}

| 名前            | 説明                                     |
| ------------- | -------------------------------------- |
| **手動**        | タイムライン項目とその詳細を手動で入力します。                |
| **データソース**    | クエリを使用して、データソースからタイムラインに項目を自動的に取り込みます。 |
| {% endtab %}  |                                        |
| {% endtabs %} |                                        |

## スタイル設定

{% tabs %}
{% tab title="ヘッダー" %}

| 名前                 | 説明                               |
| ------------------ | -------------------------------- |
| **背景色**            | ヘッダーの背景色を設定します。                  |
| **枠線の色**           | ヘッダーの枠線の色を決定します。                 |
| **枠線の太さ**          | ヘッダーの周囲の枠線の太さを調整します。             |
| **枠線のスタイル**        | 枠線のスタイル（例: 実線、破線、点線）を選択します。      |
| **角の丸み**           | 見た目をやわらかくするために、ヘッダーの角を丸くします。     |
| **下部枠線の色（連結時）**    | タイムライン項目が連結されている場合の下部枠線の色を設定します。 |
| **下部枠線の太さ（連結時）**   | 項目が連結されているときの下部枠線の太さを調整します。      |
| **下部枠線のスタイル（連結時）** | 連結項目の下部枠線のスタイルを選択します。            |
| **パディング（上、右、下、左）** | ヘッダー内部の余白を設定します。                 |
| **下マージン**          | ヘッダーの下のスペースを決定します。               |
| {% endtab %}       |                                  |

{% tab title="ヘッダーのタイトル" %}

| 名前           | 説明                                |
| ------------ | --------------------------------- |
| **色**        | タイトルテキストの色を変更します。                 |
| **フォントサイズ**  | タイトルテキストの色を変更します。                 |
| **フォントの太さ**  | タイトルテキストの太さやボールド感を変更します。          |
| **フォントスタイル** | タイトルテキストにスタイル（例: イタリック、通常）を適用します。 |
| {% endtab %} |                                   |

{% tab title="ヘッダーのキャプション" %}

| 名前           | 説明                         |
| ------------ | -------------------------- |
| **色**        | キャプションテキストの色を設定します。        |
| **フォントサイズ**  | キャプションテキストのサイズを調整します。      |
| **フォントの太さ**  | キャプションテキストの太さやボールド感を変更します。 |
| **フォントスタイル** | キャプションテキストにスタイルを適用します      |
| {% endtab %} |                            |

{% tab title="ヘッダーのアバター" %}

| 名前           | 説明                              |
| ------------ | ------------------------------- |
| **色**        | アバターの背景色を設定します。                 |
| **フォントサイズ**  | アバターのコンテンツ（例: アイコンや画像）の色を変更します。 |
| **フォントの太さ**  | 強調やコントラストのためのユーティリティカラーを調整します   |
| **フォントスタイル** | やわらかな印象にするために、アバターの角を丸くします。     |
| {% endtab %} |                                 |

{% tab title="ページネーションボタン" %}

| 名前              | 説明                                  |
| --------------- | ----------------------------------- |
| **枠線**          | ページネーションボタンの枠線プロパティを設定します。          |
| **背景**          | ボタンの背景色を変更します。                      |
| **テキスト/アイコンの色** | ボタン内のテキストまたはアイコンの色を調整します。           |
| **アクティブボタンの色**  | ページネーションボタンがアクティブまたは選択中のときの色を指定します。 |
| {% endtab %}    |                                     |
| {% endtabs %}   |                                     |


---

# 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-timeline.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.