公共表單

在 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表格：