最適化表單範本 adaptive-form-templates

CAUTION
AEM 6.4已結束延伸支援,本檔案不再更新。 如需詳細資訊,請參閱 技術支援期. 尋找支援的版本 此處.

製作表單時,您會新增欄位和元件,以在編輯器中定義表單結構、內容和動作。 您可以在 guideRootPanel 表單容器。 使用範本編輯器,您可以建立範本,其中包含作者可用來建立表單的基本結構和初始內容。

例如,您希望所有表單作者在註冊表單中都有特定的文本框、導航按鈕和提交按鈕。 您可以使用作者可用來建立與其他註冊表單一致的表單的元件來建立模板。 當作者使用範本建立最適化表單時,新表單會繼承您在範本中指定的結構和元件。 範本編輯器可讓您:

  • 在結構層中添加表單的頁眉和頁腳元件。
  • 提供表單的初始內容。
  • 指定主題、提交動作。

使用範本 working-with-templates

您可以導覽至 Adobe Experience Manager >工具>範本. 在此,範本會組織在可編輯範本啟用的資料夾中。 AEM提供可組織範本的全域資料夾。 但預設不會啟用。 您可以要求管理員啟用全域資料夾或為範本建立新資料夾。 有關如何建立資料夾的詳細資訊,請參閱 範本資料夾.

點選以開啟資料夾後,您會找到「建立」按鈕,供您建立最適化表單的新範本。

建立範本 create-template

建立資料夾後,開啟資料夾並執行下列步驟以建立範本:

  1. 在範本主控台中,點選 建立 在您建立的資料夾內。

  2. 在「選擇模板類型」部分中,選擇 適用性表單範本 點選 下一個.

  3. 在「範本詳細資料」區段中,提供範本標題並點選 建立.

    您可以提供說明和縮圖,以便在表單編寫時選取建立的範本時查看。

  4. 點選 完成 返回控制台,或點選 開啟 以在編輯器中開啟範本。

範本編輯器UI template-editor-ui

開啟範本進行編輯時,您會看到下列AEM Editor元件:

  • 頁面工具列
    包含下列選項:

    • 切換側面板:讓您顯示或隱藏側欄。

    • 頁面資訊:可讓您指定資訊,例如發佈/取消發佈時間、縮圖、用戶端程式庫、頁面原則,以及頁面設計用戶端程式庫。

    • 模擬器:可讓您模擬和自訂不同裝置的外觀。

    • 層選擇器: 可讓您變更圖層。

      您可以選擇 結構 圖層或 初始內容 圖層。 結構層可讓您新增及自訂頁首與頁尾。 初始內容層可讓您自訂表單內容。

    • 預覽: 可讓您預覽範本在您發佈時的外觀。 您可以使用「圖層選擇器」和「預覽」切換編輯和預覽模式。

  • 側欄: 提供內容、屬性、資產和元件瀏覽器。

  • 元件工具欄: 選取元件時,您會看到可自訂元件的工具列。

  • 頁面:新增內容以建立範本的區域。

請參閱 製作最適化表單簡介 以了解觸控式UI編輯器。

編輯範本 editing-a-template

使用兩個層建立最適化表單範本:

  • 結構
  • 初始內容

圖層選擇器位於螢幕右上角的「預覽」選項旁。

結構 structure

在「範本編輯器」中選取結構層時,您可以在「最適化表單容器」的上下看到版面容器。 作者可將這些版面容器用於頁首和頁尾。 您可以新增、編輯或自訂頁首與頁尾。 將「適用性表單標題」元件拖放至「適用性表單容器」上方的版面容器,以自訂範本標題。 將「適用性表單頁尾」元件拖放至「適用性表單容器」下方的版面容器,以自訂範本頁尾。

結構層中的佈局容器

圖: 結構層中的佈局容器

答: 頁首元件的佈局容器 B. 頁尾元件的版面容器

將「最適化表單標題」元件拖放至「最適化表單容器」上方的版面容器中。 新增元件後,您可以指定其屬性,讓您新增標誌並提供標題。

同樣地,當您拖放頁尾元件至「適用性表單容器」下方的版面容器時,可以提供版權資訊和公司詳細資訊。

在「結構」層中添加頁首和頁尾

圖: 在「結構」層中添加頁首和頁尾

在結構層中鎖定/解鎖元件 locking-unlocking-components-in-the-structure-layer

當您編輯已選取結構層的範本時,可以解除鎖定範本的頁首和頁尾。 如果範本中的元件已解除鎖定,表單作者就可以在使用範本的最適化表單中編輯元件。 鎖定元件會防止表單作者以最適化表單編輯元件。 元件工具欄中提供「鎖定」選項。

例如,您可在範本中新增標題元件。 選取元件時,可在元件工具列中看到鎖定選項。 標題通常包含公司名稱和標誌,您不希望表單作者變更範本中的標誌和標題。 在使用範本建立的已鎖定標題元件的適用性表單中,表單作者無法變更標誌和公司名稱。

NOTE
不建議單獨鎖定或解鎖頁首元件中的影像或徽標。 您可以解除鎖定標題元件。

初始內容 initial-content

選取「初始內容」選項時,範本的「最適化表單容器」會像最適化表單一樣開啟以供編輯。 與編寫最適化表單一樣,您也可以指定初始設定,例如選取主題和提交動作。

表單作者可以用它來建立表單。 內容流結構是在範本的「初始內容」層中指定。 若要切換到編輯表單範本的初始內容,請在「頁面」工具列中的「預覽」之前,點選 畫布下拉式清單 >初始內容​.

範本編輯器中的初始內容層

範本編輯器中的「初始內容層」顯示已選取以指定屬性的適用性表單容器。

在「初始內容」層,您可以建立作者以為基礎的最適化表單範本。 製作範本與製作表單類似,您可以使用側欄中的可用選項。 側欄提供內容、屬性、資產和元件瀏覽器。

請參閱 側欄.

NOTE
選擇「儲存內容」或「儲存PDF」作為「提交操作」時,您將獲得指定「儲存」路徑的選項。 如果您在範本中指定路徑,則從該範本建立的所有表單都會有相同的路徑。 您可以指定正確的儲存路徑,或確保表單作者更新該路徑,以防止每個表單的資料儲存在同一位置。

建立具有標籤和面板的最適化表單範本  creating-an-adaptive-form-template-with-tabs-and-panels-nbsp

例如,您想要建立包含下列標籤的範本:

  • 一般資訊
  • 專業資訊

您已在結構層中新增標誌、提供標題,並新增頁尾。 鎖定頁首和頁尾,讓表單作者在使用範本建立表單時,無法加以編輯。

將圖層從「結構」變更為「初始內容」,然後開始將內容新增至表單。 要建立頁簽結構,請在「適用性表單」容器的guideRootPanel中添加子面板。 若要新增面板:

  • 您可以點選 + 按鈕 拖曳元件至此 選項。

  • 您可以從側欄的元件瀏覽器拖放面板元件。

  • 您可以新增 guideRootPanel (從元件工具欄)。

要建立「一般資訊」和「專業資訊」頁簽,請在的子面板中添加兩個面板 guideRootPanel. 選取面板並點選 cppr 來開啟側欄中的屬性。 將元素名稱變更為 general-infoprofessional-info,並分別命名為一般資訊及專業資訊。 在側欄中,點選內容以開啟內容瀏覽器。 在「表單對象」頁簽中,選擇 guideRootPanel. 在編輯器中,選取了guideRootPanel。 點選 cppr (在元件工具欄中)以開啟其屬性。 在「面板配置」欄位中,選取 頁簽 點選 完成. 頁簽模板結構被應用。

在索引標籤中新增內容 adding-content-in-tabs

在最適化表單範本中新增欄位

新增範本中的欄位

新增面板並將它們建構為標籤後,您就可以在標籤內新增欄位。 在編輯器中選取索引標籤時,您可以看到 拖曳元件至此 選項。 您可以拖放元件,例如文字方塊、清單項目和按鈕。 您可以從側欄的元件瀏覽器拖放元件。

每個元件都具有增強資料擷取和操作的屬性。 例如,您可以啟用 必填欄位 元件的屬性。 作者可以指定客戶略過填寫必要欄位時看到的訊息。 指定 必填欄位訊息 屬性。

在示例模板中,「一般資訊」頁簽中添加了「名稱」、「電話號碼」和「出生日期」欄位。 在「專業資訊」頁簽中,添加了「當前雇傭」、「雇傭類型」、「教育資格」欄位。

新增欄位後,您可以新增「提交」和「重設」等按鈕。

啟用範本 enabling-the-template

建立範本時,會將其新增為草稿。 啟用範本,以使用它建立最適化表單。 啟用模板:

  1. 導覽至 Adobe Experience Manager >工具>範本,並開啟您建立範本的資料夾。

  2. 已建立的模板標籤為「草稿」。

  3. 選取範本並點選 啟用 的下一頁。

    建立最適化表單時,系統會要求您選擇範本時,您會看到列出的範本。

匯入或匯出範本 importing-or-exporting-a-template

表單可與其範本搭配使用。 下載使用自訂範本建立的最適化表單時,不會下載範本。 當您在不同的AEM Forms執行個體匯入表單時,系統會匯入表單而不含其範本。 如果已匯入表單但其範本無法使用,則不會轉譯表單。 您可以封裝自訂範本,方法為 /conf 節點 https://<server>:<port>/crx/packmgr,並將其移植到您要上傳表單的AEM Forms執行個體。

使用範本建立最適化表單 creating-an-adaptive-form-using-the-template

建立並啟用範本後,當您建立最適化表單時,可在Forms Manager中使用範本。 若要使用範本並建立最適化表單,請參閱 建立最適化表單.

變更現成範本的顯示選項 change-display-option-of-out-of-the-box-templates

您可以為最適化表單建立自訂範本,以定義基本結構和初始內容。 AEM Forms也提供一套適用性表單的現成可用範本。 您可以選擇顯示或隱藏範本。

執行下列步驟來顯示和隱藏範本:

  1. 登入AEM Forms製作例項並導覽至 「工具」>「操作」>「Web控制台」.

    note note
    NOTE
    AEM Web主控台的URL為 https://[server]:[port]/system/console/configMgr
  2. 找出並開啟 FormsManager配置 設定:

    • 若要顯示或隱藏現成可用的表單範本,請核取或取消勾選 包含現成可用的AF和廣告範本 選項。
    • 若要顯示或隱藏已新增至AEM 6.0 Forms或AEM 6.1 Forms版本中、但現已過時的現成可用表單範本,請核取或取消勾選 包含AEM 6.0 AF範本 選項。 如果已核取此選項,為了生效,它需要 包含現成可用的AF和廣告範本 的設定。
  3. 按一下「儲存」。已變更現成範本的顯示選項。

建議 recommendations

  • 在模板編輯器中修改表單的屬性時,請勿使用BindReference屬性。

  • 如果要添加斷點,請在編寫最適化表單模板時建立斷點。

    有關斷點的詳細資訊,請參閱 回應式版面.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da