[AEM Forms]{class="badge positive" title="AEM Formsに適用)。"}

インタラクティブ通信エディターの日付/時刻フィールドコンポーネント

​1. はじめに

インタラクティブ通信(IC)エディターの​日付/時刻フィールド コンポーネントを使用すると、作成者は、ユーザーが日付や時刻の値を選択または入力できるフィールドを挿入できます。 このコンポーネントは、生年月日、予定スケジュール、予約スロット、ドキュメントの問題/有効期限などの情報をキャプチャするために一般的に使用されます。

このフィールドでは、様々な書式設定オプション(DD/MM/YYYY、24時間または12時間の形式など)、検証制約、およびコミュニケーション設計に合わせた外観のカスタマイズがサポートされています。 手作業による入力エラーを減らし、データ収集の一貫性を高めることで、ユーザーエクスペリエンスを向上させることができます。

IC ドキュメントを検索

​2. 表示パターン

表示パターン​を​プロパティ パネルから日付/時刻フィールドに割り当てることができます(例:04/01/2007 2:30 PM)。

設定されたパターンは、キャンバスのプレビューにすぐに反映され、保存と再読み込みのサイクルを通じて保持されます。 高度なユースケースの場合、カスタム XFA ピクチャ句​を定義して、任意の出力形式を実現できます。

表示パターンの設定

  1. デザインキャンバスで「日付/時刻フィールド」コンポーネントを選択します。
  2. プロパティ パネルを開きます。
  3. パターンを表示」セクションで、定義済みのパターンを選択するか、カスタム画像句を入力します。
  4. カンバス上で書式設定された値をプレビューします。

カスタムパターンの例(日付/時刻)

パターン
出力例
説明
date{MM/DD/YYYY} time{HH:MM}
04/01/2007 14:30
日時の組み合わせ

共通の時間トークン:

トークン
意味
HH
24時間
h
12時間
MM
A
午前/午後
NOTE
基になる日付/時刻の値は、YYYY-MM-DDTHH:MM​形式の​ ISO 8601 ​に準拠している必要があります(例:2007-04-01T14:30)。 この形式に従わない値は、パターンの書式設定が適用されずに、そのまま表示されます。

​3. プロパティ

日付/時刻フィールドコンポーネントには、いくつかの設定可能なプロパティが含まれています。

2.1. 基本フィールド

  • 名前: フィールドの一意のID。 ルール、式、データバインディングでの参照に使用します。

  • キャプション:​目的を示すために、フィールドの横に表示されるラベル(例:「生年月日」)。

  • 日付: ユーザーがカレンダー日付を選択または入力できるようにします。

  • 時間:​設定されている場合、特定の時間の値の入力または選択を有効にします。

  • 予約:​入力がない場合に表示されるフォールバック値。読み取り専用または印刷のシナリオに役立ちます。

  • アピアランス:​一貫したUI レンダリング用に、下線、枠線、フラットなどのビジュアルスタイルを選択します。

2.2. タイポグラフィ

日付/時刻フィールド内のテキストのスタイルを制御します。

  • フォントのバリエーション: テーマの要件に応じて、通常、太字、斜体のオプションがあります。

  • フォントサイズ: フォームレイアウトの一貫性を維持するために、デフォルトは10 ptに設定されています。

2.3. 位置

  • 説明: フォームレイアウトの日時フィールドの配置を定義します。

  • 設定:

    • X座標とY座標

    • フィールドを正確にサイズ変更するための高さと幅 (mmまたはピクセル単位)。

2.4. 余白

整列とレイアウトの柔軟性を確保するために、フィールドの周囲の間隔を定義します。

  • 上(上)

  • 下(下)

2.5. 外観

視覚的な一貫性と明瞭性を維持するためのコンテナのスタイルを定義します。

  • フィールドの​ 塗りつぶし: ​背景色。

  • 線: フィールドの周囲の境界線の色。

  • 幅:​境界線の太さ。

  • スタイル:​境界線タイプ(実線、破線、なし)など。

  • エッジ: フォームのテーマに応じて、シャープな角または丸みを帯びた角から選択します。

2.6. プレゼンス

実行時のフィールドの動作を決定します。

  • 表示可能: フィールドはユーザーに表示され、レイアウトスペースを占有します。

  • 非表示(スペースを保持): フィールドは表示されませんが、レイアウトではスペースが確保されています。

2.7. データ連結

フィールドをデータソースにリンクして、値を保存または取得します。

  • データバインディングの種類: フィールドをデータに接続する方法を指定します。

  • 使用名: スキーマで定義されたフィールド名を使用してフィールドをバインドします。

  • グローバルデータを使用:​通信全体で共有されるグローバルレベルのデータにフィールドを接続します。

  • データバインディングなし: フィールドは、バックエンドデータに接続されていません(視覚的な値または計算値にのみ使用)。

​4. 使用方法

日付/時刻フィールドは、一貫性のある時間データが必要なシナリオに適しています。 一般的なユースケースを次に示します。

  • 生年月日、予約日またはイベント時刻の取得

  • 文書の問題/有効期限のログ記録

  • 配信またはピックアップスロットの選択

  • トランザクションのタイムスタンプの記録

作成者は、フィールドをレイアウトコンテナ、検証、条件付きルールと組み合わせて、形式、必須フィールド、コンテクストに応じた表示を制御できます。

​5. ベストプラクティス

  • 「日付を選択」や「アポイントメント時間」などの明確なキャプションを使用して、ユーザーを誘導します。

  • より優れたUXと少ない入力エラーのために、日時ピッカーを有効にします。

  • 必要に応じて、フォーマット制限(例:今後の日付のみ)を適用します。

  • アクセシビリティまたは印刷フォールバック用の予約値を指定します。

  • タイポグラフィと外観は、フォームデザイン全体と一致させます。

  • 適切なデータキャプチャと処理をおこなうために、フィールドを有効なスキーマパスにバインドします。

インタラクティブ通信エディターの日付/時刻フィールドコンポーネントは、時間ベースの入力を合理化する強力で使いやすいコンポーネントです。 スタイル設定、データ処理、レイアウト制御などの適切な設定により、ユーザーとバックエンドシステムの両方にとって、クリーンで信頼性の高い、直感的なフォーム体験を可能にします。

関連トピック

recommendation-more-help
experience-manager-cloud-service-help-main-toc