Mobile 表單在Smart eBuilder 設計

圖:聯銓資訊 文:蔡幸雪

 前言

        在企業資訊應用系統中,IT 部門原本所設計的輸入表單作業,隨著行動裝置的普及,越來越被要求是否可在手機上運行,甚至整合手機提供的功能,像是手機通知訊息、通訊錄或是掃QRCode、錄影拍照上傳檔案、打卡取得GPS位置,以及快遞單應用的在手機簽名效果,將所想到的應用整合到表單輸入介面上,然而開發完的系統必需運行在不同的系統上(如:android、ios),甚至建立公司自己專屬的APP都是IT人員的一大考驗。

在本文章中將為您介紹如何透過 Smart eBuilder 跨平台工具從無到有快速開發表單維護作業並且整合手機提供的功能。

 手機應用於表單內容介紹 觀看影片 

在Native表單,提供了新增/修改/刪除資料的功能,另外也搭配整合手機的功能,像是手機通訊錄或是掃QRCode、錄影拍照上傳檔案、以及快遞單應用的在手機簽名效果,將所想到的應用整合到表單輸入介面上,如下多圖介紹:

 開發工具介紹

        Smart-eBuilder 是一套企業表單軟體開發工具並整合了跨平台的效果。主要以規格主導(Model Driven),配合豐富的樣版、表單精靈及多樣化的元件,讓您可以快速的做到主要的功能,再以動態規格設定並搭配SQL整合完成複雜細節,大幅減少手工寫程式的時間。
除了 Server端需安裝軟體外,開發設計端與使用者端均不必安裝任何軟體,只需要網路及瀏覽器進行登入到Smart-eBuilder的服務環境,進行開發設計與瀏覽工作。

 前置資料準備

Native表單是由單個資料表組成,其相關如下表:

 規格設計

  1. 透過資料表精靈匯入主資料表 [Staffs],並抓取欄位、型別、欄寬。
    ※註:若有多個資料表時系統會自動抓取已於資料庫設定好各資料表的關係,帶出關聯資料表讓設計者挑選。

  2. 透過上一步的資料表精靈,系統自動設定欄位ForeignKey功能,並將匯入資料表中所選擇的欄位,記錄在左邊的規格樹,使用者在執行表單時,可以透過挑選或下拉方式進行打單,避免使用者輸入錯誤,設定結果如下圖所示:

  3. 針對 [EmployeeID] 欄位設定掃描QR Code,主要是搭配輸入輔助,選擇 QR Code 方式。

  4. 針對 [EmployeeName] 欄位設定整合手機通訊錄,主要是搭配輸入輔助,選擇 聯絡人 方式。

  5. 針對 [PhotoPath] 欄位指定為上傳檔案類型,主要是搭配 控制項類別:FileUploader。

  6. 針對 [地址] 欄位設定整合手機 GPS,主要是搭配輸入輔助,選擇 GPS 方式。

  7. 針對 [Autograph] 欄位指定為簽名類型,主要是搭配 控制項類別:SignaturePad。

 版面設計

    系統有提供豐富的 [控制項] 及並套用豐富的樣版,在樣版上已預先放置 Commandbar 物件,接著在資料頁籤將 [Staffs] 資料表的欄位拖曳至 [Block] 物件中,系統會依指定欄位數自動分配顯示,讓畫面中的物件較整齊。

    ※註: 在版面設計上,除了系統原有提供的豐富樣版可套用外,亦可搭配多樣化的物件,透過拖拉設計調整呈現給使用者看的版面,還可再進行公司的樣版自訂變成公版,讓其他設計者套用。

 建立專屬的APP

    在Andorid產生器的畫面上,進行Andorid版本及細部設定後按建置,系統會產生apk檔案,可讓使用者下載安裝或將 apk 檔案透過 Google Play上架網頁進行上架。

 結論

        以往開發APP門檻較高,所以不得已只好選擇外包開發,而未來的維護是要委外還是自己維護? 透過Smart-eBuilder系統在商業邏輯變化上可以直接在規格設定,如:動態初值、輸入檢查、動態顯示/隱藏/唯讀、資料值顏色管理、Drill-Down功能等,另外可達到mail派送功能,不管是表單被修改還是刪除時均可寄發mail主動通知相關人員。聯銓以 .NET 及HTML5為您打造一套可以簡單上手,快速開發,容易維護及管理的跨平台開發環境,讓您開發的應用軟體立即升級到跨瀏覽器、跨裝置,滿足企業未來需求。