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

検索
Experience Manager 6.3 Forms マニュアル

目次

対象アプリケーション: Experience Manager 6.3 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. フォームを編集モードで開きます。

  2. 編集モードで、コンポーネントを選択して、／アダプティブフォームコンテナをタップし、それからをタップします。

  3. アダプティブフォームテーマのサイドバーで、テーマエディタで作成したテーマを選択します。

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

  1. CRXDE Lite を開きます。デフォルトの URL は http://[サーバー]:[ポート]/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 パッケージには、フィールドの右側にエラーメッセージを表示するコードが含まれます。