表單設計介紹

路徑：【後台管理】⇒【應用管理】⇒【應用】⇒【業務模型】⇒【表單設計】

1. 表單設計頁面

表單設計包含 4 個部分：【操作區】、【控制項選擇區】、【設計區】 及 【屬性設定區】。

四個區域各司其職：上方操作區負責表單的狀態與輸出操作；左側控制項選擇區提供可使用的控制項與數據項；中間設計區是實際編排表單的畫布；右側屬性設定區則用於調整表單與控制項的各項屬性。熟悉這四個區域的分工，就能快速掌握表單設計的完整流程。

📌 操作區

操作區主要是針對表單的狀態與模式操作，提供表單版本紀錄、開發模式、預覽、匯出、儲存與發布等操作。

操作區可分為 3 個小區域，從左至右分別為表單狀態、表單開發模式、表單輸出。

表單狀態

在尚未儲存與發布前，表單狀態為「草稿」，並且無歷史版本紀錄。

表單狀態－草稿

在表單完成設計並儲存、發布後，表單狀態會顯示當前版本，並且可在歷史版本中看見每次發布版本紀錄。

表單狀態－發布後版本編號
表單開發模式

表單可以依據不同狀態顯示不同佈局，僅需要選擇目前的開發模式，就可以切換為網頁版、手機版或線上開發的表單畫面。

網頁版設計

網頁版設計支援拖動控制項至設計區，並且點選設計區內的控制項可以針對該控制項進行複製、刪除及控制項屬性設定。

網頁版設計

手機版設計

手機版設計主要是方便開發者預覽手機版畫面，並不支援拖動控制項至設計區。

但點選設計區已存在控制項仍可進行控制項屬性設定。

手機版設計

線上開發

表單線上開發，包含 JavaScript 程式語言和 CSS 樣式。

使用者可新增修改程式碼，儲存後對目前表單生效，系統預覽或前台顯示時，檢視儲存後的表單。

線上開發
表單輸出

表單輸出包含匯出、預覽、儲存及發布功能：
- 匯出：匯出表單其相關的設定，匯出格式為 html，名稱為表單編碼。
- 預覽：表單設計完成後，可點選 『預覽』 檢視表單輸出網頁版與手機版的樣式效果。
- 儲存：儲存目前表單設計的所有設定，在未發布前不會影響到已發布運行中的表單。
- 發布：表單初次設計完成時，表單是處於未發布狀態。表單發布後，儲存後的表單會取代正在運行的表單，並且才會在系統前台顯示。

📌 控制項選擇區

控制項選擇區展示表單可以使用的控制項與數據項，是表單設計的素材來源；使用者從這裡挑選需要的元素拖入設計區，即可逐步組建出完整的表單。

控制項

控制項是表單設計中操作的最小單位。

使用者可以依據表單設計需求，選擇對應的控制項拖動至設計區，在設計區域建立實際的元件。

每當使用者將控制項新增至設計區時，系統預設都會給這個控制項一個唯一識別編號，同時也在 【數據模型】 中建立一個數據項。

透過獨立編號與數據模型的管理，確保表單資料正確的儲存在系統中。

控制項與數據模型
數據項

數據項則是儲存資料的最小單位。

數據項大致可區分為 2 類：
- 業務數據項
  
  為使用者在設計區新增的控制項。
- 系統數據項
  
  為系統在預設表單建置時，預設新增的數據項。
數據項

若想從 【數據模型】 新增數據項，並在 【表單設計】 的 【控制項選擇區】 使用，需先在 【數據模型】 新增完成資料項並點選 『發布』，才可在 【表單設計】 的 【控制項選擇區】 業務數據項中看到新增的數據項。

新增數據項