公共表單

在 iVX 快速教程中，我們使用一個公共表單項目作為 WebApp 應用的演示說明。公共表單項目可以用于企業內部或一個問卷公共平臺做問卷調查，用戶可以自由的設置表單元素以及樣式，并且可以手動設置表單結束下載填寫問卷后的調查數據。

公共表單共分為 6 個頁面，分別是已結束填寫表單、需填表單、自己創建的表單、具體表單顯示以及登錄頁面。

已結束填寫表單頁用于查看已結束的表單內容，或進行結束表單的數據下載；需填寫表單頁用于查看需要填寫的表單內容；自己創建的表單頁用于查看自己創建的表單；具體表單顯示頁為填寫表單；登錄頁則用于用戶進行注冊或登錄。

最終演示效果：

一級目錄

二級目錄

三級目錄

一、登錄頁制作及功能編寫

為了方便之后的功能編寫，在此我們編寫登錄頁，完成用戶登錄、注冊功能。

1.1 編寫登錄頁

登錄頁如下：

登錄頁布局比較簡單，為一個行包含了兩個行，左側為一張圖片用于顯示，寬度占滿了整行；右側主要內容則是登錄所需要填寫的信息輸入框。

首先我們在頁面中創建如下布局：

隨后在設置左圖的寬度為 62%，比右側略大一些，這樣會顯得比較美觀：

隨后設置右側登錄框的寬度為 38%，這兩個行占滿整個頁面寬度：

接著我們往左圖中添加一張圖片，該圖片的寬度為 100%，占滿整個左圖行：

接著我們在登錄框中創建 3 個行，分別用于設置登錄框的元素：

在此需要設置登錄框的水平對齊為居中方便 iVX 公共表單行元素居中顯示，在此需要對公共表單行設置寬度為 60%，用于顯示標題，其余行則占滿整個寬度。

接下來需要在這些行中添加對應的組件：

隨后設置對應的屬性即可完成演示效果。

其實在登錄頁中我們還可以為其增加注冊框內容，我們只需要在頁面中再制作一個類似布局用于注冊，最后再使用一個變量進行顯示控制即可。現在我們在登錄框中創建一個類似的注冊框：

此時頁面的顯示效果如下：

1.2 控制登錄頁注冊及登錄框顯示

接下來我們創建一個布爾變量，用于判斷點擊的是注冊按鈕還是登錄按鈕，如果點擊注冊按鈕則顯示注冊框的頁面元素內容，若點擊的是登錄按鈕則顯示登錄框的元素內容。

我們創建兩個 if 組件用于判斷該登錄值的狀態，將注冊元素內容以及顯示元素內容分別拖入對應的 if 組件中：

隨后點擊判斷注冊組件判斷登錄變量的值是否為 flase，為 false 則表示不注冊，顯示登錄組件，判斷為true 則相反：

接著我們分別對登錄、注冊按鈕設置事件：

點擊登錄，設置登錄布爾變量值為 flase ，點擊注冊按鈕設置登錄布爾變量為 true，此時就可以來回進行切換：

1.3 完成用戶注冊

對完成用戶注冊我們需要在后臺添加一個私有用戶組件。私有用戶組件是一個已經做好基礎功能的數據庫，我們可以使用用戶組件存儲用戶賬號密碼、手機短信登錄、發送手機驗證碼、賬號密碼登錄、用戶注冊等：

點擊后臺添加私有用戶后，我們使用該組件完成用戶的注冊操作：

為了方便標識，為私有用戶重命名為用戶：

接下來我們為驗證碼按鈕添加事件：

點擊驗證碼后，在點擊事件編輯面板選擇需要操作的對象為用戶組件，隨后需要進行的動作為獲取短信驗證碼。此時點擊驗證碼后，將會發送短信到我們在注冊框中所填寫的手機號，此處為了方便演示我們選擇無需使用圖片驗證碼：

接下來我們為注冊按鈕添加事件，該事件在點擊注冊按鈕進行手機號注冊時響應，我們通過使用用戶對象，進行手機注冊動作，傳入手機號碼、短信驗證碼即可：

之后為了判斷注冊動作是否成功，我們為這個這動作添加兩個回調，一個為成功時響應、一個為失敗時響應。成功注冊將會彈出成功注冊提示，并且設置登錄變量為 true 頁面將會自動回到登錄界面；注冊失敗則會彈出提示：

此時即可完成用戶注冊：

1.4 完成用戶登錄

接下來我們完成登錄功能，登錄功能依舊使用用戶對象完成，我們點擊登錄框中的登錄按鈕為該按鈕添加一個事件：

隨后選擇用戶對象，發起手機密碼登錄：

接著增加成功、失敗回調。此時還需在前臺下創建一個變量，用于判斷賬戶是否成功登錄，方便之后的用戶賬號獲取。我們在登錄成功后提示用戶登錄成功，并且設置登錄用戶的賬號為輸入的賬號內容，若失敗則彈出失敗提示：

接著我們可以嘗試進行登錄，正確輸入注冊的賬號與密碼則可得到登錄成功提示：

二、頁面編輯頁制作及功能編寫

編寫完登錄注冊頁后，我們開始添加表單內容。表單內容是通過一個編輯頁動態生成，頁面效果如下：

該頁面可以使用左側的添加表單選項，為需要填寫的表單添加動態的選項內容，并且添加后的表單內容可以更改每一行的標題、或者是背景色；添加的下拉菜單頁可以為其增加選項內容。

2.1 表單標題欄制作

表單編輯頁包括一個頭部標題欄，標題欄可以跳轉到不同的頁面。標題欄主要由左側與右側組成，左側、右側各占整行的 50% 寬度，左側主要為不同頁面的跳轉、右側為當前頁面所制作的表單保存按鈕。

此時我們新建一個頁面命名為編輯頁，將該頁的背景色改為灰色，使其與主要內容有層次的突出感；接著為其添加一個行命名為頭部，在頭部行中添加兩個行，一個命名為標題欄左側，另一個命名為標題欄右側：

在此將標題欄左側與右側的垂直對齊設置為居中，使頁面元素能夠垂直居中將會更加美觀，在此還需單獨設置右側標題欄的水平對齊為靠右，為了方便保存按鈕靠右顯示。設置完畢后添加按鈕組件至左右兩側標題欄下：

設置好對應的按鈕樣式后，頁面中顯示效果如下（設置樣式不同則顯示不同，根據各自喜好進行屬性設置）：

2.2 編輯區內容制作

制作完標題欄后，我們創建一個行命名為編輯內容塊，在編輯內容塊下創建 3 個列，這 3 個列分別設置他們之間為 30%、40%、30% 使其占據整個行內容，也可以在其基礎上設置對應的外邊距、內邊距，使其具有一定的間隔將會更加美觀：

接著在添加元素塊列中創建一個行，這個行下有兩個行，一個用于標題、一個用于添加元素的呈現；用于標題的行命名為表單外觀標題，添加具體元素的行命名為詳細內容；詳細內容行下創建兩個列，這兩個列分別占據添加元素塊列最大寬度的 50%，用于存放需要添加的內容按鈕：

我們如上圖添加好內容后，將會呈現如下圖類似的頁面：

2.3 點擊組件按鈕添加元素到表單中

此時我們需要完成一個頁面效果，該效果需要我們點擊左側添加表單選項中的組件添加按鈕，隨后點擊的組件添加按鈕會響應一個事件，該事件會將需要添加的元素添加至動態添加區中。

需要實現這個效果需要創建一個一維數組變量，我們在該頁面中創建一個一維數組變量，命名為動態添加內容次序：

在此我們設定，單行文本的數字標記為 1、多行文本的數字標記為 2、數字文本的數字標記為 3、日期的數字標記為 4 以此類推。我們首先在添加的內容列中創建 3 個行，一個行命名為表單內容，用于包裹其他兩個行，其他兩個行命名為標題與組件內容；接著我們再到標題行下創建兩個內容行，一個命名為右側顯示，另一個命名為左側顯示，左側顯示用于顯示標題內容、右側顯示用于操作標題欄進行設置，組件內容則是動態添加的組件內容：

接著先添加標題欄內容，在左側和右側顯示中添加如下圖所示組件：

在此需要注意，設置標題內容輸入框默認情況下為隱藏，此時頁面呈現效果如下：

接著在組件內容列下添加一個 if 判斷，在 if 判斷下添加一個輸入框組件，輸入框組件設置屬性為單行，也就是默認設置：

此時我們添加一個 for 循環組件至添加的內容列之下，命名為創建動態添加的元素，隨后將表單內容添加至該 for 循環之下：

接著我們設置創建動態添加的元素循環的數據來源，為動態添加內容次序一維數組：

我們回到判斷單行組件的屬性中，設置條件為當前數據等于 1 則創建當行文本：

此時只需要給這個動態添加的內容次序進行值的添加，那么就可以通過循環遍歷該數組完成指定組件的創建。我們找到添加表單選項中的單行文本，給該按鈕設置一個點擊事件，需要操作的對象為動態添加的內容次序數組，為其插入一個值，該值就是單行文本的標記 1，插入位置為當前元素個數的加一位置，此時就可以按照順序往下添加數組內容：

設定了該操作后，即可通過點擊單行文本按鈕進行單行文本按鈕的添加：

完成該功能的邏輯為：點擊單行文本按鈕為一維數組中添加標記，隨后循環進行遍歷，若其中的存儲內容為 1 則可以進行對應組件的顯示。

接著我們往其他添加按鈕中添加事件，例如多行文本的標記值為 2，我們在其中添加事件為往次序數組中添加標記值為 2，在該數組末尾進行添加：

其他按鈕的事件添加方式類似，在此不再贅述，只需要修改對應的標記值即可。接下來我們在組件內容中添加對應的 if 判斷，就可以為其完成對應的組件創建：

此時還需要完成一步，設置標題欄右側顯示的序號文本綁定為循環的序號：

呈現效果如下：

2.4 編輯組件標題與刪除添加的組件

在組件內容的標題欄中，我們可以點擊標題右側的編輯按鈕編輯該標題內容：

我們在此小點中，需要完成點擊該標題顯示文本編輯框的功能編寫。點擊編輯按鈕后可編輯該行的標題文本內容，并且隱藏編輯按鈕、顯示保存按鈕；隨后編輯完畢后點擊保存按鈕可對該行標題文本進行保存。

此時在右側顯示中創建一個保存按鈕并且設置初始狀態為隱藏：

隨后為編輯按鈕創建一個事件點擊時觸發，將輸入框、保存按鈕顯示，單行文本標題與當前編輯按鈕進行隱藏：

接著我們創建一個一維數組用于標題顯示，命名為動態插入的組件標題。我們將標題的單行文本內容綁定為動態插入的組件標題對應的序號位置內容：

接下來我們為了使動態插入的組件標題數組的排列與次序數組保持一致，我們在添加的時候也需要為其添加一個標題插入到動態插入的組件標題之中。在此以單行文本為例：

通過同時設置值的方式可以使兩個數組保持一致的內容。我們此時為保存按鈕添加事件，該事件將會顯示編輯、文本標題組件，隱藏輸入框、保存按鈕，并且修改動態插入的數組標題內容，修改的位置為當前循環的序號位置，修改的內容則為輸入文本框中的標題內容：

此時我們預覽頁面后點擊編輯按鈕即可編輯：

接著我們為刪除按鈕添加點擊事件，點擊刪除后即可完成刪除不需要的組件。由于次序數組與標題數組兩者對應，刪除其中一個元素會導致兩者數據不匹配；此時我們在刪除內容時需要兩者都同時進行刪除，在這里使用當前序號作為刪除位置索引即可同時刪除元素內容：

完成事件編寫后，在頁面中添加數據后點擊刪除即可完成呈現元素的內容剔除。

2.5 保存添加組件的內容

保存添加的組件內容需要再創建一個一維數組變量，在此命名為動態插入的組件內容。為了數據保持匹配，我們在添加一個組件時為其添加默認內容，在此以 null 作為默認值進行添加，此時以添加文本組件時為其添加進行添加值的操作：

隨后為組件內容改變的事件，以單行文本為例：

為其添加輸入改變事件，其他組件事件或為日期更改、選中更改，設置方式類似在此不再贅述：

2.6 動態更改組件的屬性

此時我們在屬性欄列中添加兩個行，一個命名為選中的序號欄，另一個命名為背景色欄。背景色欄用于更改當前某一動態添加的組件的背景色（調色板位于擴展組件中），序號欄用于提示當前選中的時哪一行動態添加的組件欄：

接下來我們為表單內容添加一個事件，當點擊該表單內容將會記錄此行的序號。在此之前需要創建一個變量用于記錄點擊的序號：

接著在表單內容事件中設置事件點擊觸發，在動作之中選擇屬性更改選中序號變量賦值，值的內容為當前序號：

隨后我們設置屬性欄中的序號文本數據綁定為選中序號變量：

在正式動態更改數據添加的組件屬性前，我們需要創建一個對象數組，設置該對象數組的列名為背景色與下拉菜單選項：

對象數組與之前創建的一維數組一樣，需要保持對應的匹配次序，我們依舊在添加組件時為其賦予默認值；在此需要注意的是，一定要將內容添加至當前對象數組中的末尾，否則將會不匹配：

隨后我們在表單內容行中設置背景屬性值為組件屬性對象數組的某一行的某個值：

接下來設置行號為當前序號：

字段名在單引號中輸入背景色即可：

接下來為調色板添加事件，當調色板顏色改變時觸發，選擇對象屬性設置行為當前選中序號，列為背景色，所更改的顏色則為選中的顏色：

隨后預覽選中需要更改背景色的行，此時點擊調色板將會改變其背景色：

接下來還需為下拉菜單更改其下拉選項，該選項需要我們動態指定。下拉菜單我們規定標記數字為 5，當選中序列的數字為 5 時我們將會顯示。首先我們在屬性欄下添加一個 if 判斷，在 if 判斷下添加一個行名為下拉菜單，在其內部添加一個文本作為提示、一個輸入框作為選項填入、一個按鈕作為輸入框輸入內容的提交：

頁面中呈現效果如下：

接著我們在當前界面下創建一個數值文本，用于判斷是否是下拉菜單，默認為0，若選中的組件為下拉菜單那么該值將會為 1：

那么此時在 if 判斷中應該判斷是否下拉選項這個變量的值為 1，為 1 時則顯示下拉選項添加頁面元素：

接著我們回到表單內容事件面板中，在其添加條件，判斷當前點擊的序號在次序數組中為幾，若為下拉菜單的標記 5，那么則設置是否下拉選項變量值為 1，否則為 0：

此時動態添加下拉菜單作為表單內容，點擊一個下拉菜單將會在右側屬性改變內容中出現下拉菜單選項添加元素：

接下來則需要為提交按鈕添加事件，將輸入的選項添加到下拉菜單之中。點擊提交為其添加事件：

此時事件的更改方式與添加背景色類似，但是由于下拉菜單選項會有多個值，此時還需添加一個一維數組，在此命名這個一維數組為下拉菜單內容：

我們首先在提交按鈕中為這個下拉菜單內容進行賦值：

隨后設置組件屬性對象數組的某個值，該值的行為選中的序號、列為下拉菜單選項、值則為下拉菜單的內容：

接下來我們為下拉菜單為其綁定選項內容，設置選項內容為組件屬性的某一行某一列：

隨后設置行號為當前序號值，字段名為下拉菜單選項即可：

此時即可完成下拉菜單值的自定義操作：

最后我們再為其添加一個文本用于標題輸入即可：

2.7 動態生成的表單保存

此時我們已經可以進行動態表單的創建，接下來需要進行表單的發布。表單的發布需要保存在數據庫之中，我們創建一數據庫命名為表單數據庫：

為其創建組件次序、組件標題、組件內容、組件屬性、為Json數據，表格標題、記錄數、刪除字段為一般數據：

隨后我們創建一個服務，叫做編輯表單數據存入數據庫，該服務接受組件標題、組件內容、組件次序、表單標題、組件屬性這幾個參數：

隨后將需要對應賦值的字段進行標齊，并且給與記錄數與刪除字段一個默認值為 0：

最后設置其返回結果：

接著為動態添加頁面的保存按鈕設置事件，點擊按鈕后選擇剛剛所創建的提交服務，設置好我們已有的數據內容進行提交：

此時我們預覽界面，設置好內容后提交成功將會出現提示：

此時查看數據庫，則會發現其中已有數據記錄：

三、表單瀏覽頁制作及功能編寫

表單瀏覽頁用于用戶瀏覽未關閉（刪除）的表單，查看表單可進行內容的編寫。表單瀏覽界面制作很簡單，在此不再贅述只講解核心內容：

在本應用中，所有界面的基本元素一致，設置與其他頁面相同的元素后即可完成標題欄的制作，隨后設置頁面的水平對齊為居中即可完成。

在該頁面中需要在擴展組件中添加分頁組件，添加完畢后使用行進行居中即可，該頁面的對象樹如下：

3.1 添加表單獲取服務

表單獲取需要創建服務，由于表單數據量可能過大，在此需要在進行數據獲取的時候實現分頁。創建一個服務命名為分頁獲取表單信息：

此服務需要接收一個參數頁數，類型為數字用于進行分頁計算：

此時在服務中選擇表單數據庫對象進行輸出，篩選條件需要設置為刪除字段值為 0 的數據，若為 1 則表示已刪除或已停止收集填寫數據：

隨后在輸出行數中需要設置一個數量范圍，例如第 0 條到第 14 條、第 14 條到 28 條、第 28 條到 32 條，我們可以發現公式可以寫成每頁顯示的條數 （頁數-1）× 每頁顯示條數 到 頁數 × 條數 這個范圍，若每頁顯示 14 條數據，那么就可以在數據庫中行數中寫成：

此時我們需要顯示最新的數據，那么再把 ID 創建時間設置為降序即可：

最后設置輸出結果即可：

首先創建一個通用變量命名為分頁數據，用于接收服務傳遞過來的數據：

接著給頁面添加一個事件，該事件顯示時觸發，觸發后默認顯示第一頁，并且將結果賦予給分頁數據變量：

接著我們為需要顯示的文本綁定數據，此處以創建時間為例，將數據綁定為循環創建時的創建時間列內容：

隨后預覽該頁內容，內容將會顯示在頁面中：

接下來為分頁添加點擊事件，當點擊分頁頁數后調用分頁數據獲取服務，傳遞當前頁面頁碼作為參數，將返回結果賦值給分頁數據，那么即可實現分頁：

四、表單填寫頁功能編寫

表單填寫頁用于表單內容填寫，其功能與動態生成頁面實現類似，均是通過數組進行循環創建并且綁定數組內容，在此是通過傳入一個數據ID，由該ID作為查詢條件，從數據庫進行獲取，將數據剝離后即可完成內容的顯示；最終實現數據提交即可。

首先我們查看該頁面：

其頁面主要內容與動態添加內容類似，對象樹內容可以從動態添加內容頁復制到此頁面中進行少量修改即可：

4.1 創建表單內容獲取服務

首先創建一個服務命名為獲取具體表單數據：

在此設置接收參數為 ID：

接著從表單數據庫中進行數據獲取，設置條件為數據ID等于傳入的參數 ID 即可：

最后設置返回結果：

4.2 為頁面添加數據獲取

創建完服務后我們為頁面添加事件對服務進行調用，此時我們用固定的 ID 值查詢數據庫中的內容（讀者可以查看自己數據的ID值進行設定），隨后創建一個通用變量表單內容，為其賦值為返回結果，并且查看表單內容變量內容：

此時我們瀏覽該頁面，然后按 F12 在 console 中可以看到數據結構：

此時我們發現數據前面有一個序號，我們可以在賦值時通過自定義路徑獲取內容，這樣可以獲取到數據。新建一個通用變量叫做數據庫查詢結果，設置該值為表單內容的自定義路徑為 0，并且進行數據顯示：

此時從結果中可以看到已經消除了序號內容：

接著我們創建組件內容、組件標題、組件次序這 3 個一維數組以及一個對象數組類型的組件屬性，并且為其賦值。為了更好的進行操作，我們在數據庫查詢結果變量中點擊添加根節點，創建幾個節點：

創建節點后將會非常方便賦值：

此時我們預覽頁面，將會出現我們動態添加的結果：

4.3 提交填寫數據

頁面生成完后我們填寫內容后需要對數據進行提交，此時我們與動態表單生成時操作一致，當元素內容改變時進行數組內的數據更改，由于從動態添加表單頁復制到當前界面，此功能已存在并不需要改動，我們直接為提交按鈕添加事件即可。

需要完成提交數據存入數據庫，需要再新建一個保存提交數據的數據庫，命名為已填寫表單：

隨后為其增加 組件次序、組件標題、組件內容、父表ID字段。這些字段所存儲的內容我們已經存在，我們只需要直接進行提交即可；父表ID字段為傳遞過來獲取表單的ID，此時我們固定數值為 9 即可，之后再進行統一更改。

接下來創建一個服務為已填寫表單提交數據，接收的參數為 組件次序、組件標題、組件內容、父表ID：

隨后進行常規的數據提交，并且增加一個動作，以父表 ID 為條件，更新表單數據庫的當前表單的記錄數加 1：

最后給提交按鈕添加提交事件：

預覽頁面進行內容提交后將會在已填寫表單數據庫中看到具體內容：

最后在前臺頁面下創建一個變量用于記錄點擊的父表內容：

當我們點擊填寫按鈕時，將會設置該變量的值為當前點擊表單的ID文本內容：

給該填寫按鈕增加事件：

最后我們在具體表單顯示頁中，設置啟動服務傳入的ID為變量查看的表單ID變量值：

五、自己創建的表單頁及結束頁功能編寫

自己創建的表單頁主要用于顯示當前用戶所創建的表單內容查看，進行刪除（停止收集）、數據下載等操作。在此頁面布局不再講解，主要講解功能如何實現，首先查看該頁面的頁面：

5.1 為所有頁面添加登錄前置

為了查看自己創建的表單，首先該用戶需要滿足登錄條件，在此為所有頁面添加登錄前置，否則無法進入登錄界面外的其他界面。

我們回到登錄頁中，在之前創建了一個登錄用戶變量：

我們為其他頁面增加一個判斷，若當前變量為 0 則跳轉到登錄頁，在此以編輯頁為例，其他頁面相同操作不再進行贅述：

隨后為每個標題欄的按鈕添加跳轉：

5.2 獲取自己創建的表單信息

接下來創建一個服務，命名為獲取自己已填寫表單信息：

該服務接受手機號作為參數：

隨后用手機號對比提交用戶做為條件查詢數據，使用降序的方式進行數據輸出且刪除字段不能等于 1：

隨后在自己創建的表單頁中添加事件獲取該服務，創建獲取的數據庫數據變量作為數據接收：

隨后使用循環創建即可完成數據顯示。

5.3 結束表單的服務編寫

在此只講解結束表單的填寫，其他內容高度相似不再贅述。

結束表單按鈕只需要設置當前 ID 的數據表的刪除字段為 1 即可，在此創建一個服務名為結束表單：

該服務接收 2 個參數，一個名為 ID 另一個名為當前用戶：

隨后在使用表單數據庫進行查找，數據ID 與提交用戶一致的情況下更改刪除字段為 1：

最后返回是否成功即可：

5.4 結束表單頁的功能編寫

我們再創建一個已結束表單頁，該頁可以下載表單統計數據：

該頁面與自己的表單頁的區別在于功能按鈕的不同，在結束表單頁中可以下載統計的填寫數據。

此時創建一個服務為已結束表單，接收一個參數為當前用戶，通過當前用戶查找該用戶已經停止填寫的表單數據：

隨后為已結束表單頁添加一個顯示事件，顯示時獲取當前用戶已結束填寫的表單，創建一個已結束表單通用變量接收：

之后使用已結束表單為循環創建作為數據來源即可。

5.5 結束按鈕設置功能

此時我們返回自己的表單頁，為結束按鈕添加事件：

黨我們點擊結束后將會跳轉到結束頁：

我們可以填寫一張問卷，然后下載其統計數據。

5.6 下載統計記錄Excel文件功能編寫

需要記錄已填寫的數據，我們需要創建一個服務命名為已結束表單填寫數據。這個服務接收一個參數為父表ID，為其在已填寫的數據庫已填寫表單中查找對應的填寫信息：

隨后我們將父表ID與父表ID相等作為條件進行查找，并且輸出的內容只有標題和內容：

創建好服務后我們在當前頁面中添加一個 Excel 組件：

點擊下載統計數據為其添加事件，并且新建一個二維數組命名為已結束表單數據，將其作為Excel組件導出的數據來源：

最后預覽，點擊導出按鈕即可自動下載Excel表格：