超豐富的「欄位屬性」:輸入檢查應用篇,靈活設定檢查規則
Judy 2022-10-20在「超豐富的「欄位屬性」:客製欄位細節,讓填表體驗更順暢!」中,我們介紹了Smart平台的欄位屬性,其中,輸入檢查用於檢查填寫人是否有依照規定的格式填寫資料,檢查規則可由表單設計者自行定義,本篇將更進一步舉例在Smart eBuilder輸入檢查的基本、進階及變化應用。
Smart平台已將常用的規則做成現成的屬性供直接點選使用,同時也開放多元的訂定規則方式,例如:Action Flow、撰寫SQL語法及Script、連接REST…等。本篇的基本應用會介紹使用點選的方式快速設定輸入檢查,進階應用則會舉例運用Action Flow與SQL語法來檢查欄位,最後將再介紹一個常見的變化應用,即某個欄位填寫後,其他欄位自動帶入資料。
基本應用 - 快速點選設定輸入檢查 (身分證、E-mail、市話、手機號碼、密碼)
在Smart平台,透過簡單的設定就可以在填寫人送出資料前,先行檢查填寫格式是否有誤。下圖為輸入檢查可以使用的屬性,比如String、E-mail、身分證、密碼、手機號碼、市內電話、範圍起始/截止...等欄位,都已經有預設好的輸入檢查規則可以直接使用。
設定說明:
以手機號碼欄位舉例,選擇「輸入檢查」底下的「手機號碼」,便可將手機號碼規則加到欄位上,並且可選擇檢查時機「欄位修改時」或「存檔前」,設定方式如下:
圖3. 設定「手機號碼」檢查規則
設定好後,如果填寫不符合格式的手機號碼,會彈出視窗提醒填寫人需正確填寫;而如果已經正確填寫,則不會進行任何動作,下圖為執行效果。
圖4. 手機號碼規則的執行效果
進階應用 - 利用SQL語法、Action Flow檢查欄位
除了快速點選現成的檢查規則,也可以使用SQL語法來進行與資料庫相關的檢查。例如,針對Email欄位,可檢查資料庫中是否已有此筆Email帳號,效果如下:
設定說明:
在使用者填寫Email後,下SQL到資料庫計算與此Email相同的有幾筆,如果是0筆,表示資料庫尚未有此Email,如果大於0筆則表示資料庫已有人註冊此Email,必須彈出視窗提醒使用者要換一組電子郵件。
要做到判斷不同情況下執行不同的動作,可以在「輸入檢查」大類底下選擇Action Flow,自行組裝要執行的流程,執行時機可依個別需求設成「欄位修改時」或「存檔前」。
Action Flow的流程可設計成如下圖,使用的Action有:Select Query、Condition、Assign Variables。
1. 使用Select Query取得資料庫有幾筆Email與輸入框中的相同,語法如圖中右上方SQL編輯器視窗。
2. 接著,使用Condition (圖7菱形Action) 進行SQL結果的判斷,SQL結果是從下圖右方的「資料規格」樹拖拉至條件欄位中。
- 若SQL的結果數量小於1,表示資料庫中沒有找到輸入框所填的Email,可以讓使用者繼續填寫,不需做任何動作。
- 若SQL的結果數量大於等於1,表示資料庫中有找到輸入框所填的Email,需告知填寫人此Email已註冊過,使用Assign Variables來彈出訊息。
變化應用 - A欄位的值改變時,B欄位與C欄位也隨之改變
接下來要介紹的變化應用並不算在進行輸入檢查,而是善用「欄位修改時」這個時機以及Action Flow來做到自動輸入,減少填寫人需填寫的內容。
效果如下,即當A欄位的值改變時,B欄位與C欄位也隨之改變:
圖9. 調整「時段」時,起始時間與結束時間會跟著改變「時段」下拉選單有三個時段:上午、下午、整天。
- 當選擇「上午」時段時,「開始日期」、「結束日期」會自動代入今日的09:00-12:00
- 當選擇「下午」時段時,「開始日期」、「結束日期」會自動代入今日的13:30-18:15
- 當選擇「整天」時段時,「開始日期」、「結束日期」會自動代入今日的09:00-18:15
在此應用中,輸入檢查執行的時機建議選擇在「欄位修改時」執行,才能達到「時段」選完後,自動代入相對應的起始與結束時間。
設定說明:
點選「時段」欄位,新增「輸入檢查」底下的Action Flow,利用Action Flow設計出以下的流程:
圖10. 「輸入檢查」Action Flow設計流程1. 利用「Condition」來產生「上午」、「下午」、「整天」多條支線。
圖11. 流程步驟:Condition - 判斷所選擇的時段2. Assign Controls是用來改變某欄位的各種控制項屬性,例如:文字顏色、顯示/影藏、唯讀、欄位值。在此則是利用「Assign Controls」來指定特定的時間給「開始日期」、「結束日期」欄位,例如:當填表人選擇「上午」時,開始時間欄位指定值為今天的09:00,結束時間欄位指定值為今天的12:00。
圖12. 流程步驟:Assign Controls - 指定開始與結束時間完成以上步驟,就能做到下拉選單選完後,自動輸入開始與結束時間。
更多Smart平台資訊
還沒有接收到聯銓最新消息?點選「註冊」加入會員,最新消息第一時間寄信通知您!