SharePoint Online 定製工做流表單

　　前言

　　咱們在使用SharePoint 工做流的時候，有一點很不友好，那就是表單的UI，真的是太簡(nan)單(kan)了，因此，定製表單幾乎成了國內工做流開發的重中之重，幾乎沒有任何項目使用默認的表單功能。

　　下圖就是默認的表單截圖，咱們看到樣子真的是。。。

　　不說了，下一個步驟！

 

　　引入表單組件

　　咱們這裏用的是LayUI（https://www.layui.com/），也就是一個開源的表單組件庫，至於爲何選擇這個庫？我喜歡唄，夠直接不？

　　1.在官網下載最新版本的開源代碼，以下圖：

 

　　2.打開SharePoint Online站點，進入Site Contents，以下圖：

　　爲了在網站內容裏，添加一個庫，存咱們下載的前段代碼

 

　　3.點擊add an app按鈕，來爲網站添加一個應用，以下圖：

 

　　4.選擇Document Library，也就是文檔庫類型，以下圖：

　　專門用來保存文檔類型的文件

 

　　5.輸入要添加的文檔庫的名稱，以下圖：

　　選擇一個咱們喜歡的名字，會影響接下來開發的心情，建議用英文命名，不要添加任何的表單符號、特殊字符和數字等

 

　　6.選擇Open with Explorer按鈕，以Windows資源管理器方式打開文件夾，以下圖：

　　這個請用IE瀏覽器，爲何？由於同是微軟的產品，兼容性好唄

 

　　7.複製前面下載的表單插件源代碼文件夾，到這個打開的視圖下粘貼，以下圖：

　　可能會很長時間，也可能會很短，取決於文件大小和網速

 

　　建立工做流提交表單

　　8.用SharePoint Designer打開網站，左側導航進入Site Pages庫，點擊菜單上的新建Web 部件頁添加一個頁面，以下圖：

 

　　9.這裏隨便選擇一個佈局，看你心情就好，以下圖：

　　爲何這麼隨便呢？由於佈局不重要，最後都是要被咱們刪掉的，咱們要重寫咱們的佈局

 

　　10.先在菜單上籤出文件（有可能沒開啓版本控制，就不須要簽出），而後在文件上點擊右鍵，選擇在高級模式下編輯文件，以下圖：

 

　　11.在打開頁面的頭部添加JavaScript腳本和CSS樣式表的引用，同是添加咱們須要用的內部樣式，以下圖：

　　內部樣式不是一開始就有的，是咱們添加完佈局，可是不夠完美須要簡單調整一下才有的

 

　　12.在內容節點裏刪除原來的代碼，以下圖：

　　這就是爲何以前說佈局沒有用了，固然，你也能夠用，只要開心就好

 

　　13.添加咱們須要的HTML代碼，我這裏都是調整之後的，以下圖：

　　你們若是用layui，能夠看看官方sdk，固然，你也能夠選擇其餘表單控件，仍是那句話，你開心就好，這個不重要，原理都是同樣的

 

　　14.添加咱們表單提交和保存的腳本聲明，以下圖：

 

　　15.全部工做完畢之後，來看看咱們定製的建立流程審批申請的表單吧！是否是比以前默認的，好看太多了？

　　這就是化妝的結果，不化好妝，怎麼好意思見客戶呢？

 

　　結束語

　　這篇文章主要介紹如何定製表單，整個邏輯仍是很簡單的，固然你沒必要要跟我選擇同樣的表單控件，你開心就好。

　　下一篇文章，會爲你們介紹如何綁定審批人到控件上，以及如何保存或者提交這個申請。