產生XDP表單的HTML5預覽

在AEM Forms設計人員中設計表格時,除了預覽表格的PDF轉譯外,您也可以預覽表格的HTML5轉譯。 您可以使用​預覽HTML​標籤來預覽表單在瀏覽器中的顯示效果。

在Designer中啟用XDP表單的HTML預覽

若要讓設計人員產生XDP表單的HTML預覽,請執行下列設定:

  • 設定Apache Sling Authentication Service
  • 禁用保護模式
  • 提供AEM Forms伺服器的詳細資訊

設定Apache Sling Authentication Service

  1. 轉到運行於OSGi或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,請在​Authentication Requirements​欄位中添加以下內容:

    • 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)

    • Forms管理員上 下文:部署Forms管理員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,因此在設計人員和外部瀏覽器中預覽表單的方式可能會有一些不同。

使用範例資料預覽表格

設計人員可讓您使用範例XML資料來預覽和測試表格。 建議您經常使用範例資料來測試表格,以確保表格能正確呈現。

如果您沒有範例資料,設計人員可以建立它,或者您可以自行建立它。 (請參閱自動產生範例資料以預覽您的表單建立範例資料以預覽您的表單)。

使用範例資料來源來測試表單,可確保資料和欄位已映射,且重複的子表單會如預期般重複。 您可以建立平衡的表單配置,為每個物件提供適當的空間以顯示合併的資料。

  1. 選擇​檔案>表單屬性

  2. 按一下「預覽​」標籤,然後在「資料檔案」方塊中,輸入測試資料檔案的完整路徑。 您也可以使用「瀏覽」按鈕來導覽至檔案。

  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