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对象启动工做流，可是代码量很大，后面有机会，也会介绍给你们。