XDP フォームの HTML5 プレビューの生成 generate-html-preview-of-an-xdp-form

AEM Forms Designer でフォームをデザインする間、フォームの PDF レンディションをプレビューする他に、HTML5 レンディションをプレビューもできます。 「HTML プレビュー」タブを使用すると、ブラウザーでのフォームの表示をプレビューできます。

Designer での XDP フォームの HTML プレビューの有効化 html-preview-of-forms-in-forms-designer

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

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

Apache Sling Authentication Service の設定 configure-apache-sling-authentication-service

  1. OSGi で実行されている AEM Forms では https://'[server]:[port]'/system/console/configMgr、
    JEE で実行されている AEM Forms では https://'[server]:[port]'/lc/system/console/configMgr に移動します。

  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
    note
    NOTE
    値に使用されている特殊文字が文字化けする可能性があるため、「認証要件」フィールドで指定した値をコピー&ペーストしないでください。 代わりに、指定した値をフィールドに入力します。
  4. 「匿名ユーザー名」フィールドと「匿名ユーザーパスワード」フィールドで、ユーザー名とパスワードをそれぞれ指定します。 指定した資格情報は、匿名認証を処理し、匿名ユーザーにアクセスを許可するのに使用されます。

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

保護モードの無効化 disable-protected-mode

保護モードは、デフォルトで有効になっています。 本番環境では有効のままにします。 開発環境でこのモードを無効にすると、Desinger で 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 サーバーの詳細の指定 provide-details-of-aem-forms-server

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

  2. オプションウィンドウで​ サーバーオプション ​ページを選択し、次の詳細を提供して「OK」をクリックします。

    • Server URL:AEM Forms サーバーの URL です。

    • HTTP ポート番号:AEM サーバーポート。 デフォルト値は 4502 です。

    • HTML Preview Context: XFA フォームのレンダリングに使用するプロファイルのパス。 Designer でのフォームのプレビューには、次のプロファイルがデフォルトで使用されています。 ただし、カスタムプロファイルへのパスを指定することもできます。

      • /content/xfaforms/profiles/default.html (OSGi 上の AEM Forms)

      • /lc/content/xfaforms/profiles/default.html (JEE 上の AEM Forms)

    • Forms Manager コンテキスト: Forms Manager UI がデプロイされるコンテキストパス。 デフォルト値は次のとおりです。

      • /aem/forms (OSGi 上の AEM Forms)
      • /lc/forms (JEE 上の AEM Forms)
    note
    NOTE
    AEM Forms サーバーが起動および実行されていることを確認してください。 HTML プレビューは、プレビューを​ 生成 ​するために CRX サーバーに接続します。

    AEM Forms Designer のオプション

    AEM Forms Designer のオプション

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

    note
    NOTE
    • 「HTML プレビュー」タブが閉じている場合は、F4 キーを押して「HTML プレビュー」タブを開きます。 また、表示メニューから「HTML プレビュー」を選択して、「HTML プレビュー」タブを開くこともできます。
      • HTML プレビューは PDF ドキュメントをサポートしません。HTML プレビューは XDP ドキュメント専用です。
    note caution
    CAUTION
    実際のエンドユーザーエクスペリエンスをテストするには、外部ブラウザー(Google Chrome、Microsoft Edge、Mozilla Firefox など )でフォームをプレビューします。 ブラウザーごとに別々のエンジンを使用して HTML をレンダリングするので、Designer と外部ブラウザーでのフォームのプレビュー方法に多少の違いが生じる場合があります。

サンプルデータを使用してフォームをプレビューするには、次の手順に従います。 to-preview-a-form-using-sample-data

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

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

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

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

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

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

リポジトリにあるフォームのプレビュー html-preview-of-forms-in-forms-manager

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

recommendation-more-help
experience-manager-65-help-main-toc