文件AEM 6.5使用手冊

產生XDP表單的HTML5預覽 generate-html-preview-of-an-xdp-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined
  • undefined

在AEM Forms Designer中設計表單時，除了預覽表單的PDF轉譯外，您還可以預覽表單的HTML5轉譯。 您可以使用​ 預覽HTML ​標籤來預覽顯示在瀏覽器中的表單。

在Designer中啟用XDP表單的HTML預覽 html-preview-of-forms-in-forms-designer

若要讓Designer產生XDP表單的HTML預覽，請執行以下設定：

  • 設定Apache Sling驗證服務
  • 停用保護模式
  • 提供AEM Forms伺服器的詳細資訊

設定Apache Sling驗證服務 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. 視您在OSGi或JEE上執行AEM Forms而定，請在​ 驗證需求 ​欄位中新增下列專案：

    • JEE上的AEM Forms

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

    • OSGi上的AEM Forms

      • -/content/xfaforms
      • -/etc/clientlibs/fd/xfaforms
    note note
    NOTE
    請勿複製並貼上「驗證需求」欄位中的指定值，因為這會損壞值中的特殊字元。 請改為在欄位中輸入指定的值。

  4. 在​ 匿名使用者名稱 ​與​ 匿名使用者密碼 ​欄位中分別指定使用者名稱與密碼。 指定的認證用於處理匿名驗證，並允許匿名使用者存取。

  5. 按一下[儲存]儲存組態。​

停用保護模式 disable-protected-mode

依預設，保護模式是開啟的。 在生產環境中維持啟用。 您可以為開發環境停用它，以便在設計中預覽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伺服器的詳細資訊 provide-details-of-aem-forms-server

  1. 在Designer中，移至​ 工具 > 選項。

  2. 在[選項]視窗中，選取[伺服器選項]頁面​ ​，提供下列詳細資料，然後按一下[確定]​ ​。

    • 伺服器網址： AEM Forms伺服器網址。

    • HTTP連線埠號碼： AEM伺服器連線埠。 預設值為 4502。

    • HTML預覽內容： ​呈現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
    NOTE
    確認AEM Forms伺服器已啟動且執行中。 HTML預覽會連線至CRX伺服器，以​ 產生 ​預覽。

    AEM Forms Designer選項

    AEM Forms Designer選項

  3. 若要以HTML預覽表單，請按一下​ 預覽HTML ​索引標籤。

    note 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. 按一下​ 確定。 下次您在​ 預覽HTML ​標籤中預覽表單時，範例XML檔案中的資料值將會顯示在個別物件中。

在存放庫中預覽表單 html-preview-of-forms-in-forms-manager

在AEM Forms中，您可以預覽存放庫中的表單和檔案。 預覽有助於瞭解一般使用者使用表單的確切外觀和行為。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2