使用最適化 Forms 區塊建立表單
AEM Forms Edge Delivery 會提供一個區塊 (名為最適化 Forms 區塊),可協助您輕鬆建立表單來擷取和儲存擷取的資料。您可以建立預先設定最適化 Forms 區塊的新 AEM 專案,或可以將最適化 Forms 區塊新增至現有 AEM 專案。
這些表單可直接提交資料至 Microsoft Excel 或 Google Sheets 檔案,讓您能夠使用由 Google Sheets、Microsoft Excel 和 Microsoft SharePoint 等強大 API 建構的活躍生態系統,以便輕鬆處理提交的資料或啟動現有的業務工作流程。
先決條件
在開始之前,請確保您已完成以下步驟:
- 使用 AEM Forms 範本設定 AEM 專案,或將最適化 Forms 區塊新增至您現有的 AEM 專案,並原地複製本機電腦上的對應 GitHub 存放庫。
在本文件中,Edge Delivery Services (EDS) 專案的本機資料夾稱為[EDS Project repository]
。 - 確保您可以存取 Google Sheets 或 Microsoft SharePoint。若要將 Microsoft SharePoint 設定為您的內容來源,請參閱「如何使用 SharePoint」。
建立表單
使用試算表可輕鬆地製作表單,而無需瀏覽複雜的流程。您可以定義構成表單結構的列和欄。每列代表一個單獨的表單欄位,欄標題定義對應的欄位屬性。
例如,考慮以下試算表,其中的列是概述enquiry
表單和欄標題是定義其屬性:
若要繼續建立表單:
-
在 Microsoft SharePoint 或 Google Drive 上,存取您的 AEM Edge Delivery 專案資料夾。
-
在 AEM Edge Delivery 專案目錄內的任意位置,建立 Microsoft Excel 活頁簿或 Google Sheet。例如,在 Google Drive 上的 AEM Edge Delivery 專案目錄中,建立一個名為
enquiry
的試算表。 -
根據為您專案指定的設定,確保讓相關 AEM 使用者 (例如
helix@adobe.com
) 共用工作表。授予使用者關於工作表的編輯權限。 -
開啟建立的試算表並將預設工作表重新命名為「共享預設」。
-
若要新增表單欄位,請將列和欄標題插入「共用預設」工作表中。每列應該代表一個 表單欄位,且有定義對應欄屬性的欄標題。
為了快速開始,請考慮複製查詢試算表內容至您的試算表中。複製內容後,請儲存試算表。
embed -
使用 AEM Sidekick 來預覽工作表。
預覽時,新的瀏覽器標籤會以 JSON 格式顯示工作表內容。確保要擷取預覽 URL,因為這是在下個區段中呈現表單必要的項目。URL 格式如下:
code language-json https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json
<branch>
是指 GitHub 存放庫的分支。<repository>
表示您的 GitHub 存放庫。<owner>
是指託管 GitHub 存放庫的 GitHub 帳戶使用者名稱。
例如,如果您的專案存放庫名為 “portal” (位於帳戶 “wkndforms” 下面),並且您使用的是「主要」分支,則 URL 如下所示:
https://main--portal--wkndforms.hlx.page/enquiry.json
到目前為止,您已經準備好表單的結構。現在,若要預覽表單:
-
開啟 Microsoft SharePoint 或 Google Drive 帳戶,然後導覽至您的 AEM Edge Delivery 專案目錄。
-
開啟文件檔案 (例如索引檔案) 以嵌入表單。或者,您可以建立一個新文件。
-
移動至文件中要新增表單的預期位置。
-
若要建立表單區塊來呈現表單。選取「插入 > 表格」,然後建立一個含一欄、兩列的表格。將表命名為「表單」,並將預覽 URL 貼至第二列。確保 URL 的格式為超連結,而不是純文字,如下所示:
table 0-row-1 1-row-1 表單 https://main–wefinance–wkndforms.hlx.live/enquiry.json 此區塊是用作嵌入表單的暫留位置。在該區塊的第二行中,新增
<form>.json
檔案的預覽 URL 作為超連結。note important IMPORTANT 確保 URL 的格式為超連接,而不是顯示為純文字。 -
使用 AEM Sidekick 來預覽文件。頁面現在會顯示表單。例如,這是以查詢試算表為主的表單:
現在,填寫表單並按一下提交按鈕,您會遇到類似於以下內容的錯誤,因為試算表尚未設定為接受資料。