起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何設計一個表單引擎？
表單的本質是業務，沒有表單是無法完成業務系統的，而動態表單使業務系統更高級。動態表單是什么呢？它是如何工作的？應用場景有哪些？一起來看一下吧。
一、表單
表單在網頁中主要負責數據采集功能，是提交數據的一切形式。表單的本質是提交數據，不僅僅包含輸入框、下拉選擇框等這些控件，常見的按鈕空間也屬于一個表單。
1. 動態表單
動態表單（Dynamic Form），指在前端運行過程中可依賴某些業務邏輯發生表單項變化的表單，還包括表單布局、表單數據管理、表單校驗、表單交互、表單項聯動邏輯等原本由前端編程完成的表單開發，轉由后端通過 API 接口輸出表單描述自動完成上述所有內容的表單開發形式。
（動態表單原理示意圖）
2. 動態表單的特點優勢
表單的本質是業務，而動態表單使業務系統更高級。
普通表單是一個表單寫一份前端的代碼，代碼全部由前端開發者完成（后端配合接口輸出）。而動態表單則是一個表單對應一個 JSON（由后端輸出），所有表單由一份代碼（動態表單引擎）進行加載和渲染。
所以，動態表單具有以下優勢：
- 客戶端運行的代碼量更少；
- 每個表單的JSON按需加載；
- 表單需求變化時，無需前端修改發版，只需編輯數據庫中的JSON。
二、表單控件
表單控件是提供一組允許用戶操作的對象，從而接收用戶輸入的數據，用戶可操作該對象來執行對表單設計，修改等操作。
1. HTML表單種常見的13個控件
input元素無疑是一個龐大和復雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統表單控件，datalist、progress、meter、output、keygen這五個新增表單控件。
2. 動態表單控件
動態表單是老廠商天翎核心技術之一，也是天翎公司核心產品MyApps的重要組成部分。通過對于動態表單的應用，可以避免在電子流程系統中硬編碼的數據采集及處理表單，提高系統的可維護性。
說明：
Form，動態表單實現的基本入口，描述了DynaForm的最基本屬性，比如名稱、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過此XML描述兩類信息：
- Form中所具有的Field以及Field的類型、名稱、長度、計算代碼等等，XML；
- Form的格式，比如排列次序、表格定列化的過程當中，系統自動解析XML的內容并將其轉換為Java Object并由此具備Object的行為特性；位等。Form作為一個ValueObject存儲在數據庫中。
FormElement，接口，表示Form中的基本元素；
FormField，動態表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴于具體的SubClass實現；
TextField，單行文本框，繼承FormField；
SelectField，下拉選擇框，繼承FormField；
TextareaField，多行文本框，繼承FormField；
CheckBoxField，復選框，繼承FormField；
RadioBoxField，單選框，繼承FormField；
Textpart，靜態文本段，除各種Field以外的靜態文本部分，繼承FormElement；
ComponentField，自定義組件，繼承FormField；
AttachmentUploadField，附件上傳組件，繼承FormField；
ImageUploadField，圖片上傳組件，繼承FormField；
ViewDialogField，視圖組件，用于實現主從結構的表單，繼承FormField；
CalctextField，計算文本組件，用于實現需要計算的文本，繼承FormField；
IncludeField，實現SubForm的包含，繼承FormField；
WordField，Word組件，繼承FormField；
OcrField，為將來預留的接口，系統暫未實現；
三、表單引擎
表單引擎是為快速實施項目研發的輕量級表單設計工具。采用表單引擎工具可在不開發和新增加代碼的情況下設計出新表單樣式，同比程序開發可省掉程序員差不多70%的開發工作量，并且后期維護相對簡單，管理方便。
1. 工作原理
在了解了表單的基本機構后，進一步看看表單引擎是如何工作的。
從客戶端（Client）輸入數據（Document），比如一個excel文件，表單（Form）結合excel文件自動生成HTML，如下圖：
（表單結合文檔生成HTML過程）
（XML解析為表單對象的過程）
（表單轉為HTML過程）
（表單生成數據庫）
2. 應用場景
天翎Myapps低代碼開發平臺的表單引擎是基于Web界面上可視化編輯的表單設計系統，同時支持印刷模式和拖拽模式兩種設計方式，形象可見，操作方便。印刷模式可以做一些復雜的表單配置，同時還支持word表格的導入；拖拽模式：基于Vue的表單設計器，采用可視化拖拉拽的模式進行表單的設計。
（表單前臺）
（表單后臺）
本文由 @周志軍Jarod 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
原來是軟廣，不過也可以學習下。
多問一句，如果需要特定組件的數據取值范圍是取決于某系統中的關聯表數據，怎么載入呀？用腳本？定制開發？
（比如：不同人員類型所能報銷的類別不一樣，報銷的下拉那需要動態渲染的時候）
不算是軟廣。只是正好在研發這個產品。產品怎么設計。文章怎么寫。真實思考。組件的數據取值通常要引入計算邏輯。簡單邏輯可以是可視化的簡單加減乘除或篩選。不過真實的業務通常不會這么簡單。所以要引入腳本語言。goovy或JAVA前端都可以。我自己選擇服務器端的JavaScript為基礎進行擴展實現。