タイムライン

タイムラインの設定

1. データソースの設定

タイムラインに情報を表示させる前に、データの取得先を指定する必要があります。Avonni Timelineコンポーネントは、さまざまなデータソースに接続するための柔軟なデータソースオプションを提供します。

2. データマッピングの統合（変数およびクエリソースの場合）

Timelineコンポーネントで変数またはクエリデータソースを使用する場合、 マップ データソースのフィールドをタイムラインの属性に対応付ける必要があります。データマッピングは、Timelineコンポーネントに指示を与える「命令」のようなものと考えてください。 どの フィールドには各タイムライン項目の開始日、終了日、タイトル、説明などが含まれます。

例（商談）：

データソースが次を取得する場合 新しい 次のようなフィールドを持つレコード Name, Description__c、および CloseDate、次のようにマッピングします：

• タイトル： Name

• 説明： Description__c

• 開始日： CloseDate

これにより、タイムラインは項目のタイトルに商談のNameを、説明にはカスタム説明フィールドを、開始日にはClose Dateを使用するようになります。

3. タイムラインの向きを選択

4. 並べ替えとグループ化の設定（垂直タイムライン用）

垂直タイムラインでは、次の設定を使ってイベントを整理できます：

• 並び順： 選択 昇順 （古いものから新しいものへ）または 降順 （新しいものから古いものへ）を選んでイベントの順序を制御します。

• グループ化基準： 時間間隔でイベントをグループ化： なし, 日, 週, 月、または 年。これによりタイムライン内に視覚的なセクションが作成され、ナビゲーションが容易になります。

5. 追加フィールドの表示とカスタマイズ

各タイムライン項目内にデータソースの追加フィールドを表示し、その表示をカスタマイズします。

フィールドの追加：

• Timelineコンポーネントのプロパティで「Fields」または「Item Fields」セクションを見つけます。

• データソースから表示したいフィールドを追加します。

フィールド表示のカスタマイズ：フィールドレイアウト

プレビュー フィールドレイアウト 設定を使って各タイムライン項目内の 追加フィールド の配置やスタイルを整えます。

主な設定：

• 列数： 各項目内の全体的なグリッドレイアウトを設定します（例： 1, 2, 3 列）。これはデフォルト／超小さい画面サイズ用です。

• 小／中／大コンテナの列数： 画面サイズに基づいて列数を設定します。

• バリアント： フィールド表示の全体的なビジュアルスタイルを制御します（オプションは異なる場合があります）。

個別フィールドのカスタマイズ： Styleパネルから、Items Fieldsのスタイリングをカスタマイズできます。

6. アイテムアクションの追加

「Item Actions」設定を使用して各タイムライン項目に対話型ボタンを追加します。これらのアクションにより、ユーザーは特定の項目のデータと対話できます。 その特定の項目.

アクションを追加して設定するには：

1. Timelineコンポーネントのプロパティで「Item Actions」セクションを見つけます。

2. 新しいアクションを追加します。

3. アクションの 次のように設定します 値を参照するフィルターを追加します： アイコン名 （オプション）を設定します。

4. 追加する 操作 に対してInteractionを追加します。 「Interactions」タブ （「On Item Action Click」）。

5. を選択します。 アクションタイプ （ナビゲート、フロー実行など）を選び、必要に応じて現在のタイムライン項目のデータを使って設定します（Data Mappingsでマップしたフィールドを参照）。

7. フィルタリングオプションの設定

Avonni Timelineにフィルタを追加して、表示されるイベントをユーザーが絞り込めるようにします。

フィルタを有効にするには：

1. Timelineコンポーネントを選択します。

2. プロパティパネルのData Mappingsセクションにある「Filters」属性を見つけます。

3. データソースのどのフィールドをフィルタ可能にするかを選択します。

4. フィルタタイプを設定してカスタマイズします。

タイムラインはフィルタリング用のインターフェースを表示し、ユーザーは基準を選択してイベントをフィルタできます。タイムラインはデフォルトでフィルタ可能です。

タイムラインコンポーネントのカスタマイズ

データを接続し、フィルタリングやアイテムアクションを設定したら、プロパティを使ってAvonni Timelineコンポーネントの外観や動作をカスタマイズできます。

ヘッダープロパティ

ヘッダーは表示されます コンポーネントライブラリから Columns コンポーネントをデータテーブルの タイムライン自体と、コンテキストや全体的なアクションを提供します。

• タイトル： （テキスト）タイムラインのメインタイトルを入力します（例：「プロジェクトタイムライン」、「商談履歴」）。これはヘッダーに目立って表示されます。

• キャプション： （テキスト、オプション）タイトルの下に表示される短い説明またはサブタイトル。追加のコンテキストを提供するために使用します。

• アイコン名： （テキスト、オプション）ヘッダーに表示するAvonniまたはSLDSアイコンの名前（例： utility:date_time, standard:event).

• アクション： （アクション、オプション）ヘッダーにボタンを追加して、 ボタン タイムライン全体に関連する全体的なアクションを提供します（個々のイベントではなく）。例： 全体の タイムライン（個別イベントではない）。例：

  • 「データを更新」ボタン： タイムラインのデータソースを更新します。

  • 「データをエクスポート」ボタン： ユーザーがタイムラインのデータをエクスポートできるようにします。

  • 「イベントを追加」ボタン： モーダルを開くかページに移動してイベントを作成できるようにすることができます new （ただし、これは一般的な「追加」アクションであり、ドラッグで作成するような特定の時間スロットに紐づくものではありません）。

  • これらのヘッダーアクションは標準のAvonni インタラクション システム（On Clickなど）を使用します。

• 結合表示： （ブール - チェックボックス）ヘッダーがタイムラインのコンテンツと視覚的に接続されるか、上に独立した要素として表示されるかを制御します。

インタラクションプロパティ

これらのプロパティはタイムラインがユーザーの操作にどのように応答するかを定義します タイムライン項目自体との （ヘッダーアクションではありません）。

• アイテムクリック時： トリガーされる インタラクションを定義します。 ユーザーがタイムライン項目をクリックしたときに （イベント）。インタラクション内でクリックされた項目のデータを使用できます。一般的なアクション： ナビゲート：

  • クリックされた項目が表すレコードの詳細ページに移動します。通常、ナビゲートアクションでは 項目名 の値（レコードIDにマップしたもの）を使用します。 値（ナビゲートアクションでレコードIDにマップしたもの）を使用します。

  • トーストを表示： メッセージを表示します。

  • フローを実行： フローを起動し、クリックされた項目のデータを入力変数として渡します。

  • フローダイアログ／パネルを開く： スクリーンフローを起動します。

  • レコードを更新： レコードを更新します。