生成XDP表单的HTML5预览

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

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

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

  • 配置Apache Sling身份验证服务
  • 禁用保护模式
  • 提供AEM Forms Server的详细信息

配置Apache Sling身份验证服务

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

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

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

    • AEM Forms on JEE

      • -/content/xfaforms
      • -/etc/clientlibs
    • AEM Forms on OSGi

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

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

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

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

禁用保护模式

默认情况下,保护模式处于打开状态。 使它对生产环境保持启用。 您可以禁用它,以便在设计师中将HTML5 Forms预览为开发环境。 请执行以下步骤以禁用它:

  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. 在Designer中,转到​工具 > 选项

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

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

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

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

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

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

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

      • /aem/forms (AEM Forms on OSGi)
      • /lc/forms (AEM Forms on JEE)
    注意

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

    AEM Forms Designer选项

    AEM Forms Designer选项

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

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

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

使用示例数据预览表单

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

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

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

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

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

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

预览表单位于存储库中

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

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now