在AEM Forms Designer中設計表單時,除了預覽表單的PDF轉譯外,您也可以預覽表單的HTML5轉譯。 您可以使用預覽HTML標籤來預覽表單在瀏覽器中的顯示效果。
要啟用Designer生成XDP表單的HTML預覽,請執行以下配置:
前往OSGi上執行之AEM Forms上的https://'[server]:[port]'/system/console/configMgr
或
https://'[server]:[port]'/lc/system/console/configMgr
在JEE上執行的AEM Forms。
找到並按一下Apache Sling Authentication Service設定,以在編輯模式中開啟。
視您是在OSGi或JEE上執行AEM Forms而定,請在Authentication Requirements欄位中新增下列項目:
AEM Forms on JEE
AEM Forms on OSGi
請勿在「驗證需求」欄位中複製並貼上指定的值,因為它可能會損毀值中的特殊字元。 請改為在欄位中輸入指定值。
在匿名用戶名和匿名用戶密碼欄位中指定用戶名和密碼。 指定的憑據用於處理匿名身份驗證並允許匿名用戶訪問。
按一下儲存以儲存設定。
預設情況下,保護模式處於開啟狀態。 讓環境保持啟用狀態。 您可以停用該功能,以便在開發環境中預覽HTML5 Forms。 執行下列步驟以停用:
以管理員身分登入AEM Web Console。
https://'[server]:[port]'/system/console/configMgr
https://'[server]:[port]'/lc/system/console/configMgr
開啟行動Forms設定以進行編輯。
取消選擇「保護模式」選項,然後按一下「保存」。
在Designer中,轉至Tools > Options。
在「選項」窗口中,選擇伺服器選項頁,提供以下詳細資訊,然後按一下確定。
伺服器URL:AEM Forms伺服器URL。
HTTP埠號:AEM伺服器埠。預設值為 4502。
HTML預覽內容: 轉譯XFA表單之設定檔的路徑。以下預設配置檔案用於在設計器中預覽表單。 不過,您也可以指定自訂設定檔的路徑。
/content/xfaforms/profiles/default.html
(AEM Forms on OSGi)
/lc/content/xfaforms/profiles/default.html
(JEE版AEM Forms)
Forms Manager Context: 部署Forms Manager UI的內容路徑。預設值為:
/aem/forms
(AEM Forms on OSGi)/lc/forms
(JEE版AEM Forms)確認AEM Forms伺服器已啟動並執行。 HTML預覽會連線至CRX伺服器以產生預覽。
AEM Forms設計工具選項
若要預覽HTML中的表單,請按一下「預覽HTML」標籤。
若要測試真正的一般使用者體驗,請同時在外部瀏覽器(Google Chrome、Microsoft Edge、Mozilla Firefox等)中預覽表單。 每個瀏覽器都使用不同的引擎來轉譯HTML,因此在Designer和外部瀏覽器中預覽表單的方式可能會有一些差異。
Designer可讓您使用範例XML資料來預覽和測試表單。 建議您經常使用範例資料測試表單,以確保表單可正確轉譯。
如果您沒有範例資料,可由設計人員建立,或由您自行建立。 (請參閱自動產生範例資料以預覽表單和建立範例資料以預覽表單)。
使用範例資料來源來測試您的表單,可確保資料和欄位已對應,且重複的子表單會如預期般重複。 您可以建立平衡的表單版面,為每個物件提供適當空間以顯示合併的資料。
選擇檔案>表單屬性。
按一下預覽頁簽,然後在「資料檔案」框中鍵入測試資料檔案的完整路徑。 您也可以使用「瀏覽」按鈕來導覽至檔案。
按一下「確定」。下次在預覽HTML頁簽中預覽表單時,示例XML檔案中的資料值將出現在相應的對象中。
在AEM Forms中,您可以在存放庫中預覽表單和檔案。 預覽有助於確切了解使用者使用表單的外觀和行為。