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

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

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

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

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

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

  1. フィールドの編集ダイアログで、

  2. フィールドレイアウトを設定」ドロップダウンボックスで、カスタムレイアウトを選択し、「OK」をクリックします。

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

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

  1. アダプティブフォームの開始」パネルで、「編集」をクリックし、「スタイル」タブを選択します。

  2. フィールドレイアウトを設定」ドロップダウンボックスで、カスタムレイアウトを選択し、「OK」をクリックします。

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

  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」をクリックします。

ダウンロード

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー