SharePoint Online 提交表單

  前言

  上一篇文章,我們介紹了如何定制工作流表單,也就是使用布局和控件,把表單畫成HTML頁面。

  這篇文章,我們會深入介紹里面的詳細功能,包括初始化字段、保存表單、初始化表單、編輯表單,提交工作流。

  初始化審批人字段

  從最開始看這個系列文章的朋友應該了解,我們流程里的審批人字段,是來自SharePoint Group的,里面加的人可以在流程里選擇。所以,工作流表單里的人,也需要選擇組里的人。

  1.我們需要用到JQuery插件,首先下載JQuery庫,上傳到Library文檔庫里(我們之前創建好的),然后添加引用,如下圖:

  這個很簡單,如果有不明白的,可以參考之前上傳layui庫的過程,一樣一樣的

 

  2.在審批人的控件上添加一個ID屬性,為初始化控件做準備,如下圖:

  添加ID為了讓JQuery更方便、準確的找到這個控件

 

  3.添加一個獲取組內人員的方法,同時,用JQuery綁定到對應控件上,如下圖:

  標注(1)是初始化審批人控件,讓下拉框里的值是SharePoint Group里的人員;標注(2)是根據SharePoint Group的ID獲取組;標注(3)是如果URL上存在ItemId這個參數,說明當前頁面是編輯狀態,要在初始化下拉框以后,初始化表單。

 

  4.在頁面初始化保存和提交方法后,初始化審批人這個字段,如下圖:

  我們可以看看整個邏輯,先判斷ItemId是不是存在,然后分別進入新建項目或者編輯項目的方法,在方法的最后傳入Save還是Submit的標識(bool類型)

 

  5.我們可以看到綁定以后的效果,審批人這個字段變成可以選擇的樣式了,如下圖:

 

  6.我們再看看之前創建的SharePoint Group,審批人都是來自這個組里的用戶,如下圖:

  至此,初始化表單審批人字段的工作,就完成了

 

  編寫保存功能

  表單的保存功能,顧名思義就是把數據存到列表里。主要包括新建項目(直接保存到列表),編輯項目(加載頁面的時候,根據Url上的ItemId初始化表單,把這條數據初始化到表單上,然后編輯后再進行保存)。

  7.新建表單功能還是比較簡單的,主要操作就是讀取頁面中控件的值,然后保存到列表里即可,如下圖:

  這里需要注意的就是,如果Submit的時候,會多存一個狀態值Status為Submit(保存時是Draft,默認值不需要提交),這個是為下一步操作的。其次就是新建以后要跳轉,就是把當前頁面的Url后面加個參數ItemId,參數的值就是新建的項目的ID,讓編輯的時候可以獲取到項目。

 

  8. 初始化表單,就是為了編輯表單做準備,當這個項目是保存過的狀態,需要先初始化一下,如下圖:

  代碼邏輯很簡單,就是根據Url的參數ItemId獲取到項目,把項目里的值初始化到表單上,讓用戶再編輯

 

   9.編輯表單和新建表單的代碼幾乎一樣,唯一的區別就是要先初始化表單,然后再將表單修改后的值更新到這個項目里,如下圖:

 

  10.下面我們看一看編輯表單的效果,就是會根據Url參數把ItemId為9的項目初始化到表單上,然后編輯這個項目,編輯完畢還會保存到這個項目,如下圖:

 

  11.同時,如果這個項目已經提交了,還會根據表單的Status狀態,禁用頁面上的控件,隱藏提交和保存按鈕,讓表單變成僅查看狀態,如下圖:

 

  修改提交工作流

  修改提交工作流,是為了完成提交功能,整個修改也是非常簡單的,利用了一個叫做[等待域更改]的操作。

  12.我們添加了一個字段叫Status,默認值是Draft,在表單點擊提交的時候,會更新為Submit,如下圖:

 

  13.流程圖后半部分和之前是一樣的,只更改了紅色圈內的部分,如下圖:

  項目新建的時候,會啟動工作流。點擊保存的時候Status的值是Draft,流程走否的分支,進入等待狀態,直到點擊提交Status變為Submit繼續。表單點擊提交按鈕,Status的值是Submit,新建的時候點提交直接進入后面的流程;編輯的時候點提交結束等待域更改,進入后面的流程。

 

  14.我們看到兩條測試數據,分別是提交和保存以后的狀態,如下圖:

  如果是保存的項目,編輯后點擊提交,會和提交一個狀態

 

  15.我們看保存流程的詳情,狀態是我們在流程里更新為Draft的,沒有分配任務給審批人,同時也沒有寫歷史記錄,如下圖:

 

  16.我們在ItemId為15的這條數據的編輯模式下,點擊提交,如下圖:

 

  17.我們再看看工作流狀態,里面工作流狀態變為In Process,審批任務已經分配給審批人,同時歷史記錄也已經記錄下來了,如下圖:

 

  結束語

  至此,整個提交表單的功能都已經結束了。本文比較偏重動手能力,簡單的總結一下,就是利用前端表單控件和SharePoint JavaScript進行結合,配合工作流調整,完成整個表單的提交功能。

  本文的重點是前端表單控件,可以選擇你喜歡并熟悉的;SharePoint JavaScript對象模型,是必須要了解到;一起配合工作流,添加點想象力,完成這樣的功能。當然,我們還可以直接用JavaScript對象啟動工作流,但是代碼量很大,后面有機會,也會介紹給大家。

posted @ 2020-03-15 00:01  霖雨  閱讀(...)  評論(...編輯  收藏
ag二分彩