アダプティブフォームのエラーメッセージのレイアウトと位置のカスタマイズ

アダプティブフォームのエラーメッセージのレイアウトと位置をカスタマイズできます。次をカスタマイズできます。

  • 対応の CSS プロパティに変更を加えないでフィールドのキャプションの位置とレイアウトをカスタマイズ
  • インラインエラーメッセージの位置をカスタマイズ
  • 動的ヘルプインジケーターのコンテンツをカスタマイズ
  • 対応の CSS プロパティに変更を加えないでフィールドコンポーネント（キャプション、ウィジェット簡単な説明、詳細な説明、ヘルプインジケーターのコンポーネント）の位置をカスタマイズ

フィールドのレイアウトをカスタマイズ

単位のフィールドまたはすべてのフィールドのレイアウトをカスタマイズして、キャプションやエラーメッセージの位置を変更できます。カスタムレイアウトをフィールドに適用するには、次の手順を実行します。

単一フィールドのレイアウトをカスタマイズ

カスタムレイアウトを単一フィールドに適用するには、次の手順を実行します。

  1. スタイル​モードでフォームを開きます。フォームをスタイルモードで開くには、ページツールバーでcanvas-drop-down / スタイル​をタップします。

  2. サイドバーの「フォームオブジェクト」で、フィールドを選択し、編集ボタン編集ボタンをタップします。

  3. カスタマイズするフィールドの状態を選択し、その状態のスタイル設定を指定します。

    フィールドのインラインスタイル設定を指定する

フォームのすべてのフィールドのレイアウトをカスタマイズ

AEM Forms では、テーマを作成してフォームに適用できるようになりました。テーマエディターにより、フォームコンポーネントのスタイル設定を 1 箇所で行うことができます。テーマを作成すると、コンポーネントレベルでスタイルを設定します。テーマの詳細については、「AEM Forms におけるテーマ」を参照してください。

テーマエディターを使用してテーマを作成し、フォームにおけるすべてのフィールドのレイアウトをカスタマイズします。テーマを作成するには、次の手順を実行します。

  1. フォームを編集モードで開きます。
  2. 編集モードで、コンポーネントを選択し、フィールドレベル／アダプティブフォームコンテナ​をタップしてから、 cmppr をタップします。
  3. アダプティブフォームテーマのサイドバーで、テーマエディタで作成したテーマを選択します。

カスタムフィールドレイアウトを作成

  1. CRXDE Lite を開きます。デフォルトの URL は https://[Server]:[Port]/crx/de です。

  2. /libs/fd/af/layouts/field node からフィールドレイアウト（例えば、defaultFieldLayout）を /apps node（例えば、/apps/af-field-layout）にコピーします。

  3. コピーしたノードの名前と defaultFieldLayout.jsp ファイルの名前を変更します。例えば、errorOnRight.jsp。

  4. コピーしたノードのqtipプロパティとjcr:descriptionプロパティの値を変更します。 例えば、プロパティの値を「Error On Right」に変更します。

  5. 新しいスタイルおよび動作を追加するには、/etc ノードでクライアントライブラリを作成します。

    例えば、/etc/af-field-layout-clientlib で、ノード client-library を作成します。値 af.field.errorOnRight を持つカテゴリプロパティと次のコードを持つ style.less ファイルを追加します。

    .widgetErrorWrapper {

 height: 38px;
 margin: 5px;

 .guideFieldWidget{
 width: 60%;
 float: left; 
 }

 .guideFieldError{
 overflow:hidden;
 width:40%; 
 }

}

  6. 外観と動作を向上するには、レイアウトファイル内で作成したクライアントライブラリを含めます（errorOnRight.jsp）。

  7. フィールドの編集ダイアログを開き、「スタイル」タブを選択します。「フィールドレイアウトを設定」ドロップダウンボックスで、新しく作成したレイアウトを選択し、「OK」をクリックします。

ErrorOnRight.zip パッケージには、フィールドの右側にエラーメッセージを表示するコードが含まれます。

ファイルを入手

このページ