建立以核心元件為基礎的最適化Forms creating-an-adaptive-form-core-components

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

主題：

建立對象：

管理員
開發人員

Adobe 建議使用核心元件將最適化表單新增到 AEM Sites 頁面或建立獨立的最適化表單。

版本

文章連結

AEM as a Cloud Service

按一下這裡

AEM 6.5

本文

最適化表單可讓您建立吸引人、回應式、動態且最適化的表單。AEM Forms提供方便企業使用者使用的UI，以便快速建立最適化Forms。 UI提供快速索引標籤導覽，以便輕鬆選取用於建立最適化表單的預先設定的範本、樣式、欄位和提交選項。

開始之前，請先了解您可以使用的表單元件類型：

最適化表單核心元件：這些是標準化的資料擷取元件。這些元件會為您的數位註冊體驗提供自訂功能、縮短的開發時間，並降低維護成本。開發人員可以輕鬆地自訂這些元件和設計其樣式。Adobe建議使用這些現代且可擴展的元件來開發最適化Forms。
最適化表單基礎元件：這些是經典 (舊) 的資料擷取元件。您可以繼續使用這些元件來編輯以現有基礎元件為主的最適化表單。如果您正在建立表單，Adobe建議使用最適化Forms核心元件來建立最適化Forms。

必要條件

您必須符合以下條件才能建立最適化表單：

為您的環境啟用最適化Forms核心元件：需要AEM Archetype專案版本41或更新版本，才能為您的環境啟用核心元件。為您的環境啟用核心元件時，最適化Forms （核心元件） 範本和畫布主題會新增到您的環境中。

最適化表單範本：此範本會提供基本結構並定義最適化表單的外觀 (版面和樣式)。其中具有包含特定屬性和內容結構的預先格式化元件。它也會提供定義主題和提交動作的選項。主題會定義外觀，而提交動作會定義提交最適化表單時要採取的動作。您也可以將範例範本部署至您的環境。這些功能可協助您快速建立表格。

note note
NOTE
如果您的環境中沒有最適化表單 (核心元件) 範本，請為您的環境啟用最適化表單核心元件。為您的環境啟用核心元件後，最適化表單 (核心元件) 範本就會新增到您的環境中。

最適化表單主題：主題包含元件和面板的樣式詳細資料。樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。套用主題時，指定的樣式會反映在對應的元件上。當您啟用環境的核心元件時，Canvas主題會預設新增。您可以下載及自訂標準佈景主題。針對 現成可用的佈景主題，您可以將範例佈景主題部署至您的環境。這些可幫助您開始設計表單的樣式，並提供基礎結構，以根據您的業務需求建立或自訂主題。
權限：將您的使用者新增到 forms-users 群組。forms-users 群組的成員擁有建立最適化表單的權限。如需表單特定之使用者群組的詳細清單，請參閱群組和權限。

建立最適化表單 create-an-adaptive-form

登入您的本機AEM作者執行個體。
在 Experience Manager 登入頁面上輸入您的認證。登入後，在左上角選取 Adobe Experience Manager > Forms > Forms和檔案。
選取建立 > 建立最適化Forms。
選取最適化Forms核心元件範本，然後按一下「下一步」。
新增屬性 出現。指定下列屬性欄位的值。「標題」和「名稱」欄位為必填欄位：
- 標題： 指定表單的顯示名稱。標題有助於在 Experience Manager Forms 使用者介面中識別表單。
- 名稱： 指定表單的名稱。存放庫中會建立具有指定名稱的節點。您開始輸入標題時，就會自動產生名稱欄位的值。您可以變更建議的值。名稱欄位只能包含英數字元、連字型大小和底線。
- 描述： 指定表單的詳細資訊。
- 主題使用者端資料庫： 指定最適化表單的主題。依預設，已選取adaptiveform.theme.canvas3主題。您也可以從 主題使用者端資料庫 下拉式功能表中選擇不同的主題。
- 組態容器： 定義最適化Forms組態檔的儲存位置。這些組態檔包含與Adaptive Forms的行為和外觀相關的設定和屬性。
- 標籤： 指定可唯一識別最適化表單的標籤。標籤有助於搜尋表單。若要建立標籤，請在標籤方塊中輸入新標簽名稱。
選擇建立。系統隨即建立最適化表單，並顯示對話方塊以開啟表單進行編輯。
選取編輯以在新索引標籤中開啟新建立的表單。表單會開啟以進行編輯，並顯示範本中可用的內容。它也會顯示側邊欄以自訂新建立的表單。

使用最適化Forms核心元件來建立您的表單

開啟表單進行編輯後，您可以使用可用的Adaptive Forms核心元件來將表單欄位新增至表單。您可以拖放或使用+ [插入元件]選項，將這些元件新增至表單。請參閱AEM核心元件檔案，瞭解可用的最適化Forms核心元件。您也可以造訪https://aemcomponents.dev/，檢視作用中的可用核心元件。

為最適化表單設定提交動作 configure-submit-action-for-form

提交動作可讓您選擇透過最適化表單擷取的資料目的地。當使用者按一下最適化表單上的提交按鈕時會觸發。調適型表單包含一些立即可用的提交動作。您也可以擴充預設提交動作，以建立自己的自訂提交動作。若要設定表單的提交動作：

開啟內容瀏覽器，然後選取最適化表單的「指引容器」元件。
按一下「指引容器」屬性圖示。此時會開啟「最適化表單容器」對話框。
按一下「提交」標籤。
根據您的要求選取和設定「提交動作」。如需提交動作的詳細資訊，請參閱最適化表單提交動作

將使用者重新導向至頁面，或在提交表單時顯示感謝訊息

在提交表單時，您可以將使用者重新導向至其他網頁或訊息。若要重新導向使用者或設定感謝訊息：

開啟內容瀏覽器，然後選取最適化表單的「指引容器」元件。
按一下「指引容器」屬性圖示。此時會開啟「最適化表單容器」對話框。
開啟提交標籤。
- 若要設定重新導向URL，請在[送出]選項中選取 重新導向至URL 選項，然後瀏覽並選取AEM Sites頁面，或提供外部頁面的URL。
- 若要設定自訂或感謝訊息，請在[送出]選項中選取 顯示訊息 選項，並在 訊息內容 方塊中提供訊息。它是RTF文字方塊，您可以使用全熒幕選項來檢視所有可用的RTF專案。

為最適化表單設定結構描述或表單資料模型 configure-schema-or-data-model-for-form

您可以使用表單資料模型將表單連線至資料Source，以根據使用者動作傳送及接收資料。您也可以將表單連線至JSON結構描述，以預先定義的格式接收提交的資料。根據需求，將您的表單連結至JSON結構描述或表單資料模型：

為您的表單設定JSON結構描述或表單資料模型

若要設定表單的JSON結構描述或表單資料模型：

開啟內容瀏覽器，然後選取最適化表單的「指引容器」元件。
按一下「指引容器」屬性圖示。此時會開啟「最適化表單容器」對話框。
開啟 資料模型 標籤。
根據您的要求，選取並設定JSON結構描述或表單資料模型：
- 當您選取 表單模型 選項時，請使用 選取表單資料模型 選項來選取預先設定的表單資料模型。
- 當您選取 結構描述 選項時，請使用 結構描述 選項為您的表單選取JSON結構描述。
按一下 「完成」。