製作最適化表單簡介 introduction-to-authoring-adaptive-forms
概觀 overview
最適化表單可讓您建立吸引人、回應式、動態且最適化的表單。 AEM Forms提供直覺式使用者介面和現成可用的元件,供您建立及使用最適化表單。 您可以選擇根據表單模型或結構建立最適化表單,或不使用表單模型。 必須仔細選擇不僅符合您要求而且擴展您現有基礎設施投資和資產的表單模型。 您可以從下列選項中選擇,以建立最適化表單:
-
使用表單資料模型
資料整合 可讓您將不同資料來源的實體和服務整合到表單資料模型中,以便用來建立最適化表單。 如果您建立的最適化表單涉及從多個資料來源擷取資料並將其寫入多個資料來源,請選擇表單資料模型。 -
使用XDP表單範本
如果您對XFA或XDP表單有投資,則此表單是理想的表單模型。 它提供將XFA型表單轉換為最適化表單的直接方式。 任何現有的XFA規則都會保留在相關聯的最適化表單中。 產生的最適化表單支援XFA結構,例如驗證、事件、屬性和模式。 -
使用XML結構定義(XSD)或JSON結構
XML和JSON結構代表組織內的後端系統產生或使用資料的結構。 您可以將結構與適用性表單建立關聯,並使用其元素將動態內容新增至適用性表單。 製作最適化表單時,架構的元素將可用於內容瀏覽器的「資料模型物件」標籤。 -
無或不使用表單模型
使用此選項建立的最適化表單不使用任何表單模型。 從這種表單生成的資料XML具有帶有欄位和相應值的扁平結構。
如需建立最適化表單的詳細資訊,請參閱 建立最適化表單.
最適化表單編寫UI adaptive-form-authoring-ui
觸控最佳化UI是製作最適化表單的直覺式功能,並提供:
- 拖放功能
- 標準表單元件
- 整合的資產存放庫
建立新表單或編輯現有適用性表單時,您會使用下列UI元素:
答: 側欄 B. 頁面工具列 C. 適用性表單頁面
側欄 sidebar
側欄可讓您
-
請參閱表單內容,例如面板、元件、欄位和版面。
-
編輯元件屬性。
-
在AEM數位資產管理(DAM)存放庫中搜尋、檢視及使用資產。
-
在表單上新增元件。
答: 內容瀏覽器 B. 屬性瀏覽器 C. 資產瀏覽器 D. 元件瀏覽器
側欄包含下列瀏覽器:
-
內容瀏覽器
在內容瀏覽器中,您可以看到
-
表單物件
顯示表單的對象層次結構。 作者可在「表單物件樹」中點選該元素,以導覽至特定表單元件。 作者可以搜尋物件,並從此樹狀結構重新排列。
-
資料模型物件
可讓您查看表單模型階層。
它可讓您在最適化表單上拖放表單模型元素。 新增的元素會自動轉換為表單元件,同時保留其原始屬性。 表單使用XML結構、JSON結構或XDP範本時,您可以看到資料模型物件。
-
-
屬性瀏覽器
可讓您編輯元件的屬性。 屬性會根據元件而變更。 若要查看最適化表單容器的屬性:
選取元件,然後點選 > 適用性表單容器,然後點選 .
-
資產瀏覽器
隔離不同類型的內容,例如影像、檔案、頁面、電影等。
-
元件瀏覽器
包括可用來建立最適化表單的元件。 您可以將元件從拖曳至最適化表單上,以新增表單元素,並視需求設定新增的元素。 下表說明元件瀏覽器中列出的元件。
使用元件的最佳實務 best-practices
使用最適化表單元件時,應謹記的一些最佳實務和要點如下:
-
每個元件都具有控制其外觀和功能的關聯屬性。 若要設定元件的屬性,請點選元件並點選 在「屬性」瀏覽器中開啟元件屬性。
-
元件以其元素名稱來識別。 當您點選 ,您可以變更 元素名稱 屬性瀏覽器中的欄位值。 「元素名稱」欄位僅接受字母、數字、連字型大小(-)和底線(_)。 不允許使用其他特殊字元,元素名稱應以字母開頭。
-
只要表單上顯示標題,您就可以修改表單編輯器中內嵌的適用性表單元件的Title屬性,而不需開啟「屬性」瀏覽器。 若要這麼做:
- 點選以選取具有 標題 屬性及其 隱藏標題 屬性已停用。
- 點選 讓標題可編輯。
- 修改標題並點選「Return(返回)」鍵,或點選元件外部的任何位置以儲存變更。 點選Esc鍵以捨棄變更。
-
有些最適化表單元件(例如電子郵件和電話)包含現成可用的驗證模式。 不過,您可以更新 驗證模式 欄位(位於元件屬性中的「模式」設定追蹤器下)。 請參閱上表中的元件說明,以取得預設驗證的詳細資訊。
-
適用性表單欄位(例如數值方塊和電子郵件)可設定為包含專用的HTML5輸入類型。 當這些欄位集中在移動設備和平板電腦上時,鍵盤會在前面顯示通常用於輸入欄位資訊的特定字母、數字和字元。 它可幫助用戶快速輸入資訊,而無需在鍵盤上的字元集之間切換。 若要允許元件的專用輸入,請啟用 使用HTML類型編號 複選框。
-
您可以啟用文本框元件以接受RTF。 若要啟用文字方塊的RTF文字,請啟用 允許RTF文字 核取元件屬性中的方塊。
-
您可以啟用文本框、電子郵件和電話元件,從儲存在瀏覽器自動填充設定中的資訊自動填充名稱、地址、信用卡、電話和電子郵件等欄位的值。 若要啟用此功能,請選取 啟用自動填充 在元件屬性中,選取 自動填充屬性. 當使用者填入最適化表單時,系統會根據瀏覽器中的自動填入設定檔或使用者先前填入的值,建議使用這些值。 請注意,如果開啟了使用者瀏覽器中的自動填入設定,自動填入即可運作。
-
指定選項按鈕和
{value}={text}
格式。 -
預設情況下,檔案附件元件允許用戶僅附加一個檔案。 不過,您可以配置元件屬性以支援多個附件。 此外,如果用戶附加了多個檔案,且檔案名相同,則附件可能會造成一些問題。 因此,建議在提交表單時,為每個已提交的附件建立唯一識別碼。 若要這麼做:
- 在AEM Forms伺服器上,導覽至 Adobe Experience Manager >工具>操作> Web Console.
- 尋找和點選 適用性Forms Configuration Service.
- 在適用性Forms設定服務對話方塊中,啟用 使檔案名稱唯一. 預設為停用。
-
若要讓使用者能使用Safari瀏覽器附加PDF,請確定 application/pdf 已添加到「檔案附件」元件的「受支援的檔案類型」屬性中。 以舊版AEM Forms建立的適用性表單可包含 .pdf 而非 application/pdf 在「支援的檔案類型」屬性中。
如需適用性表單的更多最佳實務,請參閱 使用最適化表單的最佳實務.
頁面工具列 page-toolbar
頂端的頁面工具列提供可讓您預覽表單、變更表單屬性及編輯表單版面的選項。 您可以在製作表單時加以預覽,並據此進行變更。 在頁面工具列中,您會看到:
-
切換側面板 :讓您顯示或隱藏側欄。
-
頁面資訊 :可讓您檢視頁面屬性、發佈/取消發佈表單、啟動表單工作流程,以及在傳統UI中開啟表單。
-
模擬器 :可讓您針對不同的顯示大小(例如平板電腦和手機)模擬表單的外觀。
-
編輯:可讓您選取其他模式,例如: 編輯,樣式,開發人員, 和 設計.
-
編輯:可讓您編輯表單及其元件的屬性。 例如,新增元件、拖放影像並指定必填欄位。
-
樣式:可讓您設定表單元件外觀的樣式。 例如,在樣式模式中,您可以選取面板並指定其背景顏色。
-
開發人員:讓開發人員:
- 探索表單的組成。
- 對發生在何處和何時的情況進行除錯,進而有助於解決問題。
-
設計:可讓您啟用或停用自訂元件,或側邊欄中未列出的現成元件。
-
-
預覽:可讓您預覽表單發佈時的外觀。
元件工具列 component-toolbar
選取元件時,您會看到工具列可讓您使用它。 您可以獲得剪切、貼上、移動和指定元件屬性的選項。 您的選項為:
答:設定:當您點選 設定,元件屬性會顯示在側邊欄中。 設定這些屬性可讓您自訂資料擷取體驗。 您可以變更元件的元素名稱,在元件的「標題」欄位中指定標籤文字。 元素名稱可讓您擷取使用者使用元件輸入的值。 在元件屬性中,您可以指定元件的行為,並管理使用者輸入。 在側欄中設定屬性以擷取使用者資料,並用於進一步處理。 最適化表單容器的屬性可讓您指定用戶端程式庫、配置、主題、記錄檔案設定、儲存設定、提交設定和中繼資料設定。
B.複製:您可以使用複製選項來複製元件,並貼到表單中的其他位置。 貼上元件時,貼上的元件會獲得新的元素名稱,但會保留複製元件的屬性。
C.剪下:您可以使用剪切選項在最適化表單中將元件從一個位置移動到另一個位置。
D. 刪除:可讓您從表單中刪除元件。
E. 插入:可讓您在選取的元件上方插入元件。
F. 貼上:可讓您使用上述選項來貼上您剪下或複製的元件。
G. 編輯規則:可讓您開啟規則編輯器。 如需詳細資訊,請參閱 規則編輯器.
H. 群組:如果您想要剪下、複製或貼上多個元件,可讓您選取多個元件。
我。 父級:可讓您選取元件的父項。 例如,文字欄位位於區段中的子區段內,而子區段位於區段中。 區段位於指南根面板中,適用性表單容器是指南根面板的父級。 對於元件,您可以看到所有選項,層次由下而上。
例如,如果您點選 父級 若為文字方塊,您會看到:
- 子區段
- 章節
- guideRootPanel
- 適用性表單容器
J. 其他:提供更多選項以使用所選元件。
- 查看SOM表達式
- 將面板儲存為片段(僅適用於面板)
- 新增子面板(僅適用於面板)
- 新增面板工具列(僅適用於面板)
- 更換(不適用於面板)
適用性表單頁面 af-page
適用性表單頁面是實際表單。 就像任何其他以WCM為模型的WCM頁面 cq:Page
元件。 下圖顯示典型自適應表單的內容結構。
內容結構通常包含下列主要元件:
-
guideContainer:適用性表單的根,標示為 最適化表單開始 在適用性表單UI中。 在此元件中,您可以指定:
- 最適化表單的行動版面:定義行動裝置上表單的外觀。
- 感謝頁面:定義提交表單後,使用者被重新導向的頁面。
- 提交動作:定義當用戶提交表單後,如何在伺服器上處理表單。
- 樣式:指定用於自訂表單外觀的CSS檔案路徑。
-
rootPanel:最適化表單的根面板。 它可包含項目節點下的子面板。 每個面板(包括根面板)都可以有與其相關聯的版面。 面板的佈局指定如何佈置表單。 例如,在折疊式功能表版面*中,*其項目會排列為折疊式功能表步驟。
-
工具列:適用性表單容器具有與表單全域相關聯的全域工具列。 可使用 新增工具列 動作,可讓作者新增動作,例如提交、儲存、重設等。
-
資產:此節點包含用於表單編寫的其他資訊。 例如,表單模型詳細資訊、本地化詳細資訊等)。