AEM Forms Designer でフォームをデザインする間、フォームの PDF レンダリングをプレビューする他に、HTML5 レンダリングをプレビューすることもできます。「HTML プレビュー」タブを使用すると、フォームがブラウザでどのように表示されるかをプレビューすることができます。
Designer での XDP フォームの HTML プレビューの生成を有効にするには、次の設定を行います。
OSGi上で動作しているAEM Formsのhttps://'[server]:[port]'/system/console/configMgr
に移動するか、
https://'[server]:[port]'/lc/system/console/configMgr
JEE上で動いているAEM Formsで
Apache Sling Authentication Service 設定を探してクリックし、編集モードで開きます。
AEM Forms を OSGi または JEE のどちらで実行しているかにより、Authentication Requirements フィールドで以下を追加します。
JEE 上の AEM Forms
OSGi での AEM Forms
Authentication Requirements フィールドで指定した値をコピーアンドペーストしないでください。値に使用されている特殊文字が文字化けするおそれがあります。代わりに、フィールドに指定の値を入力します。
「匿名ユーザー名」フィールドと「匿名ユーザーパスワード」フィールドで、ユーザー名とパスワードをそれぞれ指定します。指定した資格情報は、匿名認証を処理し、匿名ユーザーにアクセスを許可するために使用されます。
「Save」をクリックして、 設定を保存します。
保護モードは、デフォルトで有効になっています。実稼働環境の場合、このモードを有効のままにしてください。開発環境でこのモードを無効にすると、Designer で HTML5 フォームのプレビューを表示することができます。次の手順を実行して無効にします。
管理者として AEM Web コンソールにログインします。
https://'[server]:[port]'/system/console/configMgr
ですhttps://'[server]:[port]'/lc/system/console/configMgr
ですMobile Forms の設定を編集用に開きます。
「保護モード」オプションの選択を解除して「保存」をクリックします。
Designer で、ツール/オプションに移動します。
オプションウィンドウで、サーバーオプションページを選択し、次の詳細を入力して、OKをクリックします。
Server URL:AEM Forms サーバーの URL です。
HTTP port number:AEM サーバーポート。デフォルト値は 4502 です。
HTMLプレビューコンテキスト:XFAフォームのレンダリング用プロファイルの パス。次のデフォルトプロファイルを使用して、Designerでフォームのプレビューを行います。 ただし、カスタムプロファイルへのパスを指定することもできます。
/content/xfaforms/profiles/default.html
(OSGi 上の AEM Forms)
/lc/content/xfaforms/profiles/default.html
(JEE 上の AEM Forms)
Forms Manager Context : Forms Manager UI がデプロイされるコンテキストパス。デフォルト値は次のとおりです。
/aem/forms
(OSGi 上の AEM Forms)/lc/forms
(JEE 上の AEM Forms)AEM Formsサーバーが起動および実行されていることを確認します。 HTMLプレビューはCRXサーバーに接続し、プレビューを生成します。
AEM Forms Designer のオプション
HTMLでフォームをプレビューするには、「プレビューHTML」タブをクリックします。
実際のエンドユーザーエクスペリエンスをテストするには、外部ブラウザー(Google Chrome、Microsoft Edge、Mozilla Firefoxなど)でフォームをプレビューします。 各ブラウザーは、HTMLのレンダリングに別々のエンジンを使用するので、Designerと外部ブラウザーでのフォームプレビューの違いが生じる場合があります。
Designer では、サンプル XML データを使用してフォームをプレビューおよびテストすることができます。フォームが正しくレンダリングされるよう、フォームをサンプルデータで頻繁にテストすることをお勧めします。
サンプルデータがない場合には、Designer で自動生成するか、または独自に作成することができます。フォームのプレビュー用にサンプルデータを自動生成するにはおよびフォームのプレビュー用にサンプルデータを作成するにはも参照してください。
サンプルデータソースを使用してフォームをテストすると、データとフィールドがマップされていること、および繰り返しサブフォームが指定どおりに繰り返されることを確認できます。各オブジェクトに結合されたデータを表示するにあたり適切なスペースが確保された、バランスのよいフォームレイアウトを作成できます。
ファイル/フォームのプロパティを選択します。
「プレビュー」タブをクリックし、「データファイル」ボックスに、テストデータファイルへの完全なパスを入力します。参照ボタンを使用してファイルを指定することもできます。
「OK」をクリックします。次回に「HTML プレビュー」タブでフォームをプレビューするときには、それぞれのオブジェクトにサンプル XML ファイルからのデータ値が表示されます。
AEM Forms では、リポジトリにあるフォームやドキュメントをプレビューすることができます。プレビューを使用すると、エンドユーザーによって使用される際にどのように見え、作動するのかを明確に理解できます。