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

必備條件

最適化表單範本

「最適化表單」範本是專用的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。

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

  2. 在/apps目錄下,建立應用程式的檔案夾結構。 例如,如果應用程式名稱為mycompany,請建立具有此名稱的檔案夾。 通常,應用程式資料夾包含元件、配置、模板、src和安裝目錄。 在此示例中,建立元件、配置和模板資料夾。

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

  4. 複製simpleEnrollmentTemplate節點。

  5. 導覽至資料夾/apps/mycompany/templates。 按一下右鍵它並選擇​貼上

  6. 如有必要,請更名您複製的模板節點。 例如,將其重新命名為enrollment-template。

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

  8. 修改jcr:content節點的jcr:titlejcr:description屬性,以區分模板與您複製的模板。

  9. 已修改模板的jcr:content節點包含guideContainerguideformtitle元件。 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節點。

建立最適化表單頁元件

自訂範本的樣式與預設範本相同,因為範本會參照頁面元件/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步驟(a-d)。如果您的網站沒有現有的contentpage元件,您可以保留resourceSuperType屬性來指向OOTB基本頁面。

    1. 對於enrollmentpage節點,將屬性sling:resourceSuperType的值設定為mycompany/components/page/contentpage。 contentpage元件是您網站的基本頁面元件。 其他頁面元件可加以擴充。 刪除enrollmentpage下的指令碼檔案,但head.jspcontent.jsplibrary.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元件,也包括自定義元件。

建立自適應表單客戶端庫

新模板的enrollmentpage元件的head.jsp檔案包含客戶端庫guide.theme.simpleEnrollment。 預設範本也使用此用戶端程式庫。 使用下列方法變更新範本的樣式:

  • 定義自訂主題,並以自訂主題取代預設主題guide.theme.simpleEnrollment
  • 在/etc/designs/mycompany下定義新的用戶端程式庫。 在jsp頁中,在預設主題項後加入客戶端庫。 在此用戶端程式庫中包含所有覆寫的樣式和其他Java Script檔案。
注意

主題是指用於轉換最適化表單的頁面元件所包含的用戶端程式庫。 用戶端程式庫主要控制最適化表單的外觀。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now