カレンダー

概要

Avonni カレンダーコンポーネントは、イベント、タスク、スケジュールなどを Salesforce Experience Cloud サイト内で直接表示および管理する優れた方法を提供します。直感的なデザインとカスタマイズ可能な機能により、ユーザーエクスペリエンスとスケジューリング機能が向上します。

Salesforce データへの接続

Avonni カレンダーコンポーネントを構成するこの重要な手順は、カレンダー項目と Salesforce 環境内の関連データとの接続を確立します。

データソースは、カレンダーに表示される情報を決定します。

データソースを使用する方法は2つあります

オプション
説明
最適な使用ケース

手動

カレンダーインターフェースにイベントやリソースを手動で直接入力します。

一度限りのイベント、またはカレンダーを Salesforce データにリンクする必要がない場合。

クエリ

Salesforce のデータからイベントやリソース情報を自動的に取得します。カスタムクエリを作成して任意の Salesforce オブジェクトのデータを表示できます。

カレンダーに常に Salesforce レコードの最新情報を表示させたい場合。

  • 手動:

    • カレンダーインターフェース内でイベントとリソースを直接追加します。

    • 一度限りのイベントやデータを Salesforce にリンクする必要がない場合に便利です。

  • クエリ:

    • Salesforce のデータから直接情報を取得します。

    • カスタムクエリを作成して、任意の Salesforce オブジェクトのデータをカレンダーに表示します。

    • カレンダーが Salesforce の最新情報を反映する必要がある場合に最適です。

クエリデータソースの構成

Avonni カレンダーが最も関連性の高い情報を表示するようにするには、データの取得元を構成する必要があります。このプロセスには、適切な Salesforce オブジェクトの選択や、必要に応じて結果を絞り込むためのフィルタ、グループ化、ソートの適用が含まれます。

手順を分解しましょう:

  • オブジェクトの選択: まず、カンバン ボードに表示したいデータを含む特定の Salesforce オブジェクト(例:取引先、商談、カスタムオブジェクトなど)を選択します。

  • オプションのフィルタリング: 選択したオブジェクトからデータの一部のみを表示したい場合は、フィルタ機能を使用して特定の条件を設定します。たとえば「Open」の商談のみや特定地域の取引先のみを表示するようにフィルタ可能です。

  • グルーピング(オプション): データをグループ化してカンバン ボードを効果的に整理します。たとえば、商談を「Stage」でグループ化すると「Prospecting」「Negotiation」などの列を作成できます。

  • 並べ替え: 「Order By」フィールドと方向(昇順または降順)を選択して、カンバンカードの表示順序を決定します。

  • 追加フィールド: 表示や操作に直接使用しないフィールドをカンバンに含める必要がある場合は、「追加フィールド」セクションにそれらを追加します。これはカンバンの検索バーで検索可能にしたいフィールドに特に便利です。

データマッピング

データマッピングは、Salesforce レコードからのイベントが Avonni カレンダーに正しく表示されることを保証するための鍵です。Salesforce の情報をカレンダーが理解する言語に翻訳するようなものだと考えてください。

必須マッピング

ここでは、構成が必要な最も一般的なマッピングの内訳を示します:

  • タイトル: イベント名やタイトルを含む Salesforce フィールド(例:標準の Event オブジェクトの「Subject」)。

  • リソース名: イベントがどのリソースに割り当てられているかを示すフィールド(例:会議室予約の「Room」フィールドや商談の予定の「Owner」フィールド)。空白の場合、すべてのイベントがまとめて表示されます。

  • 開始: イベントの開始日時を保持する Salesforce フィールド(例:「StartDateTime」)。

  • 終了: イベントの終了日時を保持する Salesforce フィールド(例:「EndDateTime」)。

例:

会議室予約カレンダーを作成する場合、次のフィールドをマッピングするかもしれません:

  • タイトル: 会議の件名

  • リソース名: 部屋名

  • 開始: 予定開始

  • 終了: 予定終了

設定

選択表示

Avonni カレンダーは、さまざまなスケジューリングや組織の好みに対応するために、3つの異なる表示フォーマットを提供します。各フォーマットはイベントやリソースの表示および操作に独自の方法を提供します。

選択表示
説明
画像

カレンダー

これは、多くの人がカレンダーと連想する従来のグリッドベースのビューです。

アジェンダ

リスト内の各項目はイベントの詳細を含み、時系列順に並べられます。

タイムライン

ユーザーに選択可能な期間にわたるスケジュールの線形ビジュアル表現を提供します。

タイムラインバリアント

Avonni カレンダーは、タイムラインビューを表示する方法を2つ提供します:

  • 水平タイムライン:

    • イベントが画面横方向に配置され、タイムラインは左から右へ流れます。

    • より長い期間(例:週や月)のスケジュールを視覚化するのに理想的です。

  • 垂直タイムライン:

    • イベントが垂直に積み重なり、タイムラインは上から下へ流れます。

    • このビューは、1日または数日の詳細なスケジュールを見るのに適しています。


非表示の表示

「非表示の表示」オプションは、ユーザーが Avonni カレンダーとやり取りするときに特定のビューを選択できないようにします。


全体表示に合わせてズーム

「ズームしてフィット」設定は、スクロールせずに画面内にすべての予定イベントが収まるようにカレンダー表示を自動的に調整します。動作方法と、特に役立つ状況は次のとおりです:

動作方法

  • カレンダーは選択した表示(日、週など)内のすべてのイベントを収めるためにタイムスケールを縮小または拡大します。

利点

  • 簡単な概要: スケジュールされたすべてのイベントをひと目で確認できます。

  • スクロール不要: イベントを探すために上下にスクロールする必要がありません。

留意点

  • イベントが多数ある場合や非常に小さな画面では、圧縮された表示により個々のイベントの詳細が読みづらくなることがあります。


ツールバーオプション

  • ツールバーのタイトル: カレンダーのヘッダーにカスタムタイトルを設定します。これにより、ユーザーがカレンダーの目的を理解しやすくなります(例:「営業チームのスケジュール」、「今後のイベント」など)。

  • ツールバーを非表示: より洗練された外観にしたり、カレンダーの表示領域を最大化するためにツールバー全体を非表示にできます。


アクション機能

Avonni カレンダーコンポーネントは単にイベントを表示するだけでなく、ユーザーが直接操作したり追加のアクションをトリガーしたりするためのさまざまな方法を提供します。

アクションの種類

  • 新しいイベントのアクション: ユーザーがカレンダー上でカーソルをドラッグして新しいイベントをスケジュールしたときに何が起きるかをカスタマイズします。たとえば、イベント作成フォームを自動的に開くことができます。

  • ヘッダーアクション: カレンダーのツールバーにカスタムボタンを追加します。これらのボタンは、以下に記載されている利用可能なインタラクションのいずれかをトリガーするように設定できます。

  • コンテキストメニューアクション: これらのボタンは、ユーザーがイベントを右クリックしたりイベント詳細を開いたときに表示されます。編集、削除、イベントに関連する追加プロセスのトリガーなどのアクションを可能にするようにこれらのボタンを構成します。

利用可能なインタラクション

Avonni カレンダーコンポーネントは、上記のアクションによってトリガーできるいくつかのインタラクションを提供します:

  • トーストを表示: ユーザーに簡潔な通知メッセージを表示し、アクションの確認やフィードバックを提供します。

  • ナビゲート: ユーザーを Experience Cloud 内の別ページや外部ウェブサイトにリダイレクトします。

  • アラートモーダルを開く: 重要な情報や確認プロンプトを含むポップアップウィンドウを表示します。

  • 確認を開く: ユーザーにアクションの確認を求める確認ダイアログを表示します(例:イベントの削除)。

  • フローダイアログを開く: Salesforce Flow を起動し、複雑なプロセスを自動化したり、ユーザーを複数のステップにわたって案内したりできます。

  • クエリの更新: Salesforce の最新データでカレンダー表示を更新します。

実装方法

これらのアクションとインタラクションを構成するには、Experience Cloud Builder の Avonni カレンダーコンポーネントの設定内で作業します。各アクションタイプ(新規イベント、ヘッダー、コンテキストメニュー)には、トリガーされるインタラクションを定義できるセクションがあります。


アバター

アバターセクションでは、Avonni カレンダーのヘッダーに画像や写真を追加できます。これによりカレンダーをパーソナライズし、視覚的な識別子を提供できます。


時間範囲コントロール

Avonni カレンダーの時間範囲設定は、イベントの表示とスケジュール管理に柔軟性を提供します。次のオプションから選択できます:

  • 日表示: 単一の日に集中するか、複数の連続する日(例:4日間の勤務週)の表示にカスタマイズできます。

  • 週表示: 1週間分のスケジュールを一目で確認できます。

  • 月表示: 月の広い概要を把握できます。2~4週間ずつ、またはカスタムの週数を表示することも可能です。

時間範囲の構成方法

各時間範囲(日、週、月)にはそれぞれ設定があります:

  • ラベル: 時間範囲に説明的な名前を付けます(例:「勤務週」)。

  • アイコン名: 時間範囲を素早く識別するための視覚アイコンを選択します。

  • 単位: この時間範囲が日、週、月のどれを表すかを選択します。

  • 期間: 表示する単位数を設定します(例:5日、2週間)。

タイムラインヘッダー(タイムラインビューのみ)

タイムラインビューのヘッダーを微調整して、週番号、日付、月など必要な情報を表示します。


利用可能時間

「利用可能時間」セクションでは、カレンダーに表示される時間枠をカスタマイズするための複数のオプションを提供します。この機能は特定の期間に注目する際に便利です。利用可能なオプションは次のとおりです:

属性
説明

このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、カレンダーは指定された曜日のみを表示し、残りは非表示にします。

曜日オプションと同様に、カレンダーに表示する月を選択できます。

時間枠

時間枠を使用すると、カレンダーに表示される時間帯を正確に制御でき、注目したい時間帯に集中できます。


イベント表示

「イベント表示」セクションでは、カレンダーイベントの視覚的な外観をカスタマイズするためのさまざまなオプションを提供します。

利用可能なオプションは次のとおりです:

  • テーマ:このオプションでは、イベントのビジュアルテーマを選択できます。デフォルト、透明、ライン、空洞、丸みを帯びたものなど、複数のプリセットテーマから選択でき、それぞれが個別のビジュアルスタイルを提供して個人の好みやブランドアイデンティティに合わせられます。

  • パレット:この機能では、選択したパレットから各リソースに異なる色を割り当てることができます。カラーパレットは、異なるリソース間で一貫した色の使用を提供する色のコレクションです。これにより、カレンダー上で異なる種類のリソースを視覚的に区別し、迅速に識別できるようになります。

  • ポップオーバーフィールド:ユーザーがイベントにホバーしたときに、小さなポップアップボックス(または「ポップオーバー」)にこれらのフィールドが表示されます。これにより、ユーザーはクリックせずに重要なイベントの詳細を確認できます。

フィルター

ユーザーが Avonni カレンダーに表示されるイベントを絞り込む方法をカスタマイズします。

  • リソースフィルターを非表示: ユーザーが特定のリソース(例:人、部屋、機器)に基づいてイベントを表示するためのフィルターを削除するにはこのオプションを選択します。

  • 日付ピッカーを非表示: ユーザーが特定の日付に移動するためのヘッダーのカレンダーアイコンを削除するにはこれを選択します。

  • タイプ(横、ポップオーバー、左パネル、右パネル、縦): フィルターセクションの視覚スタイルと配置を決定します:

    • 横: カレンダー上部に横一列のバー。

    • ポップオーバー: クリックすると開くコンパクトなフィルター。

    • 左/右パネル: フィルターオプションのためのサイドパネル。

    • 縦: フィルターオプションの縦並びリスト。

検索

  • 検索表示: このオプションを有効にすると、Avonni カレンダーの上部に検索ボックスが追加され、ユーザーが特定のイベントを迅速に見つけられるようになります。

  • プレースホルダー: ユーザーがカレンダー内で検索できる内容を案内する短いフレーズ(例:「イベントを検索...」)を追加します。

  • 配置(左、右、中央、幅いっぱい): 最適なビジュアルレイアウトのために、カレンダーのヘッダー内で検索ボックスを配置する場所を選択します。

スタイリング外観

サイズ

  • 幅: カレンダーの横幅(水平幅)を設定します。固定値(ピクセル、パーセンテージ)を使用するか、コンテナに基づいてカレンダーを自動調整させることができます。

  • 高さ: この設定はカレンダーの縦の高さを設定します。幅と同様に、固定値または柔軟な高さ設定を使用できます。

  • オーバーフロー: コンテンツがカレンダーの寸法を超えたときの扱いを決定します。オプションには次のようなものがあります:

    • 表示: コンテンツがカレンダーの外側に流れ出る。

    • 隠す: コンテンツがカレンダーの端で切り取られる。

    • スクロール: コンテンツがあふれるとカレンダーにスクロールバーが付く。

ツールバー

  • 背景色: この設定は、カレンダーのツールバー(通常ナビゲーションボタンや表示選択などを含む領域)の背景色を設定します。

最終更新

役に立ちましたか?