XDP フォームの HTML5 プレビューの生成

AEM Forms Designer でフォームをデザインする間、フォームの PDF レンダリングをプレビューする他に、HTML5 レンダリングをプレビューすることもできます。「HTML プレビュー」タブを使用すると、フォームがブラウザでどのように表示されるかをプレビューすることができます。

Designer での XDP フォームの HTML プレビューの有効化

Designer での XDP フォームの HTML プレビューの生成を有効にするには、次の設定を行います。

  • Apache Sling Authentication Service の設定
  • 保護モードの無効化
  • AEM Forms サーバーの詳細の指定

Apache Sling Authentication Service の設定

  1. OSGi上で動作しているAEM Formsのhttps://[server]:[port]/system/console/configMgrに移動するか、

    https://[server]:[port]/lc/system/console/configMgr JEE上で動いているAEM Formsで

  2. Apache Sling Authentication Service 設定を探してクリックし、編集モードで開きます。

  3. AEM Forms を OSGi または JEE のどちらで実行しているかにより、Authentication Requirements フィールドで以下を追加します。

    • JEE 上の AEM Forms

      • -/content/xfaforms
      • -/etc/clientlibs

    • OSGi での AEM Forms

      • -/content/xfaforms
      • -/etc/clientlibs/fd/xfaforms
    メモ

    Authentication Requirements フィールドで指定した値をコピーアンドペーストしないでください。値に使用されている特殊文字が文字化けするおそれがあります。代わりに、フィールドに指定の値を入力します。

  4. 「匿名ユーザー名」フィールドと「匿名ユーザーパスワード」フィールドで、ユーザー名とパスワードをそれぞれ指定します。指定した資格情報は、匿名認証を処理し、匿名ユーザーにアクセスを許可するために使用されます。

  5. 「Save」をクリックして、 設定を保存します。

保護モードの無効化

保護モードは、デフォルトで有効になっています。実稼働環境の場合、このモードを有効のままにしてください。開発環境でこのモードを無効にすると、Designer で HTML5 フォームのプレビューを表示することができます。次の手順を実行して無効にします。

  1. 管理者として AEM Web コンソールにログインします。

    • OSGiのAEM FormsのURLはhttps://[server]:[port]/system/console/configMgrです
    • JEE上のAEM FormsのURLはhttps://[server]:[port]/lc/system/console/configMgrです

  2. Mobile Forms の設定​を編集用に開きます。

  3. 「保護モード」オプションの選択を解除して「保存」をクリックします。

AEM Forms サーバーの詳細の指定

  1. Designer で、ツール／オプション​に移動します。

  2. オプションウィンドウで、サーバーオプション​ページを選択し、次の詳細を入力して、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)

    **注：**サーバーが起動および実行されていることを確認してください。HTMLプレビューはCRXサーバーに接続し、​プレビューを<a0/>生成​します。

    AEM Forms Designer のオプション

    AEM Forms Designer のオプション

  3. HTMLでフォームをプレビューするには、「プレビューHTML」タブをクリックします。

    メモ

    「HTML Preview」タブが閉じている場合は、F4 を押して「Preview HTML」を開けます。 また、表示メニューから「Preview HTML」を選択して、「Preview HTML」タブを開けることもできます。

    メモ

    HTML プレビューは PDF ドキュメントをサポートしません。HTML プレビューは XDP ドキュメント専用です。

サンプルデータを使用してフォームをプレビューするには

Designer では、サンプル XML データを使用してフォームをプレビューおよびテストすることができます。フォームが正しくレンダリングされるよう、フォームをサンプルデータで頻繁にテストすることをお勧めします。

サンプルデータがない場合には、Designer で自動生成するか、または独自に作成することができます。フォームのプレビュー用にサンプルデータを自動生成するにはおよびフォームのプレビュー用にサンプルデータを作成するにはも参照してください。

サンプルデータソースを使用してフォームをテストすると、データとフィールドがマップされていること、および繰り返しサブフォームが指定どおりに繰り返されることを確認できます。各オブジェクトに結合されたデータを表示するにあたり適切なスペースが確保された、バランスのよいフォームレイアウトを作成できます。

  1. ファイル／フォームのプロパティ​を選択します。

  2. 「プレビュー」タブをクリックし、「データファイル」ボックスに、テストデータファイルへの完全なパスを入力します。参照ボタンを使用してファイルを指定することもできます。

  3. 「OK」をクリックします。次回に「HTML プレビュー」タブでフォームをプレビューするときには、それぞれのオブジェクトにサンプル XML ファイルからのデータ値が表示されます。

リポジトリにあるフォームのプレビュー

AEM Forms では、リポジトリにあるフォームやドキュメントをプレビューすることができます。プレビューを使用すると、エンドユーザーによって使用される際にどのように見え、作動するのかを明確に理解できます。

サポートへのお問い合わせ

このページ