製作調適型表單簡介 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元素:
A. 側欄 B. 頁面工具列 C. 最適化表單頁面
側邊欄 sidebar
此側邊欄可讓您
- 查看表單內容,例如面板、元件、欄位和版面。
- 編輯元件屬性。
- 搜尋、檢視和使用 AEM 數位資產管理 (DAM) 存放庫中的資產。
- 在表單上新增元件。
A. 內容瀏覽器 B. 屬性瀏覽器 C. 資產瀏覽器 D. 元件瀏覽器
側邊欄包含以下瀏覽器:
-
內容瀏覽器
在內容瀏覽器中,您可以看到-
表單物件
顯示表單的物件階層。作者可以點選表單物件樹中的元素來瀏覽至該元素。作者可以從此物件樹來搜尋物件並重新排列物件。 -
資料模型物件
讓您查看表單模型階層。
它可讓您將表單模型元素拖放到最適化表單上。 新增的元素會自動轉換為表單元件,同時保留其原始屬性。當表單使用 XML 結構描述、JSON 結構描述或 XDP 範本時,您可以看到資料模型物件。
-
-
屬性瀏覽器
可讓您編輯元件的屬性。屬性會根據元件改變。若要檢視最適化表單容器的屬性:
選取元件,然後選取 > 最適化表單容器,然後選取 。
-
資產瀏覽器
區隔不同類型的內容,例如影像、文件、頁面、電影等。
-
元件瀏覽器
包含可用來建置最適化表單的元件。 您可以將元件從拖曳到最適化表單上以新增表單元素,並依需求設定新增的元素。 下表描述元件瀏覽器中列出的元件。
使用元件的最佳作法 best-practices
使用最適化表單元件時應記住的一些最佳實務和要點如下:
-
每個元件都有相關的屬性,這些屬性控制其外觀和功能。 若要設定元件的屬性,請選取元件,然後選取 ,以在[屬性]瀏覽器中開啟元件屬性。
-
以元件的元素名稱來識別元件。 選取 時,您可以變更屬性瀏覽器中的 元素名稱 欄位值來變更元件名稱。 「元素名稱」欄位僅接受字母、數字、連字型大小(-)和底線(_)。 不允許使用其他特殊字元,元素名稱應以字母開頭。
-
只要可在表單上看到標題,您就可以修改內嵌在表單編輯器中的最適化表單元件的Title屬性,而無需開啟Properties瀏覽器。 若要這麼做:
-
選取以選取具有 Title 屬性且其 隱藏標題 屬性已停用的元件。
-
選取 讓標題可編輯。
-
修改標題並選取Return鍵,或選取元件之外的任意位置以儲存變更。 選取Esc鍵以捨棄變更。
-
-
有些最適化表單元件(如電子郵件和電話)包含現成可用的驗證模式。 不過,您可以更新元件屬性中「模式」摺疊式功能表下的 驗證模式 欄位,以指定自訂驗證。 請參閱上表中的元件說明,以取得預設驗證的詳細資訊。
-
最適化表單欄位(例如數值方塊和電子郵件)可設定為包含專門的HTML5輸入型別。 當這些欄位成為行動裝置和平板電腦上的焦點時,鍵盤會預先顯示特定字母、數字和字元,這些通常是用來在欄位中輸入資訊。 它可協助使用者快速輸入資訊,而不需在鍵盤上的字元組之間切換。 若要允許專門輸入元件,請啟用其元件屬性中的 使用HTML型別編號 核取方塊。
-
您可以啟用文字方塊元件來接受富文字。若要啟用文字方塊的RTF文字,請啟用元件屬性中的 允許RTF文字 核取方塊。
-
您可以啟用「文字方塊」、「電子郵件」和「電話」元件,以自動填寫名稱、地址、信用卡、電話和電子郵件等欄位值,這些值來自瀏覽器自動填寫設定中儲存的資訊。 若要啟用此功能,請在元件屬性中選取 啟用Autofill,然後選取 Autofill屬性。 當使用者填寫最適化表單時,會根據瀏覽器中自動填寫設定檔的值或使用者先前填寫的值來建議值。 請注意,如果開啟使用者瀏覽器中的自動填寫設定,自動填寫即可運作。
-
在元件屬性中以
{value}={text}
格式指定選項按鈕和核取方塊專案的值。 -
依預設,檔案附件元件只允許使用者附加一個檔案。 不過,您可以設定元件屬性以支援多個附件。 此外,如果使用者使用相同的檔案名稱附加多個檔案,則附件可能會導致一些問題。 因此,建議您在提交表單時,為每個已提交的附件建立唯一識別碼的關聯。 若要這麼做:
- 在您的AEM Forms伺服器上,瀏覽至 Adobe Experience Manager > 工具 > 作業 > 網頁主控台。
- 尋找並選取 最適化Forms組態服務。
- 在「最適化Forms組態服務」對話方塊中,啟用 將檔案名稱設為唯一。 預設為停用。
-
若要讓使用者能夠使用Safari瀏覽器附加PDF,請確定 application/pdf 已新增至「檔案」附件元件的「支援的檔案型別」屬性。 以舊版AEM Forms建立的最適化表單在「支援的檔案型別」屬性中可能包含 .pdf,而非 application/pdf。
如需最適化表單的更多最佳實務,請參閱使用最適化表單的最佳實務。
頁面工具列 page-toolbar
頂端的頁面工具列提供了一些選項,可讓您預覽表單、變更表單屬性和編輯表單版面。您可以在編寫表單時預覽表單,並進行相應的變更。在頁面工具列中,您會看到:
-
切換側面板 :讓您顯示或隱藏側邊欄。
-
頁面資訊 :可讓您檢視頁面屬性、發佈/取消發佈表單、啟動表單工作流程以及在傳流 UI 中開啟表單。
-
模擬器 :允許您模擬在不同顯示尺寸 (例如平板電腦和手機) 的表單外觀。
-
編輯:讓您選取其他模式,例如:編輯、樣式、開發人員 和 設計。
-
編輯:可讓您編輯表單及其元件的屬性。例如,新增元件、放置影像以及指定必填欄位。
-
樣式:可讓您設定表單元件的外觀樣式。例如,在樣式模式下,您可以選取面板並指定其背景顏色。
-
開發人員:讓開發人員能夠:
- 了解表單的組成。
- 找出狀況及其發生的時間和位置,這反過來有助於解決問題。
-
設計。可讓您啟用或停用自訂元件或側邊欄未列出的立即可用元件。
-
-
預覽:可讓您預覽表單發佈時的外觀。
元件工具列 component-toolbar
當您選取元件時,會出現工具列,可讓您對其操作。您可以選擇剪下、貼上、移動和指定元件屬性。您的選項有:
A.設定:當您選取 設定 時,元件屬性會顯示在側邊欄中。 設定這些屬性可讓您自訂資料擷取體驗。您可以變更元件的元素名稱,在元件的標題欄位中指定標籤文字。元素名稱可讓您擷取使用者使用元件輸入的值。在元件屬性中,您可以指定元件的行為並管理使用者輸入。在側邊欄中設定屬性以擷取使用者資料並將其用於進一步處理。最適化表單容器的屬性可讓您指定使用者端資料庫、版面、主題、記錄檔案設定、儲存設定、提交設定和中繼資料設定。
B. 複製:您可以使用複製選項複製元件並將其貼在表單中的其他位置。當您貼上元件時,貼上的元件會獲得新的元素名稱,但保留被複製元件的屬性。
C.剪下:您可以使用剪下選項,在調適型表單中將元件從一個位置移動到另一個位置。
D. 刪除:可讓您從表單中刪除元件。
E. 插入:可讓您在所選元件上方插入元件。
F. 貼上:可讓您貼上您使用上述選項所剪下或複製的元件。
G. 編輯規則:可讓您開啟規則編輯器。如需詳細資訊,請參閱規則編輯器。
H. 群組:如果您想要一起剪下、複製或貼上多個元件,可讓您選取多個元件。
I. 父系:可讓您選取元件的父系。例如,文字欄位在子區段中,子區段位於區段中。區段位於參考線根面板中,而最適化表單容器是參考線根面板的父項。 對於元件,您可以看到所有選項,採自下而上排序的階層結構。
例如,如果您選取文字方塊的 Parent,您會看到:
- 子區段
- 區段
- guideRootPanel
- 最適化表單容器
J. 其他:提供更多選項搭配所選元件使用。
- 檢視 SOM 運算式
- 將面板另存為片段 (僅適用於面板)
- 新增子面板 (僅適用於面板)
- 新增面板工具列 (僅適用於面板)
- 更換 (不適用於面板)
最適化表單頁面 af-page
最適化表單頁面是實際表單。 它就像任何其他建模為 WCM cq:Page
元件的 WCM 頁面一樣。下圖顯示典型最適化表單的內容結構。
內容結構通常包含以下主要元件:
-
guideContainer:最適化表單的根目錄,在最適化表單UI中標示為 最適化表單的開頭。 在此元件中,您可以指定:
- 最適化表單的行動佈局:定義行動裝置上的表單外觀。
- 感謝頁面:定義使用者提交表單後被重新導向的頁面。
- 提交動作:定義使用者提交表單後伺務器如何處理表單。
- 設定樣式:指定用於自訂表單外觀的 CSS 檔案路徑。
-
rootPanel: 最適化表單的根面板。 它可以在項目節點下包含子面板。每個面板 (包含根面板) 都可以有相關聯的版面。面板的版面決定了表單的佈局方式。例如,在摺疊式版面中,其項目是以摺疊式步驟加以佈局。
-
工具列: 最適化表單容器具有相關的全域工具列,此工具列是表單的全域。 可以使用編輯列中的 新增工具列 動作來新增此工具列,如此作者可新增動作,例如提交、儲存、重設等。
-
資產: 此節點包含其他資訊用於編寫表單。例如,表單模型詳細資料、本地化詳細資料等)。