產生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驗證服務
- 停用保護模式
- 提供AEM Forms伺服器的詳細資訊
設定Apache Sling驗證服務 configure-apache-sling-authentication-service
-
前往
https://'[server]:[port]'/system/console/configMgr
在OSGi上執行的AEM Forms上或https://'[server]:[port]'/lc/system/console/configMgr
在JEE上執行的AEM Forms上。 -
找到並按一下 Apache Sling驗證服務 設定,以在編輯模式中開啟它。
-
根據您是在OSGi或JEE上執行AEM Forms,在中新增下列內容 驗證需求 欄位:
-
JEE上的AEM Forms
- -/content/xfaforms
- -/etc/clientlibs
-
OSGi上的AEM Forms
- -/content/xfaforms
- -/etc/clientlibs/fd/xfaforms
note note NOTE 請勿複製並貼上「驗證需求」欄位中的指定值,因為這會損壞值中的特殊字元。 請改為在欄位中輸入指定的值。 -
-
在中指定使用者名稱和密碼 匿名使用者名稱 和 匿名使用者密碼 欄位。 指定的認證用於處理匿名驗證,並允許匿名使用者存取。
-
按一下 儲存 以儲存組態。
停用保護模式 disable-protected-mode
此 受保護模式 預設為開啟。 在生產環境中維持啟用。 您可以為開發環境停用它,以便在設計中預覽HTML5 Forms。 執行以下步驟來停用它:
-
以管理員身分登入AEM Web Console。
- OSGi上的AEM Forms URL是
https://'[server]:[port]'/system/console/configMgr
- JEE上AEM Forms的URL為
https://'[server]:[port]'/lc/system/console/configMgr
- OSGi上的AEM Forms URL是
-
開啟 行動Forms設定 以進行編輯。
-
取消選取 受保護模式 選項並按一下 儲存.
提供AEM Forms伺服器的詳細資訊 provide-details-of-aem-forms-server
-
在Designer中,前往 工具 > 選項.
-
在「選項」視窗中,選取 伺服器選項 頁面,提供下列詳細資料,然後按一下 確定.
-
伺服器URL:AEM Forms伺服器URL。
-
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選項
-
-
若要以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和外部瀏覽器中的表單預覽方式可能有一些差異。 - 如果「HTML預覽」標籤關閉,請按F4開啟「預覽HTML」標籤。 您也可以從「檢視」選單中選取「預覽HTML」,以開啟「預覽HTML」標籤。
若要使用範例資料預覽表單 to-preview-a-form-using-sample-data
Designer可讓您使用範例XML資料預覽及測試表單。 建議您經常使用範例資料測試表單,以確保表單正確呈現。
如果您沒有範例資料,Designer可以建立它,您也可以自行建立。 (請參閱 若要自動產生範例資料以預覽您的表單 和 建立範例資料以預覽表單的方式.)
使用範例資料來源測試您的表單可確保資料和欄位對應,並且重複的子表單會如預期般重複。 您可以建立平衡的表單版面配置,為每個物件提供適當的空間,以顯示合併的資料。
-
選取 檔案>表單屬性.
-
按一下 預覽 標籤,並在「資料檔案」方塊中,輸入測試資料檔案的完整路徑。 您也可以使用「瀏覽」按鈕來導覽至檔案。
-
按一下 確定. 下次您預覽表單時 預覽HTML 標籤,範例XML檔案中的資料值會顯示在個別物件中。
在存放庫中預覽表單 html-preview-of-forms-in-forms-manager
在AEM Forms中,您可以預覽存放庫中的表單和檔案。 預覽有助於瞭解一般使用者使用表單的確切外觀和行為。