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