E_cology8.0新表單設(shè)計器操作的指南

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15、是只能取系統(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$")如果設(shè)置了一般時間我們還可以設(shè)置時間的計算是否跳過非工作時間，只要將圖5-4中的【日期計算排除非工作日】即可。8. 插入代碼案例

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