適用性表單範本是專用的AEM頁面範本,具有用於建立適用性表單的特定屬性和內容結構。 範本已預先設定配置、樣式和基本初始內容結構。
建立表單後,對原始範本內容結構所做的任何變更都不會反映在表單中。
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/advandenrollment |
您可以使用範本編輯器來指定最適化表單的結構和初始內容。 例如,您希望所有表單作者在註冊表單中都有幾個文本框、導航按鈕和提交按鈕。 您可以建立模板,供作者用來建立與其他註冊表單一致的表單。 AEM範本編輯器可讓您:
如需詳細資訊,請參閱範本編輯器。
您可以建立範本,並使用範本建立最適化表單,而不使用可用的範本。 自訂範本是以參考最適化表單容器和頁面元素(例如頁首和頁尾)的各種頁面元件為基礎。
您可以使用網站的基礎頁面元件來建立這些元件。 或者,您也可以擴充使用現成範本的最適化表單的頁面元件。
執行以下步驟以建立自定義模板,如simpleEnrollmentTemplate。
導覽至製作執行個體上的CRXDE Lite。
在/apps目錄下,建立應用程式的資料夾結構。 例如,如果應用程式名稱為mycompany,請建立具有此名稱的資料夾。 應用程式資料夾通常包含元件、配置、模板、src和安裝目錄。 在此範例中,建立元件、設定和範本資料夾。
導覽至資料夾/libs/fd/af/templates。
複製simpleEnrollmentTemplate
節點。
導覽至資料夾/apps/mycompany/templates。 按一下右鍵,然後選擇貼上。
如有必要,請重新命名您複製的範本節點。 例如,將其更名為註冊模板。
導覽至/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位置。
開啟Properties標籤,並將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基本頁面。
對於enrollmentpage
節點,將屬性sling:resourceSuperType
的值設定為mycompany/components/page/contentpage。 contentpage
元件是您網站的基本頁面元件。 其他頁面元件可加以擴充。 移除enrollmentpage
下的指令碼檔案,但head.jsp
、content.jsp
和library.jsp
除外。 sling:resourceSuperType
元件(在此例中為contentpage
)包含所有此類指令碼。 標題(包括導航欄和頁尾)繼承自contentpage
元件。
開啟檔案head.jsp
。
JSP檔案包含行<cq.include script="library.jsp"/>
。
library.jsp
檔案包含guide.theme.simpleEnrollment
用戶端程式庫,其中包含最適化表單的樣式。
頁面元件enrollmentpage
具有專用的head.jsp
檔案,該檔案覆蓋contentpage
元件的head.jsp
檔案。
將contentpage
元件的head.jsp
檔案中的所有指令碼包含到enrollmentpage
元件的head.jsp
檔案中。
在content.jsp
指令碼中,您可以新增其他頁面內容或參考至頁面呈現時包含的其他元件。 例如,如果添加自定義元件applicationformheader
,請確保將以下引用添加到JSP檔案中的元件:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
同樣地,如果您在範本節點結構中新增parsys
元件,也納入自訂元件。
新模板的enrollmentpage
元件的head.jsp
檔案包含客戶端庫guide.theme.simpleEnrollment
。 預設模板還使用此客戶端庫。 使用下列方法的,更改新模板中的樣式:
guide.theme.simpleEnrollment
替換為自訂主題。主題是指包含在頁面元件中用於轉譯最適化表單的用戶端程式庫。 用戶端程式庫主要控制最適化表單的外觀。