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

インタラクティブ通信エディターのテキストボックスコンポーネント

​1. はじめに

インタラクティブ通信エディターの​テキストボックス コンポーネントを使用すると、作成者は通信内のテキストコンテンツを入力および表示できます。 これは、最も基本的で広く使用されているコンポーネントのひとつであり、インタラクティブなコミュニケーションやコミュニケーションフラグメントを設計する際に、名前、コメント、フィードバック、カスタムデータを収集するために一般的に使用されます。

テキストボックスは​ データバインディング ​をサポートしており、作成者は静的コンテンツと動的コンテンツをシームレスに組み合わせることができます。例:「User’s name: @name」。@nameは、ドキュメントがPDFとして保存されたときに動的に入力されるバウンドデータフィールドです。 また、リッチテキストの書式設定や柔軟な配置もサポートしており、正確なレイアウト制御が可能です。

IC ドキュメントを検索

​2. 表示パターン

プロパティ パネルから​ 表示パターン ​をテキストボックスフィールドに割り当てることができます。 表示パターンは、キャンバスのプレビューおよび生成された出力でエンドユーザーにフィールド値を表示する方法を制御します。例えば、テキストエントリを電話番号としてマスクします:(555) 123-4567

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

表示パターンの設定

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

カスタムパターンの例(テキスト)

パターン
出力例
説明
text{(999) 999-9999}
(555) 123-4567
電話番号マスク

図形節記号(テキスト):

シンボル
意味
9
数字と一致
A
文字と一致
O
英数字に一致
X
任意の文字に一致

ベストプラクティス

  • エンドユーザーが値(電話、ID、郵便番号)の読み取りを期待する方法に一致するパターンを選択します。
  • 公開前に、カンバスプレビューでサンプルデータを検証します。
  • 定義済みのパターンが書式設定のニーズを満たさない場合にのみ、カスタム画像句を使用します。

​3. プロパティ

テキストボックスコンポーネントには、ルック、フィール、動作の設定に役立つ様々なプロパティが用意されています。

2.1 タイポグラフィ

フォントファミリー: Arial、Helvetica、Times New Romanなどのフォントスタイルを選択できます。

フォントの検証: オプションの入力制約を適用して、テキスト、数値、または特殊な形式のみを使用できるようにすることができます。

テキストの整列: オプションには、左揃え、右揃え、中央揃え、両端揃えなどがあります。

テキストスタイル:​太字、斜体、取り消し線、下線の機能を使用してテキストの書式設定を有効にします。

リスト:​順序付き(番号付き)リストと順序付き(箇条書き)リストの挿入をサポートします。

2.2 ポジション

幅と高さ: テキストボックスのサイズを、コンテナに対するピクセルまたはパーセント単位で設定します。

2.3 マージン

テキストボックスの周囲の間隔を定義します。

  • 上(上)

  • 下(下)

2.4外観

  • テキストの塗りつぶし: テキストの色と透明度をカスタマイズします。

  • 塗りつぶし: テキストボックスの背景色を設定します。

  • 線: カスタマイズ可能な境界線を追加:

    • 幅(太さ)

    • スタイル(実線、破線、点線)

    • Edge(角丸または鋭利)

2.5 プレゼンス

表示: デフォルト設定。ユーザーにテキストボックスが表示されます。

非表示: テキストボックスはフォームに含まれていますが、表示されていません。

​4. 使用方法

テキストボックスは、次の目的で使用されます。

  • 名前、コメント、フィードバックなどの顧客情報を収集する。

  • 英数字の値を入力しています。

  • バウンドデータモデルを使用してパーソナライズされたメッセージを統合する。

  • フラグメント内に埋め込んで、ドキュメント間で繰り返し使用します。

作成者は、コンポーネントライブラリからデザインビューにテキストボックスをドラッグするか、プロパティパネルを使用してマスタービューを開き、その動作を設定できます。

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

  • アクセシビリティを向上させるために、テキストボックスを意味のあるフィールドラベルに常に関連付ける。

  • データ入力エラーを防ぐために、適切な入力バリデーションを使用します。

  • 親コンテナに対するマージンと幅を設定することで、レスポンシブレイアウトを実現します。

  • 読みやすさを妨げる可能性のある過剰なフォントスタイルを避けます。

AEMのインタラクティブ通信エディターでは、テキストボックスのプロパティを慎重に設定することで、インタラクティブでレスポンシブでユーザーフレンドリーなコミュニケーション体験を作成できます。

関連トピック

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