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

インタラクティブ通信エディターの日付フィールドオブジェクト

​1. はじめに

インタラクティブ通信(IC)エディターの​日付フィールド コンポーネントを使用すると、作成者はカレンダーベースの日付選択フィールドをドキュメントに挿入できます。 これにより、ユーザーは日付選択ツールから日付を簡単に選択したり、定義済みの形式で手動で入力したりできます。

誕生日、予定スケジュール、申請日、ポリシーの開始日/終了日などのキャプチャに最適な日付フィールドは、精度を向上させ、入力エラーを減らします。 データモデルやバックエンドシステムとのシームレスな統合のために、フォーマット、スタイル、データバインディングをサポートしています。

IC ドキュメントを検索

​2. 表示パターン

表示パターン​を​プロパティ パネルから日付フィールドに割り当てることができます(例:2007年4月1日​または​01/04/2007)。

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

表示パターンの設定

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

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

パターン
出力例
説明
date{DD/MM/YYYY}
01/04/2007
日/月/年

共通の日付トークン:

トークン
意味
D、DD
M、MM、MMM、MMMM
YY、YYYY
EEEE
平日
NOTE
表示パターンを正しくレンダリングするには、基礎となる日付フィールド値が​ ISO 8601 ​に準拠している必要があります。 YYYY-MM-DD​形式で値を指定します(例:2007-04-01)。 この形式に従わない値は、パターンの書式設定が適用されずに、そのまま表示されます。

​3. プロパティ

日付フィールドオブジェクトには、いくつかの設定可能なプロパティが含まれています。

2.1. 基本フィールド

  • 名前: ルール、スクリプト、データモデル内のフィールドを参照するために使用される一意の識別子。

  • キャプション: ユーザーに表示される表示ラベル (例:「生年月日」)。

  • 日付:​実際の日付の値。デフォルトでは空であるか、動的データを使用して事前入力される場合があります。

  • 予約: オプションのフォールバック日(日付が選択されていないか、データが使用できない場合に表示されます)。

  • アピアランス:​視覚的な一貫性を保つためのクイックスタイルプリセット(例:下線付き、フラット、枠線など)。

2.2. タイポグラフィ

フィールド内での日付の表示方法を制御します。

  • フォントのバリエーション: フォントファミリー、太さ(例:標準、太字)、スタイル(例:斜体)を選択します。

  • サイズ:​通常、デフォルトでは10 ptに設定されますが、周囲のコンテンツとの一貫性を保つためにカスタマイズできます。

2.3. 位置

ドキュメントレイアウト内の空間配置を定義します。

  • XおよびY座標:​水平方向と垂直方向の配置を決定します。

  • 幅と高さ:​他のフォーム要素と整列するように、ミリメートルまたはパーセントで設定します。

2.4. 余白

フィールドの境界の周りの間隔を指定します。

  • 上(上)

  • 下(下)

これらの値は、サブフォームまたはレイアウトグリッド内の正確な整列に役立ちます。

2.5. 外観

フィールドコンテナのビジュアルスタイルを定義します。

  • 塗りつぶし: フィールドの背景色(例:白、明るいグレー)。

  • 線:​境界線の色またはアウトライン。

  • 幅: フィールドの境界線の太さ。

  • スタイル:​実線、破線、または点線のオプション。

  • エッジ: デザインの好みに合わせて、角を丸みまたはシャープにカスタマイズします。

2.6. プレゼンス

フィールドを表示する方法とタイミングを指定します。

  • 表示可能: フィールドが実行時に表示されるデフォルト設定。

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

これは、ユーザーの入力またはルールに基づいて表示を動的に切り替える場合に役立ちます。

2.7. データ連結

日付フィールドをデータ構造に接続して、値を保存または事前入力します。

データ バインディングの種類:

  • 名前を使用: name属性を使用してフィールドをスキーマにバインドします。

  • 定義済みのデータモデルまたはスキーマ要素を使用して、グローバルデータ:​のバインドを使用します。

  • データバインディングなし: フィールドは静的なままであり、どのデータソースにも接続されていません。

これにより、動的な日付値をアプリケーションロジックに基づいて取得、表示、または保存できます。

​4. 使用方法

日付フィールドは、次のシナリオで特に便利です。

  • オンボーディングフォームで生年月日や参加日を記録。

  • サービス、サブスクリプション、またはイベントの開始日と終了日を選択します。

  • 申し込み締め切り、予約スロット、検証日を入力。

作成者は、レイアウトコンテナまたはサブフォーム内に日付フィールドを配置し、データ品質を向上させるために検証(日付形式、範囲制限など)を設定できます。

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

  • 「開始日」や「予定日を選択」などの明確なキャプションを使用して、UXを向上させることができます。

  • 無効な入力(将来のDOBなど)を防ぐために、最小および最大の日付範囲を設定します。

  • 読みやすくするために、一貫したフォントスタイル(10 pt推奨)を適用します。

  • バックエンドデータの統合が必要な場所で、フィールドをスキーマにバインドします。

  • 表示ルールを使用して、関連のない日付フィールドを動的に非表示にします。

インタラクティブ通信エディターの​日付フィールド オブジェクトは、時間的制約のあるデータを正確かつ簡単にキャプチャするための強力なツールです。 入念にスタイルを設定し、有意義なデータパスに接続することで、シームレスなユーザーエクスペリエンスと、時間ベースのエントリの効率的な処理をサポートします。

関連トピック

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