# AX - タイムライン

## 概要

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

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

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

{% hint style="success" %}
Avonni タイムラインは [Reactive-Ready](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/riakutibukonpnento)
{% endhint %}

## プロパティ

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

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

{% tab title="視覚的および機能的要素" %}

| 名前              | 説明                                                          |
| --------------- | ----------------------------------------------------------- |
| **アイコン名**       | タイムライン項目を表す Salesforce Lightning Design System のアイコンを選択します。 |
| **アイコンサイズ**     | 視覚的一貫性のためにアイコンのサイズを決定します。                                   |
| **配置**          | 内容とスペースの考慮に基づいて、「vertical」と「horizontal」のレイアウトを選択します。        |
| **並び順**         | 時系列の昇順には「asc」、降順には「desc」を選択します。                             |
| **グループ化**       | タイムライン項目を「week」「month」「year」で整理して、より簡単に移動し理解できるようにします。      |
| **項目の日付形式**     | 明確さと一貫性のために、タイムライン項目の日付の表示形式を設定します。                         |
| **結合する**        | タイムライン項目を線やパスで視覚的に接続するかどうかを選択します。                           |
| **閉じる**         | タイムラインを閉じた状態にするか、終端なしにするかを切り替えます。                           |
| **折りたたみ可能**     | タイムラインのセクションを折りたたみ可能にして、ユーザー操作性を向上させます。                     |
| **検索可能**        | ユーザーがタイムライン内で特定の項目やイベントを検索できるようにします。                        |
| **ページネーションを表示** | 項目数が多いタイムラインにページネーションを実装します。                                |
| **最大表示項目数**     | ページネーションが開始される前に表示する項目の最大数を設定します。                           |
| {% 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 %}   |                                  |