カレンダー表示コンポーネント

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • CPQ のカレンダー表示コンポーネントを使用して、時間ベースの構成オプションを月次ビューで表示します。ユーザーが設定インターフェイスで日付固有のレコードを直接表示、選択、および管理できるように、セット、フィールド、および選択設定を構成します。

    CPQ ネイティブ UI を使用すると、アドミニストレーターはカレンダー表示コンポーネントをユーザーに表示して、時間ベースの構成に役立てることができます。カレンダーは月のコンテキストで表示されます。カレンダー表示の基礎となるデータはセットであり、各カレンダー日はセット内の 1 つのレコードで表されます。

    次の例は、カレンダー表示コンポーネントとして表される、日ごとに 1 つずつ、合計 30 件のレコードを含むセットを示しています。

    カレンダーインターフェイス

    この例をサポートする主要な要素には、変数名が availableDates のセットが含まれます。このセットには、次の関連フィールドが含まれています。
    • selectedDate (ブーリアン):ユーザーが 1 つ以上の日付/レコードを選択したかどうかをキャプチャします
    • rawDate (テキスト):各セットレコードの書式設定された生の日付を保持します
    • availableDate (テキスト);は、各セットレコードの日付を「MM/DD/YYYY」形式で保持します。これは、カレンダー表示で人間が判読可能な日付を表示するために使用されます
    • loadSize (Picklist):オプションには、S、M、および L が含まれます。この選択リストは、各レコードに表示されます (月次カレンダーの各日)。

      カレンダーレコード (日数) には、セットに関連付けられたフィールドをいくつでも表示できます。アドミニストレーターは、ユーザーの画面サイズとアプリケーションによって提供される応答性に基づいて、定義されたフィールドの数に実際的な制限を適用する必要があります。

    [構成/再構成] 拡張では、表示する月の適切なサイズと、各レコードのフィールド値を含む JSON 要素でセットを初期化します。以下は、上記の生のカレンダーの [拡張を構成] の出力です。

    {
    	"availableDates": {
    			"data": [
    			{
    				"availableDate": { "value": "6/1/2024" },
    				"rawDate": {
    				"value": "2024-06-01T00:00:00.000Z"
    				}
    			}, //skipped interior records for brevity
    			{
    				"availableDate": { "value": "6/30/2024" },
    				"rawDate": {
    				"value": "2024-06-30T00:00:00.000Z"
    				}
    			}
    		],
    		"userEdited": false
    	}
    }

    アドミニストレーターがフィールドに事前入力したくなかったため、loadSize フィールドは設定された JSON から除外されたことに注意してください。

    詳細計画レイアウトで、アドミニストレーターはセットが表示される場所と、各レコード/暦日に表示されるサブフィールドを定義します。

    カレンダーのデモ

    [プロパティを設定] > [選択設定] で、アドミンはユーザーに 1 つの日または複数の日の選択を許可するかどうかを定義します。選択用のブールフィールド (この場合は selectedDate) には、特定のセットレコード/カレンダー日が選択されているかどうかが格納されます。

    選択設定

    [プロパティの設定] > [検索設定] は、カレンダーでユーザーが 1 か月を超えるものから選択できる場合に、ユーザーにとって最も関連性の高い日のサブセットを表示するのに役立ちます。この目的のために、ソースフィールドは、アドミンが月次カレンダーセットに含める日 (レコード) です。ターゲットフィールドは、カレンダー日付の全範囲を含むセット関連フィールドです。

    検索設定

    [生の値>プロパティを設定] 領域には、上のページの選択による JSON 出力が含まれています。ただし、現在「カレンダー」は displayType として選択できないため、アドミニストレーターは JSON を編集して明示的に定義する必要があります。

    生の値コード