E-cology8.0新表單設計器操作指南

1、 表單設計器1. 概述表單設計器是系統(tǒng)提供的一種基于Html語言的表單設計模塊，除了可以滿足用戶對表單樣式的需求之外，還彌補了圖形化表單中無法支持多瀏覽器、加載速度慢等問題。在表單設計器中可以實現(xiàn)以下的功能· 用戶可以象在Excel中一樣自由繪制表格，這些繪制的表格可以在各個節(jié)點甚至不同的系統(tǒng)之間調(diào)用，而且可以為手機版設計獨有的顯示樣式；· 可以在表格中插入圖片、鏈接甚至是一段代碼程序，以滿足用戶對表單功能的特殊要求；· 與其它表格模式不同除了設置字段的編輯屬性之外，還可以給每個字段都添加屬性，可以是一個簡單的計算公式，也可以是復雜的邏輯運算，甚至可以與SAP等外

2、部系統(tǒng)相結合；· 而且在繪制明細表的時候，不用象模板模式一樣考慮明細表由多少列，主表有多少列，在表單設計器中主表的設計和明細表的設計是分開的，只是顯示的時候才會放在一起顯示，列數(shù)行數(shù)互不影響。2. Html模板設計2.1. 表單格式我們選擇創(chuàng)建Html模板之后顯示如圖1所示圖1· 在模板編輯頁面我們看到了Excel編輯器一樣的設計頁面，我們可以在上面直接繪制表格，注意表格中需要為字段的顯示名和字段本身分別留出對應的單元格；· 在表格設計器中有按鈕，點擊后可以編輯單元格的屬性，先選中單元格，在點擊后顯示如圖2所示，我們可以和Excel表格一樣設定單元格的屬性，包括了

3、單元格內(nèi)容的顯示方式、對齊方式、邊框和底色等；圖2· 在表格設計器中還有按鈕，點擊后可以選擇讓單元格內(nèi)容是否折行顯示；· 其它的一些功能都是畫表格的功能，當鼠標移動到快捷按鈕上的時候會顯示按鈕的名稱。 2.2. 添加主字段在表格的右側顯示了主字段的顯示名和字段，· 先在繪制好的表格中選中某一個單元格，然后將右側對應的顯示名或字段雙擊后可以添加到指定的單元格中，如圖3所示；· 已經(jīng)添加過的顯示名或字段會變?yōu)榛疑?#183; 如果需要刪除已經(jīng)添加的字段，同樣還是先選中單元格，再點擊頂部的快捷按鈕，就可以把這個字段清除了；· 添加了字段我

4、們可以在快捷菜單中選擇需要的字體樣式，包括了字體、顏色、加粗等，如果需要重新設計字體樣式只要點擊按鈕，就可以把我們設計的顯示樣式給清除了；· 點擊按鈕，除了會刪除字段外，還會將單元格的設置屬性，包括字體、顏色、加粗、表格線框、背景色等全部清除。圖32.3. 添加明細字段如果表單有明細字段的話，我們將Html設計器頂部菜單切換到明細表，顯示如圖4所示，先要在主表中選擇將明細表放在哪一行，然后點擊【明細表】，選擇要添加的明細表，就可以將明細表添加到Html模板中了，添加明細表的時候注意，同一行中不能有其它字段了，包括主表顯示名、字段、節(jié)點意見等。圖4雙擊剛剛添加的明細表，如圖5所示，我們

5、需要設置明細表的詳細信息了，這里看到的表格行列與主字段頁面看到的行列無關圖5· 添加明細字段的時候注意，顯示名和字段需要縱向排列，明細字段盡量放在同一行中顯示，如圖6所示，如果這里設計成折行的話，將來用戶在前端使用的時候看到的也是折行顯示的，非常不方便；圖6· 明細字段需要表頭表尾標識進行框定，只有這個標識內(nèi)的行才可以在前臺通過添加刪除按鈕增加明細行，所以如圖6所示，需要先選中字段那一行，再點擊上方的【表頭標識】按鈕，就會在顯示名上方添加一個表頭標識，再次選中字段那一行，添加【表尾標識】，結果如圖7所示圖7· 在圖5所示的明細表詳細設計頁面右下角有明細表的屬性選項

6、，用來控制當前節(jié)點是否允許添加明細內(nèi)容等；· 如果有多個明細表的話，直接點擊上方菜單【明細表1】左右箭頭可以直接切換到其它的明細編輯頁面。2.4. 節(jié)點意見在圖3所示的添加字段的頁面，我們將主表字段頁面切換到流程節(jié)點，顯示如圖8所示，我們可以如添加字段的方法一樣，將節(jié)點的簽字意見添加到表單中去。圖83. 字段屬性1、添加了字段之后前端的用戶需要能夠操作這些字段，所以點擊編輯菜單的【字段屬性】我們需要給每個字段設置查看、編輯和必填屬性，如圖9所示，選中字段后選擇對應屬性即可，明細字段一樣的操作方法；圖92、除了查看、編輯、必填三個基本屬性之外，我們在Html模板中可以對單個字段添加Sq

7、l操作，這也是Html模板表單的一大特色，如圖10所示，在后面第六節(jié)中介紹了一些使用方法。圖103、在字段屬性中還有一個【更多屬性】按鈕，點擊后顯示如圖11所示，這里是針對SAP集成進行的字段屬性設置。圖114. 插入內(nèi)容1、為了美化Html表單，我們可以點擊Html模板編輯器的菜單【插入】，顯示如圖12所示，圖12· 我們可以在指定的位置插入圖片，如圖13所示，Ø 單元格：在選定的單元格中插如圖片；Ø 背景圖：整個Html模板表單的背景圖片，不局限于單元格了；Ø 浮動：插入的圖片會在表單中浮動；Ø 圖片來源可以分為本地和網(wǎng)絡。圖13·

8、; 點擊【鏈接】按鈕后我們可以插入一個鏈接地址，用戶在前端訪問這個表單的時候點擊可以到指定的鏈接地址；· 點擊【代碼】是在Html模板中插入一段js代碼，完成某個動作。5. 模板管理1、最后回到模板管理頁面，如圖14所示，在這里我們直接對流程中所有的節(jié)點進行Html顯示模板、打印模板及Mobile模板進行設計。圖14· 使用左側的模板導入模板導出功能，我們可以將設計的Html模板導出后在其它系統(tǒng)中進行導入；· 點擊節(jié)點后的同步按鈕，顯示如圖15所示，選擇需要同步的節(jié)點，可以將當前節(jié)點的模板設計同步到其它節(jié)點中，注意，這里選擇完節(jié)點之后，必需回到圖1所示的表單編輯頁

9、面點擊【保存】之后才會同步，否則是不會同步的。圖152、對于不擅長Html語言的用戶來說，初始化模板是一個好用的工具，它可以幫助用戶快速設計一個美觀的Html表單模板· 點擊【初始化模板】按鈕后顯示如圖16所示，我們在這里直接設置表單字段的編輯、必填屬性，最重要的是不要忘記設置每行顯示幾個字段；圖16· 設置完成后點擊【下一步】后顯示如圖17所示，我們選擇Html模板的配色，選中需要使用的顏色后點擊【完成】，一個Html模板就制作完成了，非常方便。圖176. 實戰(zhàn)案例1、概述為了更加清晰了解表單設計器的功能，將通過以下3個實例來了解表單的設計步驟。2、案例一案例一介紹的是一

10、個最簡單的留言流程，我們通過初始化模板的方式來自動創(chuàng)建一個Html表單，文檔介紹的是模板的制作過程，表單字段管理、節(jié)點設置、出口設置這里就不做介紹了，詳細的設計步驟見文檔自動生成Html模板。通過文檔的學習，我們看到使用初始化模板的方式就算不懂Html語言，不會設計表格都沒有關系，我們只要簡單的兩步就可以設計一個美觀的Html顯示模板。3、案例二案例二介紹的是一個發(fā)文流程的顯示模板，通過文檔我們可以了解以下內(nèi)容· 如何在表單設計器中手動繪制表格；· 如何添加字段及設計字段的編輯屬性；· 如何將表單引用到其它節(jié)點中；· 顯示模板和打印模板的區(qū)別。詳細的設計

11、步驟見文檔手動創(chuàng)建Html模板。4、案例三案例三介紹的是一個資產(chǎn)采購流程的顯示模板，通過文檔我們可以了解以下內(nèi)容· 如何在表單設計器中添加明細表；· 如何在表單設計器中進行字段間的計算；詳細的設計步驟見文檔Html模板的擴展設計。7. 字段屬性案例1、金額轉換功能在涉及財務方面的流程經(jīng)常會用到兩種樣式，一個是金額千分位顯示，另外一個是金額大寫顯示，所以在設置Html顯示模板的時候需要進行設置。在Html顯示模板編輯頁面中，選中需要千分位顯示或者金額大寫顯示的字段進行設置，當然這個字段是有要求的。· 必需是單行文本框-浮點類型的字段；· 字段在表單中必需是

12、只讀，不能是可編輯；· 明細字段不支持此功能。在圖18所示的字段屬性設置頁面，我們需要將【總價】這個字段進行金額轉換顯示圖18· 首先點擊【字段賦值設置】，會在下面的白框中增加一個公式doFieldMath("  ")；· 將光標點中公式的兩個引號中間，然后雙擊表單字段中選擇要顯示為金額大寫的字段；· 在顯示方式中選擇【金額轉換顯示】Ø 比如圖示的例子，我要在“總價（大寫）”這個字段以財務大寫的方式進行顯示，所以我在圖5-1中選中的是“總價”字段進行【字段屬性】設置；Ø 總價（大寫）字段顯示的數(shù)值是哪里來

13、的呢，選擇的就是“總價”這個字段，簡單說就是將將“總價”這個字段的數(shù)值在“總價（大寫）”字段中以財務大寫的方式進行顯示；Ø 注意，這里不能選擇“總價（大寫）”本身哦，必需選擇其它字段；添加的字段支持計算公式，如圖19所示圖192、日期時間計算在使用系統(tǒng)的時候，我們經(jīng)常需要對時間進行計算，這個是在一般模式或者圖形化模式中非常困擾管理員的一件事情，但是在Html表單中就很好的解決了這個問題。同樣，我們先選擇一個存放時間計算結果的字段，點擊右鍵進入【字段屬性】后選擇【時間日期計算】，顯示如圖20所示，時間的計算都是后面的時間減去前面的時間得到一個值，所以如圖20所示，應該就是到達的日期時間

14、減去出發(fā)的日期時間，所以我們就在公式的雙引號中添加“出發(fā)日期”，然后點擊【插入日期時間合并符】，再點擊“出發(fā)時間”，這樣出發(fā)的日期時間就被合并了，然后繼續(xù)輸入減號，再按前面的辦法輸入“到達日期”【插入日期時間合并符】“到達時間”，這樣一個計算公式就做好了，最終結果如圖21。圖20圖21除了以上介紹的最常用的時間計算方法，還可以做如下一些時間計算· 表單中的兩個日期進行計算doFieldDate("$日期1$ $datetime$時間1$日期2$ $datetime$時間2$")· 表單中的日期時間與系統(tǒng)當前日期的某個時間進行計算，$currentdate

15、$是指系統(tǒng)當前日期，需要說明的是只能取系統(tǒng)日期，沒有辦法取系統(tǒng)時間doFieldDate("$日期1$ $datetime$時間1$currentdate$ $datetime$時間2$")· 系統(tǒng)日期與表單日期進行計算doFieldDate("$日期1$ $currentdate$ ")· 系統(tǒng)日期與表單某個整數(shù)進行計算，必需是整數(shù)，不能是浮點數(shù)doFieldDate("$currentdate$ + $整數(shù)1$")如果設置了一般時間我們還可以設置時間的計算是否跳過非工作時間，只要將圖5-4中的【日期計算排除非工

16、作日】即可。8. 插入代碼案例1、概述在第四節(jié)插入內(nèi)容中我們了解到可以在模板中插入一些代碼，用來執(zhí)行一些操作或完成一些動作。注：以下說明中看到的代碼是截圖，如果需要使用的話可以到本文檔的附件中提取，附件號碼與圖片號碼一致。2、字段聯(lián)動案例明細表中當某字段值為相關值時，選擇框字段自動為是或否，如圖22所示，當“總分”字段小于15的時候，選擇框字段顯示“否”，“總分”字段大于等于15的時候，選擇框字段顯示“是”。圖22假設“總分”字段的ID號為6407，選擇框字段的ID號為6408，實際操作過程中字段的ID號可以在Html編輯頁面中查看。圖233、時間腳本判斷在表單中經(jīng)常會用到一些日期類型的字段，填寫的日期必需有一個標準，例如結束時間不能早于開始時間等，以下兩個案例可以做為參考· 請假開始日期<=請假結束日期，7241是請假開始日期的字段ID，7242是請假結束日期的字段ID，實際使用過程中，請用實際的ID進行替換，alert后面的內(nèi)容為前臺表單提示內(nèi)容；圖24· 項目實際開工日期<=填寫日期<=項目結束日期，7243是開工日期的字段ID，7244是填寫日期的字段ID，7245是結束日期的字段ID，實際使用過程中，請用實際的ID進行替換，aler