超豐富的「欄位屬性」:輸入檢查應用篇,靈活設定檢查規則
Judy 2022-10-20
超豐富的「欄位屬性」:輸入檢查應用篇,靈活設定檢查規則

  在「超豐富的「欄位屬性」:客製欄位細節,讓填表體驗更順暢!」中,我們介紹了Smart平台的欄位屬性,其中,輸入檢查用於檢查填寫人是否有依照規定的格式填寫資料,檢查規則可由表單設計者自行定義,本篇將更進一步舉例在Smart eBuilder輸入檢查的基本、進階及變化應用。

  Smart平台已將常用的規則做成現成的屬性供直接點選使用,同時也開放多元的訂定規則方式,例如:Action Flow、撰寫SQL語法及Script、連接REST…等。本篇的基本應用會介紹使用點選的方式快速設定輸入檢查,進階應用則會舉例運用Action Flow與SQL語法來檢查欄位,最後將再介紹一個常見的變化應用,即某個欄位填寫後,其他欄位自動帶入資料。

輸入檢查可使用的屬性 圖1. 輸入檢查可使用的屬性

  在Smart平台,透過簡單的設定就可以在填寫人送出資料前,先行檢查填寫格式是否有誤。下圖為輸入檢查可以使用的屬性,比如String、E-mail、身分證、密碼、手機號碼、市內電話、範圍起始/截止...等欄位,都已經有預設好的輸入檢查規則可以直接使用。

輸入檢查可以使用的屬性 圖2. 輸入檢查可以使用的屬性

設定說明:
  以手機號碼欄位舉例,選擇「輸入檢查」底下的「手機號碼」,便可將手機號碼規則加到欄位上,並且可選擇檢查時機「欄位修改時」或「存檔前」,設定方式如下:


設定「手機號碼」檢查規則 圖3. 設定「手機號碼」檢查規則

  設定好後,如果填寫不符合格式的手機號碼,會彈出視窗提醒填寫人需正確填寫;而如果已經正確填寫,則不會進行任何動作,下圖為執行效果。


手機號碼規則的執行效果 圖4. 手機號碼規則的執行效果

  除了快速點選現成的檢查規則,也可以使用SQL語法來進行與資料庫相關的檢查。例如,針對Email欄位,可檢查資料庫中是否已有此筆Email帳號,效果如下:

檢查資料庫裡是否有此Email帳號 圖5. 檢查資料庫裡是否有此Email帳號

設定說明:
  在使用者填寫Email後,下SQL到資料庫計算與此Email相同的有幾筆,如果是0筆,表示資料庫尚未有此Email,如果大於0筆則表示資料庫已有人註冊此Email,必須彈出視窗提醒使用者要換一組電子郵件。
  要做到判斷不同情況下執行不同的動作,可以在「輸入檢查」大類底下選擇Action Flow,自行組裝要執行的流程,執行時機可依個別需求設成「欄位修改時」或「存檔前」。

「輸入檢查」Action Flow設定 圖6. 「輸入檢查」Action Flow設定

Action Flow的流程可設計成如下圖,使用的Action有:Select Query、Condition、Assign Variables。

1. 使用Select Query取得資料庫有幾筆Email與輸入框中的相同,語法如圖中右上方SQL編輯器視窗。

流程步驟:Select Query 圖7. 流程步驟:Select Query

2. 接著,使用Condition (圖7菱形Action) 進行SQL結果的判斷,SQL結果是從下圖右方的「資料規格」樹拖拉至條件欄位中。

  • 若SQL的結果數量小於1,表示資料庫中沒有找到輸入框所填的Email,可以讓使用者繼續填寫,不需做任何動作。
  • 若SQL的結果數量大於等於1,表示資料庫中有找到輸入框所填的Email,需告知填寫人此Email已註冊過,使用Assign Variables來彈出訊息。
流程步驟:Condition,判斷此Email是否註冊過 圖8. 流程步驟:Condition,判斷此Email是否註冊過

  接下來要介紹的變化應用並不算在進行輸入檢查,而是善用「欄位修改時」這個時機以及Action Flow來做到自動輸入,減少填寫人需填寫的內容。

效果如下,即當A欄位的值改變時,B欄位與C欄位也隨之改變:

調整「時段」時,起始時間與結束時間會跟著改變 圖9. 調整「時段」時,起始時間與結束時間會跟著改變

「時段」下拉選單有三個時段:上午、下午、整天。

  1. 當選擇「上午」時段時,「開始日期」、「結束日期」會自動代入今日的09:00-12:00
  2. 當選擇「下午」時段時,「開始日期」、「結束日期」會自動代入今日的13:30-18:15
  3. 當選擇「整天」時段時,「開始日期」、「結束日期」會自動代入今日的09:00-18:15

  在此應用中,輸入檢查執行的時機建議選擇在「欄位修改時」執行,才能達到「時段」選完後,自動代入相對應的起始與結束時間。

設定說明:

點選「時段」欄位,新增「輸入檢查」底下的Action Flow,利用Action Flow設計出以下的流程:

Action Flow設計流程 圖10. 「輸入檢查」Action Flow設計流程

1. 利用「Condition」來產生「上午」、「下午」、「整天」多條支線。

Condition - 判斷所選擇的時段 圖11. 流程步驟:Condition - 判斷所選擇的時段

2. Assign Controls是用來改變某欄位的各種控制項屬性,例如:文字顏色、顯示/影藏、唯讀、欄位值。在此則是利用「Assign Controls」來指定特定的時間給「開始日期」、「結束日期」欄位,例如:當填表人選擇「上午」時,開始時間欄位指定值為今天的09:00,結束時間欄位指定值為今天的12:00。

Assign Controls 圖12. 流程步驟:Assign Controls - 指定開始與結束時間

完成以上步驟,就能做到下拉選單選完後,自動輸入開始與結束時間。

還沒有接收到聯銓最新消息?點選「註冊」加入會員,最新消息第一時間寄信通知您!

超豐富的「欄位屬性」:客製欄位細節,讓填表體驗更順暢! 技術文章

超豐富的「欄位屬性」:客製欄位細節,讓填表體驗更順暢!

表單製作神器!程式小白輕鬆設計請假單、問卷調查等資料輸入表單 技術文章

表單製作神器!程式小白輕鬆設計請假單、問卷調查等資料輸入表單

Smart Platform結合企業流程,決策管理全面升級↑ 技術文章

Smart Platform結合企業流程,決策管理全面升級↑

文章分類:#聯銓資訊 #Smart平台 #Smart eBuilder #表單設計 #表單輸入 #電子表單 #輸入檢查 #Action Flow

聯絡

我們

Alternate Text