文件AEM 6.5使用手冊

建立自訂最適化表單範本 creating-a-custom-adaptive-form-template

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

建立對象：

  • 使用者
  • 開發人員
NOTE
AEM Forms匯入了動態範本。 您可以使用AEM Sites範本編輯器建立或編輯動態範本。 下文中提及的範本為靜態範本。 預設安裝中無法使用這些選項。 安裝相容性套件以在您的環境中取得這些範本。

先決條件 prerequisites

自適應表單範本 adaptive-form-template

調適型表單範本是專用的AEM頁面範本，具有用來建立調適型表單的特定屬性和內容結構。 範本有預先設定的版面、樣式和基本初始內容結構。

建立表單後，對原始範本內容結構所做的任何變更都不會反映在表單中。

預設最適化表單範本 default-adaptive-form-templates

AEM QuickStart提供下列最適化表單範本：

  • 調查範本：可讓您使用已設定多個欄的回應式版面，建立單頁最適化表單。 版面會根據您要顯示表單的各種熒幕的尺寸自動調整。
  • Simple Enrollment範本：可讓您使用精靈版面配置建立多步驟最適化表單。 在此配置中，您可以為每個步驟指定步驟完成運算式，在精靈進行下一步之前會驗證此運算式。
  • 索引標籤註冊範本：可讓您使用索引標籤左側的版面配置建立多索引標籤的最適化表單，您可以在此以任意順序造訪索引標籤。
  • 進階註冊範本：可讓您建立包含多個索引標籤和精靈的表單。 它使用索引標籤在左側的版面，可讓您依任何順序造訪索引標籤。 它使用Adobe Document Cloud設計服務來簽署和驗證。
  • 空白範本：可讓您建立不含任何頁首、頁尾和初始內容的表單。 您可以新增元件，例如文字方塊、按鈕和影像。 空白範本可讓您建立可內嵌於AEM網站頁面的表單。

這些範本已將sling:resourceType屬性設定為對應的頁面元件。 頁面元件會轉譯CQ頁面（包含調適型表單容器），接著轉譯調適型表單。

下表列舉範本與頁面元件之間的關聯：

範本
頁面元件
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedenrollment

使用範本編輯器建立最適化表單範本 creating-an-adaptive-form-template-using-template-editor

您可以使用範本編輯器來指定最適化表單的結構和初始內容。 例如，您希望所有表格作者在登錄檔格中都有幾個文字方塊、導覽按鈕和提交按鈕。 您可以建立範本，供作者用來建立與其他登錄檔單一致的表單。 AEM範本編輯器可讓您：

  • 在結構圖層中新增表單的頁首與頁尾元件
  • 提供表單的初始內容。
  • 指定主題。
  • 指定提交、重設和導覽等動作。

如需詳細資訊，請參閱範本編輯器。

從CRXDE建立最適化表單範本 creating-an-adaptive-form-template-from-crxde

您可以建立範本並使用它來建立調適型表單，而不使用可用的範本。 自訂範本以參照最適化表單容器和頁面元素（例如頁首和頁尾）的各種頁面元件為基礎。

您可以使用網站的基底頁面元件來建立這些元件。 或者，您也可以擴充現成範本使用的最適化表單的頁面元件。

執行以下步驟來建立自訂範本，例如simpleEnrollmentTemplate。

  1. 導覽至您編寫執行個體上的CRXDE Lite。

  2. 在/apps目錄下，為您的應用程式建立資料夾結構。 例如，如果應用程式名稱為mycompany，請建立具有此名稱的資料夾。 通常，應用程式資料夾包含元件、組態、範本、src和安裝目錄。 在此範例中，請建立元件、組態和範本資料夾。

  3. 導覽至資料夾/libs/fd/af/templates。

  4. 複製simpleEnrollmentTemplate節點。

  5. 導覽至資料夾/apps/mycompany/templates。 用滑鼠右鍵按一下並選取​ 貼上。

  6. 如有必要，請重新命名您所複製的範本節點。 例如，將其重新命名為註冊範本。

  7. 導覽至/apps/mycompany/templates/enrollment-template位置。

  8. 修改jcr:content節點的jcr:title和jcr:description屬性，以區分範本和您複製的範本。

  9. 修改範本的jcr:content節點包含guideContainer和guideformtitle元件。 guideContainer是儲存最適化表單的容器。 guideformtitle元件會顯示應用程式名稱、說明等。

    您可以包含自訂元件或parsys元件，而非guideformtitle。 例如，移除guideformtitle，然後新增自訂元件或parsys元件節點。 請確定元件的sling:resourceType屬性參考元件，且已在頁面component.jsp檔案中定義相同的元件。

  10. 導覽至/apps/mycompany/templates/enrollment-template/jcr：content位置。

  11. 開啟​ 屬性 ​標籤，並將cq:designPath屬性的值變更為/etc/designs/mycompany。

  12. 現在為cq:Page型別建立/etc/designs/mycompany節點。

建立最適化表單頁面元件 create-an-adaptive-form-page-component

自訂範本的樣式與預設範本相同，因為範本會參考頁面元件/libs/fd/af/components/page/base。 您可以在節點/apps/mycompany/templates/enrollment-template/jcr：content中找到定義為屬性sling:resourceType的元件參考。 由於基礎是核心產品元件，請勿修改此元件。

  1. 導覽至節點/apps/mycompany/templates/enrollment-template/jcr：content，並將屬性sling:resourceType的值修改為/apps/mycompany/components/page/enrollmentpage

  2. 將節點/libs/fd/af/components/page/base複製到資料夾/apps/mycompany/components/page。

  3. 將複製的元件重新命名為enrollmentpage。

  4. （只有當您已經有contentpage時） ​如果您的網站已有contentpage元件，請執行下列步驟(a-d)。 如果您的網站沒有現有的contentpage元件，您可以保留resourceSuperType屬性以指向現成可用的基本頁面。

    1. 針對enrollmentpage節點，將屬性sling:resourceSuperType的值設為mycompany/components/page/contentpage。 contentpage元件是您網站的基礎頁面元件。 其他頁面元件可加以擴充。 移除enrollmentpage底下的指令碼檔案，head.jsp、content.jsp和library.jsp除外。 sling:resourceSuperType元件（在此例中為contentpage）包含所有此類指令碼。 標題（包括導覽列和頁尾）繼承自contentpage元件。

    2. 開啟檔案head.jsp。

      JSP檔案包含第<cq.include script="library.jsp"/>行。

      library.jsp檔案包含guide.theme.simpleEnrollment使用者端資料庫，其中包含最適化表單的樣式。

      頁面元件enrollmentpage有一個獨佔的head.jsp檔案，它覆寫了contentpage元件的head.jsp檔案。

    3. 在contentpage元件的head.jsp檔案中包含enrollmentpage元件的head.jsp檔案中的所有指令碼。

    4. 在content.jsp指令碼中，您可以新增其他頁面內容或參考至頁面轉譯時包含的其他元件。 例如，如果您新增自訂元件applicationformheader，請確定您在JSP檔案中新增以下元件參考：

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      同樣地，如果您在範本節點結構中新增parsys元件，也要包含自訂元件。

建立最適化表單使用者端程式庫 creating-an-adaptive-form-client-library

新範本之enrollmentpage元件的head.jsp檔案包含使用者端程式庫guide.theme.simpleEnrollment。 預設範本也使用此使用者端程式庫。 使用以下方法之一變更新範本中的樣式：

  • 定義自訂主題，並將預設主題guide.theme.simpleEnrollment取代為自訂主題。
  • 在/etc/designs/mycompany下定義新的使用者端程式庫。 在jsp頁面中的預設主題專案之後包含從屬端程式庫。 在此使用者端資料庫中包含所有覆寫樣式和其他Java指令碼檔案。
NOTE
主題是指包含在用於呈現最適化表單的頁面元件中的使用者端資料庫。 使用者端資料庫主要控管最適化表單的外觀。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2