表單產生器快速入門手冊 creating-an-adaptive-form

版本
文章連結
AEM 6.5
按一下這裡
AEM as a Cloud Service
本文章

AEM Forms的表單產生器可讓您建立吸引人、回應式、動態且最適化的表單。 無論您是建立專業表單的表單建立者,還是需要快速建立回應式表單,AEM Forms都能提供使用者易用的精靈。 精靈具有快速索引標籤導覽,可輕鬆選取預先設定的範本、樣式、欄位和提交選項。

建立最適化表單的精靈 {align="center" width="100%"}

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

  • 最適化表單核心元件:這些是標準化的資料擷取元件。這些元件會為您的數位註冊體驗提供自訂功能、縮短的開發時間,並降低維護成本。開發人員可以輕鬆地自訂這些元件和設計其樣式。您可以造訪 https://aemcomponents.dev/ 以檢視可用核心元件的實際運作 Adobe 建議使用這些現代且可擴展的元件來開發最適化表單

  • 最適化表單基礎元件:這些是經典 (舊) 的資料擷取元件。您可以繼續使用這些元件來編輯以現有基礎元件為主的最適化表單。如果您要建立新表單,Adobe 建議使用最適化表單核心元件以建立最適化表單

使用核心元件建立最適化表單 (建議)

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

  • 為您的環境啟用最適化Forms核心元件:當您建立方案時,最適化Forms核心元件已為您的環境啟用。 安裝最新的Far,為AEM Cloud Service環境啟用最適化Forms核心元件。 為您的環境啟用核心元件後,最適化表單 (核心元件) 範本和畫布主題就會新增到您的環境中。如果您的 AEM SDK 版本比 2023.02.0 更舊,請確定已prerelease在您的環境中啟用標幟,因為最適化表單核心元件是 2023.02.0 版本之前搶鮮版的一部分。

  • 最適化表單範本:此範本會提供基本結構並定義最適化表單的外觀 (版面和樣式)。其中具有包含特定屬性和內容結構的預先格式化元件。它也會提供定義主題和提交動作的選項。主題會定義外觀,而提交動作會定義提交最適化表單時要採取的動作。例如,將所收集的資料傳送到資料來源。雲端服務會提供一個名為 blank 的 OOTB 範本:

    • blank 範本會包含在每個新的 AEM Forms as a Cloud Service 程式中。
    • 您可以透過套件管理員安裝參考套件,將該 blank 範本新增到您的 AEM Forms as a Cloud Service 程式。
    • 您也可以從頭開始建立最適化Forms範本(核心元件)
  • 最適化表單主題:主題包含元件和面板的樣式詳細資料。樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。套用主題時,指定的樣式會反映在對應的元件上。Canvas 會包含在每個新的 AEM Forms as a Cloud Service 程式中。

  • 權限:將您的使用者新增到 forms-users 群組。forms-users 群組的成員擁有建立最適化表單的權限。如需表單特定之使用者群組的詳細清單,請參閱群組和權限

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

  1. 登入您的 Experience Manager Forms 作者執行個體;可以是 Cloud 執行個體或本機開發執行個體。

  2. 在 Experience Manager 登入頁面上輸入您的認證。登入後,在左上角選取「Adobe Experience Manager > 表單 > 表單與文件」。

  3. 選取「建立 > 最適化表單」。此時會開啟精靈。在「來源」標籤中,選取一個範本:

    核心元件範本 {align="center" width="100%"}

    選取範本時,會自動選取範本中指定的主題和提交動作,且「建立」按鈕已啟用。您可以前往「樣式」或「提交」標籤,選取不同的主題或提交動作。如果選取的範本並未指定主題,則「建立」按鈕將維持停用狀態。您可以前往「樣式」標籤以手動選取主題。

    note note
    NOTE
    如果您的環境中沒有​ 最適化表單 (核心元件) 範本,請為您的環境啟用最適化表單核心元件。為您的環境啟用核心元件後,最適化表單 (核心元件) 範本就會新增到您的環境中。
  4. 在「樣式」標籤中,選取一個主題:

    • 所選取的範本指定主題時,就會在精靈中自動選取該主題。您也可以從「樣式」標籤中選擇不同的主題。

    • 如果選取的範本未指定主題,您可以使用「樣式」標籤選擇主題。只有在選取主題之後,「建立」按鈕才會啟用。

  5. (選用) 在「資料」標籤中,選取一個資料模型:

    • 表單資料模型表單資料模型(FDM)可讓您將實體和服務從不同的資料來源整合到最適化表單。 如果您要建立的最適化表單涉及從多個資料來源擷取及寫入資料,請選擇表單資料模型(FDM)。

    • JSON 結構描述JSON 結構描述是我們以核心元件為主的最適化表單,透過提供與 JSON 結構描述建立關聯的能力 (代表要產生或使用的資料結構),可以與組織的後端系統緊密整合。這種關聯可讓作者使用結構描述的元素,動態地將內容新增到最適化表單。在編寫過程中,您可以在內容瀏覽器的資料模型物件標籤中輕鬆存取結構描述的元素,而且所有欄位都會自動新增到任何建立的調適型表單中。

    根據預設,系統會自動選取相關聯 JSON 結構描述的所有欄位,並轉換成對應的最適化表單元件,進而簡化編寫流程。該精靈提供額外的便利性,讓您透過核取方塊就能選擇性地選擇要在最適化表單中納入哪些欄位。

  6. 在「提交」標籤中,選取提交動作:

    • 您選取範本後,系統會自動選取範本中指定的提交動作。您可以從「提交」標籤選取不同的提交動作。「提交」標籤會顯示所有可用的提交動作。

    • 所選取的範本未指定提交動作時,您可以使用「提交」標籤選取提交動作

  7. (選用) 在「傳遞」標籤中,您可以為最適化表單指定發佈或取消發佈日期。

  8. 選擇 建立。此時會顯示一個對話框,以指定標題、名稱和儲存最適化表單的位置:

    • 標題: ​指定表單的顯示名稱。標題有助於在 Experience Manager Forms 使用者介面中識別表單。
    • 名稱: ​指定表單的名稱。存放庫中會建立具有指定名稱的節點。您開始輸入標題時,就會自動產生名稱欄位的值。您可以變更建議的值。名稱欄位只能包含字母數字字元、連字號和底線。所有無效的輸入都會以連字號取代。
    • 路徑: ​指定最適化表單的儲存位置。您可以將最適化表單直接儲存在 /content/dam/formsanddocuments,或建立一個資料夾 (例如 /content/dam/formsanddocuments/adaptiveforms) 以儲存最適化表單。要使用路徑中的資料夾之前,請務必先建立該資料夾。「路徑」欄位不會自動建立資料夾。
  9. 選擇 建立。此時已建立最適化表單,並在最適化表單編輯器中開啟。編輯器會顯示範本中可用的內容。根據最適化表單的型別,相關 JSON結構描述或表單資料模型(FDM)中存在的表單元素會顯示在側邊欄中​ 內容瀏覽器 ​的​ 資料模型物件 ​索引標籤中。

現在,您可以拖放最適化表單核心元件或結構描述元素,以建置您的最適化表單。

編輯最適化表單的表單模型屬性 edit-form-model-core-components-based-adaptive-forms

  1. 選取最適化表單,然後選取 頁面資訊 > 開啟屬性。 此時會開啟「表單屬性」頁面。

  2. 前往「表單模型」標籤並選擇表單模型。如果最適化表單沒有表單模型,您可以自由選擇JSON結構描述或表單資料模型(FDM)。 另一方面,如果最適化表單已經是以表單模型為主,您可以選擇切換到相同類型的另一個表單模型。例如,如果表單使用JSON架構,您可以輕鬆切換至其他JSON架構,同樣如果表單使用表單資料模型(FDM),您可以切換至其他表單資料模型(FDM)。

  3. 選取​ 儲存 ​以儲存屬性。

使用基礎元件建立最適化表單

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

  • 權限:將您的使用者新增到 forms-users,以便為他們提供建立最適化表單的權限。如需表單特定之使用者群組的詳細清單,請參閱群組和權限

  • 最適化表單主題:主題包含元件和面板的樣式詳細資料。樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。套用主題時,指定的樣式會反映在對應的元件上。您可以建立主題匯入現有主題。 您也可以針對一些範例主題部署最新的原型版本

  • 最適化表單範本:此範本會提供基本結構並定義最適化表單的外觀 (版面和樣式)。其中具有包含特定屬性和內容結構的預先格式化元件。它也會提供定義主題和提交動作的選項。主題會定義外觀,而提交動作會定義提交最適化表單時要採取的動作。例如,將所收集的資料傳送到資料來源。雲端服務支援兩種類型的範本:

    • 可編輯的範本:您可以建立匯入現有的可編輯的範本。 您也可以部署最新的原型版本以取得一些可編輯範本範例。

    • 靜態範本:這些是舊範本,建議僅用於從 Adobe Managed Services (AMS) 和內部部署 AEM Forms 安裝 (AEM 6.5 Forms 或更早版本) 移轉的客戶。這些範本可讓您繼續使用對靜態範本的現有投資。建立最適化表單時,請使用可編輯的範本。

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

  1. 存取 Experience Manager Forms 作者執行個體;可以是 Cloud 執行個體或本機開發執行個體。

  2. 在 Experience Manager 登入頁面上輸入您的認證。

    登入後,在左上角選取「Adobe Experience Manager > 表單 > 表單與文件」。

  3. 選取「建立 > 自適應表單」。此時會開啟精靈。

  4. 在「來源」標籤中,選取一個範本:

    • 選取可編輯範本時,系統會自動選取範本中指定的主題和提交動作,且「建立」按鈕已啟用。您可以前往「樣式」或「提交」標籤,選取不同的主題或提交動作。如果選取的可編輯範本並未指定主題,則「建立」按鈕將維持停用狀態。您可以前往「樣式」標籤以手動選取主題。

      note note
      NOTE
      您也可以使用最適化表單編輯器建立「記錄文件」範本。如需更多資訊,請參閱最適化表單編輯器中的記錄文件支援
    • 選取靜態範本時,無法使用資料、樣式、提交、傳遞和預覽選項。建立最適化表單時,建議使用可編輯的範本。

  5. 在「樣式」標籤中,選取一個主題:

    • 所選取的範本指定主題時,就會在精靈中自動選取該主題。您也可以從「樣式」標籤中選擇不同的主題。
    • 如果選取的範本未指定主題,您可以使用「樣式」標籤選擇主題。只有在選取主題之後,「建立」按鈕才會啟用。
  6. (選用) 在「資料」標籤中,選取一個資料模型:

    • 表單資料模型表單資料模型(FDM)可讓您將實體和服務從不同的資料來源整合到最適化表單。 如果您要建立的最適化表單涉及從多個資料來源擷取及寫入資料,請選擇表單資料模型(FDM)。

    • JSON 結構描述JSON 結構描述代表組織內後端系統產生或使用之資料的結構。您可以將結構描述與最適化表單建立關聯,並使用其元素將動態內容新增到最適化表單。編寫Adaptive Forms時,可在內容瀏覽器的「資料模型物件」索引標籤中使用結構描述的元素,所有欄位也會新增到已建立的Adaptive Form。

    系統預設會選取資料模型的所有欄位。建立最適化表單時,所有選取的資料模型欄位都會轉換成對應的最適化表單元件。精靈會為您提供核取方塊,以便您只選取要在最適化表單中包含哪些欄位。

  7. 在「提交」標籤中,選取提交動作:

    • 您選取範本後,系統會自動選取範本中指定的提交動作。您可以從「提交」標籤選取不同的提交動作。「提交」標籤會顯示所有可用的提交動作。

    • 所選取的範本未指定提交動作時,您可以使用「提交」標籤選取提交動作

  8. (選用) 在「傳遞」標籤中,您可以為最適化表單指定發佈或取消發佈日期。

  9. 選擇 建立。此時會顯示一個對話框,以指定標題、名稱和儲存最適化表單的位置:

    • 標題: ​指定表單的顯示名稱。標題有助於在 Experience Manager Forms 使用者介面中識別表單。
    • 名稱: ​指定表單的名稱。存放庫中會建立具有指定名稱的節點。您開始輸入標題時,就會自動產生名稱欄位的值。您可以變更建議的值。名稱欄位只能包含字母數字字元、連字號和底線。所有無效的輸入都會以連字號取代。
    • 路徑: ​指定最適化表單的儲存位置。您可以將最適化表單直接儲存在 /content/dam/formsanddocuments,或建立一個資料夾 (例如 /content/dam/formsanddocuments/adaptiveforms) 以儲存最適化表單。要使用路徑中的資料夾之前,請務必先建立該資料夾。「路徑:」欄位不會自動建立資料夾。
  10. 選擇 建立。此時已建立最適化表單,並在最適化表單編輯器中開啟。編輯器會顯示範本中可用的內容,它也會顯示側邊欄,以根據需求自訂建立的表單。

    根據最適化表單的型別,相關 JSON結構描述或表單資料模型(FDM)中存在的表單元素會顯示在側邊欄中​ 內容瀏覽器 ​的​ 資料模型物件 ​索引標籤中。 您也可以拖放這些元素以建置自己的最適化表單。

編輯最適化表單的表單模型屬性 edit-form-model-foundation-components

您可以變更最適化表單(JSON式或表單資料模型(FDM))的表單模型。 您無法從一種表單模型變更為另一種表單模型。

  1. 選取最適化表單並選取​ 屬性 ​圖示。

  2. 開啟「表單模型」標籤,並執行以下其中一項操作。

    • 如果最適化表單沒有表單模型,您可以選擇其他表單模型,並相應地選擇 XML或JSON結構描述或表單資料模型(FDM)。
    • 如果最適化表單是以表單模型為基礎,您可以為相同表單模型選擇其他 XML或JSON結構描述,或表單資料模型(FDM)。
  3. 選取​ 儲存 ​以儲存屬性。

您也可以從最適化表單產生器或最適化表單範本產生器修改表單模型屬性。

  1. 選取「最適化表單容器 (根)」元件。

  2. 按一下 設定圖示 圖示以開啟最適化表單容器的「屬性」。

  3. 選取「資料模型」標籤,並執行以下其中一項操作:

    • 如果最適化表單沒有表單模型,您可以選擇表單模型,並相應地選擇 XML或JSON結構描述或表單資料模型(FDM)。
    • 如果最適化表單是以表單模型為主,則無法變更表單模型。您可以為適用的相同表單模型選擇其他 XML或JSON結構描述,或表單資料模型(FDM)。
  4. 選取 儲存 以儲存屬性。

FDM-Schema-Support {align="center" width="100%"}

note note
NOTE
您也可以將最適化表單另存為範本。如需更多資訊,請參閱使用最適化表單建立範本

後續步驟

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab