生成XDP表单的HTML5预览

在AEM Forms设计器中设计表单时，除了预览表单的PDF再现外，您还可以预览表单的HTML5再现。 您可以使用​预览HTML​选项卡预览表单，就像在浏览器中一样。

在Designer中为XDP表单启用HTML预览

要使设计人员能够生成XDP表单的HTML预览，请执行以下配置：

  • 配置Apache Sling Authentication Service
  • 禁用保护模式
  • 提供AEM Forms服务器的详细信息

配置Apache Sling Authentication Service

  1. 转到运行于OSGi或OSGi上的AEM Forms上的https://'[server]:[port]'/system/console/configMgr
    https://'[server]:[port]'/lc/system/console/configMgr aem forms在JEE上跑。

  2. 找到并单击​Apache Sling Authentication Service​配置，以在编辑模式下打开它。

  3. 根据您是在OSGi还是JEE上运行AEM Forms，在​身份验证要求​字段中添加以下内容：

    • AEM FormsJEE

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

    • AEM FormsOSGi

      • -/content/xfaforms
      • -/etc/clientlibs/fd/xfaforms
    注意

    请勿复制粘贴“身份验证要求”字段中的指定值，因为它可能损坏该值中的特殊字符。 而是在字段中键入指定的值。

  4. 在​匿名用户名​和​匿名用户密码​字段中分别指定用户名和密码。 指定的凭据用于处理匿名身份验证并允许匿名用户访问。

  5. 单击​保存​以保存配置。

禁用保护模式

默认情况下，保护模式处于打开状态。 让它为生产环境启用。 您可以将其禁用，以在设计师中预览HTML5Forms。 请执行以下步骤以禁用它：

  1. 以管理员身份登录到AEM Web Console。

    • OSGi上的AEM Forms的URL为https://'[server]:[port]'/system/console/configMgr
    • JEE上的AEM Forms的URL为https://'[server]:[port]'/lc/system/console/configMgr

  2. 打开​移动Forms配置​进行编辑。

  3. 取消选择​保护模式​选项，然后单击​保存。

提供AEM Forms服务器的详细信息

  1. 在“设计器”中，转至​工具 > 选项。

  2. 在“选项”窗口中，选择​“服务器选项”​页，提供以下详细信息，然后单击​确定。

    • 服务器URL:AEM Forms服务器URL。

    • HTTP端口号:AEM服务器端口。默认值为 4502。

    • HTML预览上 下文：呈现XFA表单的用户档案的路径。以下默认用户档案用于在设计器中预览表单。 但是，您也可以指定自定义用户档案的路径。

      • /content/xfaforms/profiles/default.html (AEM FormsOSGi)

      • /lc/content/xfaforms/profiles/default.html (AEM FormsJEE)

    • FormsManager Context: 部署FormsManager UI的上下文路径。默认值为：

      • /aem/forms (AEM FormsOSGi)
      • /lc/forms (AEM FormsJEE)
    注意

    确保AEM Forms服务器已启动并运行。 HTML预览连接到CRX服务器以生成​**​预览。

    AEM Forms设计师选项

    AEM Forms设计师选项

  3. 要预览HTML中的表单，请单击​预览HTML​选项卡。

    注意
    • 如果HTML预览选项卡已关闭，请按F4打开预览HTML选项卡。 还可以从“预览”菜单中选择“预览HTML”以打开“视图HTML”选项卡。
    • HTML预览不支持PDF文档,HTML预览仅用于XDP文档。
    注意

    要测试真正的最终用户体验，还可在外部浏览器（Google Chrome、Microsoft Edge、Mozilla Firefox等）中预览表单。 每个浏览器都使用单独的引擎来呈现HTML，因此在设计器和外部浏览器中表单预览的方式可能存在一些差异。

使用示例数据预览表单

Designer允许您使用范例XML数据预览和测试表单。 建议您经常使用示例数据测试表单，以确保表单正确呈现。

如果您没有示例数据，设计人员可以创建它，您也可以自己创建它。 (请参阅自动生成示例数据以预览表单和创建示例数据以预览表单。)

使用示例数据源测试表单可确保映射数据和字段，并确保重复的子表单按您期望的方式重复。 您可以创建平衡的表单布局，为每个对象提供显示合并数据的适当空间。

  1. 选择​文件>表单属性。

  2. 单击​预览​选项卡，在“Data File（数据文件）”框中，键入测试数据文件的完整路径。 您还可以使用“浏览”按钮导航到文件。

  3. 单击​确定。下次在​预览HTML​选项卡中预览表单时，示例XML文件中的数据值将显示在相应的对象中。

预览表单位于存储库中

在AEM Forms，您可以预览存储库中的表单和文档。 预览有助于准确了解表单的外观和行为，就像最终用户一样。

在此页面上