Smart eBuilder 快速設計複雜表單

 

前言:

至今企業仍有許多作業流程仍未進入資訊應用系統,大多都是使用者透過Microsoft Word設計表格或表單,再列印出來成為企業作業流程中表單,如以下案例來說,某一食品供應商公司,和廠商採購原料時,把廠商提供原料的資料以手動填寫的方式至表格中,而使用者每次在填寫表格時每一個欄位資訊都必需填寫非常沒效率且容易出錯,日後表格、單據愈來愈多,使用者要對表單的查詢與維護並不易,且紙本作業並不易保存,如何快速開發表單因應使用者需求也成為導入開發工具的重點,接下來我們透過Smart eBuilder建置上述表單需求。

 

開發工具介紹:

Smart eBuilder HTML5C#為企業打造全新的開發環境,只要設定規格即可產生輸入/查詢功能,透過豐富的樣板及直覺設計界面,讓IT人員不需要再為了畫面的編排煩惱,提供方便的表單精靈,不需要撰寫太多的程式碼,立即快速設計複雜表單。

除了 Server端需安裝軟體外,開發設計端與使用者端均不必安裝任何軟體,只需要網路及瀏覽器進行登入到Smart-eBuilder的服務環境,進行開發設計與瀏覽工作。

 

接下來以Smart eBuilder如何設計食品加工業需要的原料規格書表單作為範例說明:

原料規格書表單包括五大功能,如以下做介紹:

一、        基本資料記錄原物料來源及檢驗資料

二、        包裝配送&驗收資料:紀錄該貨物的包裝規格、配送及驗收相關資料。

三、        報告檔案:紀錄上傳該貨物的相關[檢驗報表]相關檔案。

 

四、        製造商&進口商&加工廠:紀錄廠商相關資料。

五、        上傳圖片:紀錄上傳該貨物的相關圖片檔。


 

需求說明:

我們要為表單欄位設計填單功能,目的是為了增加使用者填寫表單便利性,如下:

a.          [規格書編號]欄位每次填單時系統自動提供一組唯一序號

b.         [材積]欄位:依據使用者於新增表單中輸入外包裝長、外包裝寬、外包裝高欄位值,自動計算材積欄位值。

c.          [圖片]欄位:提供給使用者上傳欄位,並顯示使用者上傳的圖片,預覽上傳的圖片是否正確。

d.         [原料貨號]欄位:開新視窗供使用者挑選原料貨號並帶出廠商、地區品種等相關資料寫入表單對應欄位

e.          CheckBox選項基改原料基改成份基改訊息等欄位採用勾選方式填寫

f.            [編輯日期]欄位自動帶入填單日期並且不可被使用者進行修改


 

前置資料準備:

主資料表

關聯資料表

參考欄位

 

ISO(原料主檔)

PRODUCT(產品)

CNAME(產品名稱)

SUPPLIER(供應商)

ABBR(供應商名稱)

 

ISO_PICTURE(圖檔)

 

 

ISO(原料主檔)的欄位:

Column Name

Data Type & Length

原料貨號

NVARCHAR(50)

廠商代碼

NVARCHAR(50)

材積

float

規格書編號

NVARCHAR(50)

編輯日期

NVARCHAR(50)

基改

NVARCHAR(20)


 

ISO_PICTURE(圖檔)的欄位:

Column Name

Data Type & Length

貨號

NVARCHAR(50)

廠商代碼

NVARCHAR(50)

圖片一

NVARCHAR(50)

圖片說明一

NVARCHAR(50)

 

PRODUCT(產品)的欄位:

Column Name

Data Type & Length

CODE(原料貨號)

NVARCHAR(50)

CNAME(產品名稱)

NVARCHAR(50)

 

SUPPLIER(供應商)的欄位:

Column Name

Data Type & Length

CODE(供應商代碼)

NVARCHAR(50)

ABBR(供應商名稱)

NVARCHAR(50)

 

規格設計:

1.          請進入Smart-eBuilder系統,新增輸入頁面,並先定義頁面名稱為[原料規格書]

2.          接下來請[挑選樣版],並選擇資料庫:[上述的前置資料],設定完成後

3.          接下來要選擇表單需要的資料表及欄位,透過表單規格精靈的可快速設定,若有多個資料表時系統會自動取各資料表的關係,並且帶出關聯資料表讓設計者挑選,如下圖中主資料表選取ISO,系統自動帶出相關明細檔及關聯檔。

 

4.          設定完成後系統自動產生[規格樹]如下我們可以看到ISO關聯資料表參考欄位及相關欄位


 

接下來[依照上方需求說明]的描述以設計功能

5.          規格書編號欄位D字母為開頭+依據填單日期(民國年)編碼系統在存檔後才會增加一組規格書編號例如D_1060123001

Step1. 首先至[資料規格][ISO]資料表中欄位節點,新增虛擬欄位[date1]欄位型別為string


 

Step2. 新增[date1]動態初值功能當使用者新增表單時系統會觸發欄位動態初值中撰寫Script的事件

Scriptreturn ToText(CurrentDateTime(),"eeMMdd");

Script說明Smart eBuilder提供多類函式供設計者使用上述取出目前系統日期時間,且指定顯示Mask1060123可使用CurrentDateTime()函式取出執行表單日期並透過ToText()函式轉換成需要的格式另外Smart eBuilder也支援JavaScript語法並可搭配系統中提供的函式一併使用

Step3. 系統管理\自動編號管理→新增自動編號的相關設定:

ü   名稱:顯示名稱

ü   類型:

n   固定字串:設定固定的字串。

n   欄位值:利用欄位值來做自動編號。

【自訂自動編號的類型】

自動編號功能說明:設計者可在此新增自動編號,方便日後表單設計重覆使用,編號類型有三種方式:樣式、欄位值固定字串同時可搭配不加入編碼功能彈性使用

 

標題

說明

樣式

由系統提供的日期樣式可供選擇,例:141001

欄位值

可搭配在表單上所使用的欄位名稱為自動編號的值,設定方式需設為 [欄位名稱]

固定字串

輸入字串,則系統會自動組出編碼: : RE_


 

Step. 回到原料規格書頁面設計\資料規格\規格書編號欄位,設定欄位動態初值\自動編號功能,相關設定如下:

自動編號:自動編號的名稱

執行時機:後編

【自動編號設定畫面】

【依據欄位自動編號設定產生序號至[規格書編號]欄位中】

 

6.          [材積]欄位:依據使用者於新增表單中輸入外包裝長、外包裝寬、外包裝高欄位值,自動計算材積欄位值。

Step1. 選取資料規格\[材積]欄位,設定[動態初值\前端Script]

Scriptreturn Round2($外包裝長$*$外包裝寬$*$外包裝高$*0.0000353*100)/100;

Script說明欄位值若在Script區域進行運算撰寫方式為$欄位名稱$

Step2. 設定依據欄位為外包裝長、外包裝寬、外包裝高三個欄位

功能說明:當使用者變更[外包裝長/外包裝寬/外包裝高]欄位的值,系統自動計算[材積]欄位值。

【變更資料前】

[外包裝長]欄位值,從150變更為250,系統重新計算[材積]欄位值

 

7.          [圖片]欄位:提供給使用者上傳檔案檔案上傳預設儲存路徑為Smart eBuilder站台UploadImage資料夾中此路徑可自行修改設定

Step1. 選取[圖片]欄位,設定控制項類別為FileUploader

Smart eBuilder提供多種[控制項類別]供設計者使用,設計者可決定該欄位於頁面上所要呈現出來的樣式,如:[下拉式選單ComboBox][上傳檔案FileUploader]等功能,而此欄位所設定[控制項類別]為提供使用者上傳圖片檔案。

【設定欄位屬性/控制項類別為[FileUploader]

 

Step2.接下來,請至[ISO_PICTURE]資料表中欄位節點,新增運算欄位。

Step3. 設定[PIC]計算欄位相關功能:

上述步驟中的[圖片]欄位在表單中提供使用者進行上傳圖片檔案,當使用者上傳圖片後,系統會自動將圖片路徑傳值給[PIC]存檔後圖片會呈現在畫面上提供使用者確認預覽上傳的圖片是否正確。

運算欄位的相關設定:

型別:String

運算公式:return $圖片$;

SQL運算公式:$圖片$

依據欄位:$圖片$

控制項類別:Image

 

 

【存檔資料後】

 

8.          [原料貨號]欄位:開新視窗從原料主檔中供使用者挑選原料貨號並帶出廠商、地區品種等相關資料寫入表單對應欄位

Smart-ebuilder提供[Foreign key]供設計者設定資料表的欄位與其他資料表的欄位建立關聯以協助使用者輸入資料,且[傳值欄位]自動將設定的參考欄位值輸入至指定的欄位,除了增加表單輸入的便利性外亦可避免輸入錯誤,故當使用者新增\修改表單時,利用開新視窗及欄位傳值以協助使用者新增\修改資料。

Step1.選取[原料貨號]欄位屬性,設定Foreign key來抓取資料庫中資料表的欄位值,並設定Foreign key的欄位傳值(其他參考欄位)以達到將欄位的資料回傳至頁面中對應的欄位。

 

當使用者於表單新增資料時,開啟[原料貨號]Foreign key輔助視窗並選擇要填入的貨號後其他相關欄位值會一併回傳至頁面上的欄位中。如下圖

Foreign key視窗】

【若使用者於Foreign key視窗,點選某筆資料,系統自動將該筆欄位資料回傳至頁面中對應欄位中】

 

9.          IT人員可依照使用者需求調整欄位屬性,如以下範例功能介紹,

            i.            CheckBox選項:基改原料、基改成份、基改訊息等欄位採用勾選方式填寫,

[控制項類別]調整成[Checkbox]以提供使用者輸入,如下圖

說明:Smart-ebuilder提供多種[控制項類別],如:[下拉式選單ComboBox]

[勾選Checkbox]等功能,而此範例客戶需要勾選的效果,故設定[控制項類別]Checkbox

【更改[控制項類別]前】

 

          ii.            [編輯日期]欄位:自動帶入填單日期並且不可被使用者進行修改。

唯讀:當新增/編輯資料時,使用者只能閱讀無法編輯此欄位資料。

說明:Smart-ebuilder提供豐富的[欄位屬性],如:[必須輸入]

[唯讀]等功能,而此範例客戶需要唯讀的效果,故設定[欄位屬性]為唯讀,

故使用者新增\編輯資料時,若欄位為唯讀會呈現灰色底色,如下圖左的欄位可編輯、右圖的欄位無法編輯(唯讀狀態)

 

版面設計:

1.      將資料來源/[ISO]資料表中欄位節點以滑鼠右鍵按住不放→拖曳至中間空白區域,系統將會以直向方式做自動排版。

 

2.      請切換至[大綱]頁籤,針對該block去設定[Column Count]的數值,

您即可達到每列以[多欄位數]的方式做排版,系統會依指定欄位數自動分配顯示,讓畫面中的物件較整齊。


 

3.      若您要[手動調整][局部調整]的版面layout,參考下圖說明:

【若手動調整[產季][原料名稱]欄位的layout位置】

【以上圖為例,將[原料名稱]欄位的layout位置,手動調製至[藍色框]layout位置】

[原料名稱]欄位的layout位置,即成功調整layout位置】


 

4.      若您想針對【每個block】去設計版面的layout,就要使用多個Block來調整layout,因【每個block】的版面layout為獨立,並不會互相影響,如下圖為例,若您要設計此排版,您只用一個block,並無法達到如下圖中複雜的Layout

 

5.          [控制項][Commandbar物件],提供使用者針對資料做[新增、編輯、刪除、存檔]等功能。

 

6.          [控制項][TabControl物件],提供設計者更多排版更多排版的方式,

例如:當頁面排版不下時,可在TabContorl物件中新增多個頁籤放置不同物件,

如下圖範例,在TabControl物件中新增多個頁籤:基本資料、包裝配送&驗收條件、報告檔案、製造商/進口商&加工廠、上傳圖片,各別放置所需要的物件排版。

 

 

 

【點選[TabControl物件]中工具列以新增頁籤】

 

【點選[TabControl物件]中工具列後】

 

【修改時,編輯[TabControl物件]中頁籤名稱】

 

【修改後,[TabControl物件]中頁籤名稱的結果】


 

在將所需要的欄位物件排版完成後,範例執行結果如下:

當使用者於新增表單時,[編輯日期][編輯者]欄位為系統會自動抓取[目前系統日期][登入使用者],並透過[原料貨號]Foreign key以協助使用者輸入資料,如下圖


 

若使用者更改[外包裝長、外包裝寬、外包裝高]欄位的值,系統會重新計算[材積]的值。

 

提供使用者上傳檔案至Smart-ebuilder


 

提供使用者以記錄該表單中相關資訊(:備註欄)

 

提供使用者以上傳圖片檔案,並直接預覽圖片結果。

 

結論:

透過Smart-eBuilder系統可以協助企業快速建置輸入系統,提升 IT 設計表單的效率,經由簡便的設定,如:動態初值、輸入檢查、動態顯示/隱藏/唯讀、格式化條件、Drill-Down…等功能,可以提供 User複雜表單的需求,協助User快速打單,提昇企業作業流程的整體效率。