> 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 Timeline は [リアクティブ対応](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md)
{% endhint %}

{% hint style="info" %}
**実際のプロジェクトで見る**

[インストールを追跡](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/track-my-installation): 顧客ポータル上のインストール追跡ツール。月ごとにグループ化されています。
{% endhint %}

## 設定

### データソース

| 名前         | 説明                                   |
| ---------- | ------------------------------------ |
| **手動**     | タイムライン項目とその詳細を手動で入力します。              |
| **データソース** | クエリを使用して、データソースの項目でタイムラインを自動的に設定します。 |

### 基本設定

**タイトル** はタイムラインの主見出しであり、 **キャプション** その下に表示される簡単な説明または補足テキストです。 **タイトルのスタイルテキスト** と **キャプションのスタイルテキスト** それぞれのフォントスタイルをカスタマイズして、視覚的な強調を加えます。

### 視覚・機能要素

**アイコン名** Salesforce Lightning Design System からタイムライン項目を表すアイコンを選択し、 **アイコンサイズ** 見た目の統一感のためにサイズを設定します。

**配置方向** を選択します `縦` または `横` コンテンツとスペースの考慮に基づいたレイアウトです。

**並び順** を選択します `asc` （昇順）または `desc` （降順）の時系列順です。

**グループ化** タイムライン項目を次の単位でグループ化します `週`, `月`、または `年` 参照や理解をしやすくします。

**項目の日付形式** タイムライン項目の日付表示を明確さと一貫性のために整形します。

**連結する** タイムライン項目が線や経路で視覚的に接続されるかどうかを決定します。

**閉じる** タイムラインが閉じた形式かオープンエンド形式かを切り替えます。

**折りたたみ可能** タイムラインのセクションを折りたたみ可能にし、ユーザー操作性を向上させます。

**検索可能** ユーザーがタイムライン内で特定の項目やイベントを検索できます。

**ページネーションを表示** 項目数の多いタイムラインにページネーションを適用し、 **最大表示項目数** ページネーションが有効になる前に表示される最大項目数を設定します。

**API 名** コンポーネントを参照するために使用される一意の識別子です。 **項目アイコンサイズ** 各項目のアイコンサイズを設定し、 **クリック時に強調表示** クリックされた項目を視覚的に強調表示します。

### 対話性とカスタマイズ

**ヘッダーアクション** タイムラインヘッダーにユーザー操作やコマンド用のアクションボタンを追加し、 **項目アクション** 各項目レベルに特定機能用のアクションボタンを追加します。

**フィールド属性** 列数やフィールド表示に使用するバリアントを含め、タイムライン項目内のフィールド表示を設定します。

**フィルターオプション** タイムライン項目を並べ替えたり絞り込んだりするための、ポップオーバーとして表示されるフィルター機能を含めます。

**検索エンジンオプション** プレースホルダー テキストと位置設定で検索機能をカスタマイズします。

**ページネーションオプション** 配置を調整し、次の項目のラベルとアイコンをカスタマイズします: `最初`, `最後`、および `次へ` ページネーション コントロール。

## スタイル

{% 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.