建立自定義最適化表單模板

必備條件

瞭解AEM 頁面範本和最適化表單製作
瞭解AEM 用戶端程式庫

最適化表單範本

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

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

預設自適應表單模板

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

基本：可讓您使用左側標籤的版面建立多標籤可調式表單，您可以在其中以任何隨機順序瀏覽標籤。
Adobe Sign的基本功能：可讓您建立包含多個標籤和精靈的表單。它使用左側標籤的版面配置，可讓您依任何順序瀏覽標籤。它使用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

使用模板編輯器建立自適應表單模板

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

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

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

從CRXDE建立自適應表單模板

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

您可以使用網站的基本頁面元件來建立這些元件。或者，您也可以將範本使用的最適化表單的頁面元件延伸出方塊。

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

導覽至您編寫執行個體上的CRXDE Lite。
在/apps目錄下，建立應用程式的檔案夾結構。例如，如果應用程式名稱為mycompany，請建立具有此名稱的檔案夾。通常，應用程式資料夾包含元件、配置、模板、src和安裝目錄。在此示例中，建立元件、配置和模板資料夾。
導覽至資料夾/libs/fd/af/templates。
複製simpleEnrollmentTemplate節點。
導覽至資料夾/apps/mycompany/templates。按一下右鍵它並選擇貼上。
如有必要，請更名您複製的模板節點。例如，將其重新命名為enrollment-template。
導覽至位置/apps/mycompany/templates/enrollment-template。
修改jcr:content節點的jcr:title和jcr:description屬性，以區分模板與您複製的模板。
已修改模板的jcr:content節點包含guideContainer和guideformtitle元件。 guideContainer 是容納最適化表單的容器。guideformtitle元件顯示應用程式名稱、說明等。

您可以包含自訂元件或parsys元件，而非guideformtitle。例如，移除guideformtitle，並新增自訂元件或parsys元件節點。請確定元件的sling:resourceType屬性引用元件，並且該屬性在頁面component.jsp檔案中定義。
導覽至/apps/mycompany/templates/enrollment-template/jcr:content位置。
開啟「屬性」標籤，將cq:designPath屬性的值變更為/etc/designs/mycompany。
現在，請為cq:Page類型建立/etc/designs/mycompany節點。

建立最適化表單頁元件

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

導覽至節點/apps/mycompany/templates/enrollment-template/jcr:content，並將屬性sling:resourceType的值修改為/apps/mycompany/components/page/enrollmentpage
將節點/libs/fd/af/components/page/base複製到資料夾/apps/mycompany/components/page。
將複製的元件更名為enrollmentpage。
（僅當您已有內容頁面時） 如果您有網站的現有元件，請執行下列 contentpage步驟(a-d)。如果您的網站沒有現有的contentpage元件，您可以保留resourceSuperType屬性來指向OOTB基本頁面。
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元件，也包括自定義元件。