画面フロー (Screen Flow) ガイド

あらゆる Salesforce 画面フローに MultiDatePick カレンダーを配置できます。コンポーネントを画面に置き、Config Name を設定すれば完了です。

Apex 不要
  1. 1設定を保存セットアップウィザードまたは Config Library
  2. 2画面に配置MultiDatePick を検索
  3. 3Config Name を設定保存、デバッグ、有効化

プロパティは 1 つだけ: Config Name

設定は セットアップウィザード で一度作成するか、Config Library からインポートします。フローで設定するプロパティは 1 つだけで、残りはコンポーネントが読み込みます。

Salesforce Flow Builder のアニメーションデモ: 画面を開いて MultiDatePick を検索し、Resource Booking コンポーネントを画面にドラッグ。Config Name に保存済みのセットアップウィザード設定を指定し、[完了] と [保存] をクリック
コンポーネントをドラッグし、Config Name を設定して、完了、保存。ほかに対応付けるものはありません。
  • 画面を開く
  • MultiDatePick を検索
  • Booking、Date、Date Time のいずれかをドラッグ
  • 設定名(Config Name)
  • 保存

チェックボックスはすべて設定から読み込まれます。 Config Name を設定すれば、Flow Builder でチェックボックスに触れる必要はありません。画面で入力したテキストや数値のプロパティは、設定より優先されます。

レコードに紐付けて保存する

Parent Record Id を、フローの対象となるレコード ({!recordId} やレコードの取得の結果など) にバインドします。コンポーネントは、その親に紐付けてレコードを保存します。Date と Date Time では、空欄にすると選択内容がフローに渡されます。

空のフローから作成する

Flow Builder で 5 分。デプロイは不要で、デバッグでテストできます。

1. 新しい画面フロー

[設定]、[フロー]、[新規フロー]、[画面フロー]、[作成]。

MultiDatePick コンポーネントを配置するために [設定] で新しい Salesforce 画面フローを作成
2. 画面を追加

キャンバスに 画面 要素を追加します。

Salesforce 画面フローに画面要素を追加
3. コンポーネントをドラッグ

コンポーネント一覧で MultiDatePick を検索し、画面にドラッグします。

MultiDatePick の Booking コンポーネントを Salesforce のフロー画面にドラッグ
4. Config Name を設定

ウィザードで保存したとおりに設定名を入力します。レコードが親に属する場合は Parent Record Id をバインドします。

5. 保存してデバッグ

デバッグ をクリックし、日付や時間枠を選んで、レコードが作成されたことを確認します。それから 有効化 し、フローをレコードページ、アクションボタン、または Experience Cloud サイトに追加します。

フローが受け取るもの

Booking は予約を自分で保存します。Date と Date Time は選択内容をフローに渡すか、Parent Record Id が設定されていれば自分で保存します。

コンポーネント出力 (Flow Builder でのラベル)API 参照名
BookingSuccessful Bookings Count, Conflict DatesbookingSuccessCount, bookingConflictDates
DateSelected Dates, Date Ranges JSONselectedDates, selectedDateRangesJson
Date TimeDates With Times JSONselectedDatesWithTimesJson
Salesforce 画面フロー (Screen Flow) による休暇申請のアニメーションデモ: ユーザーが MultiDatePick カレンダーで 3 日をクリックして送信すると、次のフロー画面に受け取った 3 つの日付が一覧表示される
3 日を選ぶと、3 つの日付が次の画面に渡されます。

Apex 不要: すぐに使えるフローアクション

Apex を書く必要はありません。Date や Date Time の JSON をレコードにするには、パッケージに付属する 3 つの部品を使います。Flow Builder では標準のアクションと同じように表示されます。

  • Parse Date Entries from JSON
  • エントリーをループ処理
  • レコードの作成 (エントリーごとに 1 件)
フローアクション Parse Date Entries from JSON

アクションの中から検索します。Date Ranges JSON または Dates With Times JSON を渡します。日付のみか日付と時刻かは自動で判別されます。

クラス: MultiDatePickParser

データ型 MultiDatePickEntryCollection

アクションの戻り値。Apex 定義の変数に格納し、data をループ処理します。

  • data: ループ処理するエントリー
  • totalCount: 件数
  • success、errorMessage: 決定要素用
データ型 MultiDatePickEntry

1 件のエントリー。ループ変数として使い、レコードの作成で対応付けます。

  • fromDate、toDate: 範囲 (1 日なら同じ値)
  • startTime、endTime: Date Time のみ
  • id: エントリー番号

Date Ranges JSON (Date)

{ "data": [
  { "id": 1, "fromDate": "2026-02-10", "toDate": "2026-02-12" },
  { "id": 2, "fromDate": "2026-02-15", "toDate": "2026-02-15" }
] }

Dates With Times JSON (Date Time)

{ "data": [
  { "id": 1, "fromDate": "2026-02-10", "toDate": "2026-02-10",
    "startTime": "09:00", "endTime": "17:00" }
] }

付録: プロパティを手動で対応付ける

Config Name を使わない場合のみ。Flow Builder ではプロパティがアルファベット順に並び、Conflict Behavior(競合の動作) のような選択リストもただのテキストボックスとして表示されます。Config Name のほうが簡単なのはこのためです。Booking の画面では、次を設定します:

Flow Builder でのラベル入力する内容API 参照名
Resource Object API Name予約する対象のオブジェクト (例: 会議室オブジェクト)resourceObjectApiName
Resource Name Field各リソースの名前として表示する項目resourceNameField
定員項目(Capacity Field)1 つのリソースが同時に受け付ける予約数。時間枠には 3/5 のように表示され、満員になると締め切られます。capacityField
Booking Object API Name各予約の保存先オブジェクトresourceBookingObject
Booking Date Field予約オブジェクトの日付項目bookingDateField
Booking Start Time Field, Booking End Time Field予約オブジェクトの時刻項目bookingStartTimeField, bookingEndTimeField
Booking Resource Field予約からリソースへの参照項目bookingResourceField
競合の動作(Conflict Behavior)block (既定)、skip、allow のいずれかを入力conflictBehavior
Parent Record Id予約が属するレコード (例: {!recordId})recordId
Parent Record Relationship Field予約からその親への参照項目relationshipFieldApiName

この場合、チェックボックスは自分で設定します。 Config Name を使わない場合、すべてのチェックボックス (Required、Show Inline、Output Date Ranges as JSON など) は画面でチェックしたとおりになります。

作る前に見てみる

ログイン不要のライブデモを試すか、MultiDatePick が Salesforce AppExchange に登場した日に通知を受け取りましょう。

フローで行き詰まったら Support@MultiDatePick.com まで