65.9K
CodeProject 正在变化。 阅读更多。
Home

在 SharePoint 中使用无第三方插件填写表单

FiegeU
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (2投票s)

2013年10月21日

CPOL

13分钟阅读

viewsIcon

56430

downloadIcon

450

在 SharePoint 文档库中实现表单填写功能。

概述  

在 SharePoint 中为用户提供填写表单并将其存档的功能是一个非常常见的需求。在 SharePoint 中，您可以为这些表单添加不同类型的审批工作流等。没有一些额外的产品来实现这一点并不是理想的解决方案。我从 WSS 3.0 开始就一直在研究这个问题。我将向您展示一个无需任何成本或附加组件的解决方案。

介绍 

当涉及到文档管理，用户需要在 SharePoint 中填写表单并将其存储在列表或文档库中时，您主要有三种选择。

  1. InfoPath（推荐方式，配合表单服务可以实现不错的解决方案）
  2. Office 文档（您可以将它们集成到文档库菜单中，也能实现不错的解决方案。您还可以添加一个转换服务将它们存档为 PDF 格式。）
  3. 您可以使用 SharePoint 表单，将您想在表单中使用的所有字段添加为列，并使用内容类型将它们存储在 SharePoint 列表或 SharePoint 文档库中。

如果您有足够的预算，前两种选择都是相当不错的解决方案。

第三种选择也能解决问题，但并非我所设想的。我的目的是给用户一种“只读”文档，他们可以打印并查看。

可填写的 PDF 表单非常符合这一要求，但我看不到任何方法可以在不使用第三方工具的情况下，通过 Adobe Reader 自动上传已填写的 PDF 文档。（我没有将其列入选项，因为我从未见过它奏效，我只是在网上浏览过相关产品。）

我最终的解决方案是让用户拥有一个 HTML 文档，他们可以在其中填写表单字段，最后将该文档的“只读”副本存储在文档库中。

当您向 SharePoint 文档库添加新文档时，它将是这样的

选择文档类型
 

填写字段并上传

注意文档库中的文档

最后是存档的文档

所有这些都是通过将一个 HTML 文件添加到 SharePoint 文件夹中，并将文档模板、图像和 JQuery 存储在 SharePoint 文档库中实现的。

所有文件编辑都通过 SharePoint Designer 完成  

背景 

技术细节  

所有这些都通过将一个 HTML 文件添加到服务器文件系统内的 SharePoint 目录中来实现。这个重定向器是必需的，以便我们在文档库的新文档对话框中添加我们的菜单项。

我们需要做的另一件事是在文档库中提供一个空间，用于存放 JQuery 库文件。这个位置应该是任何人都可以读取的。

最后，我们需要两个文档库，一个用于存储 HTML 模板、菜单 HTML 文件和菜单图像（在示例中称为 SriptsAndMenus），另一个是我们希望存储文档的地方（在示例中称为 Cars）。为了在库中组织数据，我们必须为每辆车手动生成一个以车牌命名的文件夹。这尚未完成，但它将使所有属于一辆车的文档都集中在一个池（文件夹）中，并且可以轻松找到。

示例项目  

为了这篇文章，我准备了一个文件存档，实现了运行公司汽车共享部门的要求。

他们有这类表单，人们应该能够在字段中填写数据

表单名称

描述

购置报告

每次新车加入车队时都必须填写

洗车报告

洗车后必须填写

保养报告

进行保养（周期）后必须填写

轮胎更换报告

更换轮胎后必须填写

机油更换报告

更换机油后必须填写

维修报告

进行任何类型的维修后必须填写

注意事项报告

如果需要存档该车的任何信息，则必须填写

报废报告

车辆报废时必须填写

分步安装手册  

对于分步手册，我进行了一次全新的 Server 2012 安装，并在其上安装了 SharePoint Server 2013 Foundation，因此我们从一个未修改的系统开始。所有屏幕截图均在德语系统上拍摄（最好是英语系统，但没有媒体且没有时间等待 GB 下载……）。

在我的示例中，我的域名是“test.local”，服务器名为“server1”，网站集名称是“sc1”。

必备组件 

  • 运行 Windows Server 2012 上的 SharePoint 2013 或 SharePoint 2013 Foundation 安装。如果配置了 REST 接口，SharePoint 2010 也可能工作。（未测试）
    如果您计划在场环境（farm environment）中安装，请注意，如果您有某种负载均衡，则必须在所有前端服务器上进行安装。
  • 附带的 SP_CarPool.zip
  • SharePoint Designer 2013（仅当您计划在 SharePoint 中查看/修改文件时使用）[它是免费的，并且在进行自定义时极大地帮助了您，所以没有理由不使用它。]

步骤 1：配置 SharePoint

必须启用 SharePoint 以允许在文档库中打开 .html 页面。这可以在 Central Administration 的 General Settings 中完成。将“Browser File Handling”选项从 Strict 更改为 Permissive。

打开 Central Administration 并打开 Web Applications 列表

选择 SharePoint 应用程序

从 General Settings 菜单中选择 General Settings

在“Browser File Handling”选项中选择 Permissive 并保存更改

步骤 2：解压存档
解压 SP_CarPool 存档，您会找到三个文件夹

  1. jquery
    包含 jquery .js 文件和 jquery 的许可条款  
  2. Redirector
    包含 redirector.aspx 页面，该页面为用户菜单页面执行页面重定向，以及一个文本文件，其中描述了 redirector.aspx 文件的 Targetfolder，以便于部署。  
  3. ScriptsAndImages
    包含 scripts 文件夹，其中包含所有 html 文件，以及 Images 文件夹，其中包含菜单页面中使用的所有图像。请注意图像许可文件中的许可信息。

步骤 3：复制 jquery

创建一个名为“scripts”的文档库，所有用户都可以访问（只读访问权限），并将文件 jquery-2.0.3.min.js 复制到其中。

创建文档库

输入文档库的名称
 

打开新创建的文档库

上传 jquery 文件
 

最后，我们在文档库中有了它


右键单击文件并复制文档路径



我们需要这个，因为它到 jquery 文件的绝对路径。如果您与我不同，则必须在 html 文件中进行调整。

在我的例子中是：“ http://server1/scripts/jquery-2.0.3.min.js ”（我们将需要在每个表单文档中引用此链接。如果您的服务器上不同，您必须在 html 文件中进行调整。）

步骤 4：复制 redirector.aspx 文件

打开您解压的源 redirector 文件夹，然后打开“Targetfolder”文本文件


选中所有内容，然后右键单击并选择复制

打开另一个 Explorer 窗口，并在地址栏中粘贴路径


现在从第一个 Explorer 窗口将 redirector.aspx 文件拖放到第二个窗口以复制它


请注意，.NET 编译器会因为 LAYOUTS 文件夹中的 .aspx 文件修改而重新编译应用程序。这将导致 SharePoint 中的下一次页面访问速度稍慢。

步骤 5：创建 ScriptsAndImages 文档库

以与创建 scripts 文件夹相同的方式创建它。结果应该如下所示


要复制文件，请通过 SharePoint 菜单切换到 SharePoint Designer

在 SPD 中打开新创建的文档库


现在将存档中两个文件夹都拖放到 SPD 窗口中

结果应该如下所示

步骤 6：创建目标文档库

使用 Internet Explorer（或 SPD，结果相同）创建最后一个名为 CarPool 的文档库

使用添加文件夹功能将这些文件夹添加到其中

  • 555-SHOE
  • 415-MIAMI 
  • 123-TEST

（每个文件夹将代表车队中的一辆车。）


步骤 7：启用内容类型并创建“新建文档”按钮

要启用内容类型，请选择 CarPool 文档库并打开 Library settings

继续到高级设置

将允许内容类型设置为 yes，现在不要保存


向下滚动一点，启用弹出窗口打开对话框，然后单击 OK 保存
 

在下一步中，我们需要创建一个新的内容类型，当选中它时会显示我们的自定义菜单。

为此，向下滚动您现在所在的页面到 Content Types，然后选择 Add from existing Content Type

选择 Link “To a Document” 作为基类型

按下 O.K. 后，您将返回到上一页。再次向下滚动到内容类型，然后选择之前创建的内容类型

单击 Name and Description 为其命名


输入名称和描述

打开高级设置
 


在文档模板链接中添加此 URL： 
/_layouts/15/Redirector.aspx?newurl=http://server1/ScriptsAndImages/Scripts/CarMenu.html
 （它通过 Redirector.aspx 重定向到 CarMenu.html 页面。）

使用后退按钮几次回到内容类型页面，然后选择“Document”内容类型

使用“Delete this content type”链接将其删除

最后，我们可以通过添加一些文档来进行测试

然后立即进行轮胎更换

当我们打开文档时
 

 

使用代码

如何将其用于您自己的项目

首先，让我们看看这一切是如何工作的：我们有一个网页（CarMenu.html），它通过自定义内容类型绑定到 SharePoint 菜单按钮。该网页加载一个表单，用户可以在其中填写数据。
当用户按下保存按钮时，文档将被转换为只读状态并上传到文档库以供将来使用。

思考您的流程。您需要哪些类型的文档以及必须填写哪些字段。您是否需要某种文档隔离（例如车牌号码），还是所有文档都可以进入一个大池中。

当您安装了演示项目时，您已经拥有了大部分内容。只需创建一个文档库，并将 CarMenu.html 和其中一个表单文档（例如：Car_Acquisition.html）复制并重命名到其中。这将是您开始的基础。如果您的流程中只有一个或两个文档，您可能不需要菜单弹出窗口。在这种情况下，只需创建多个内容类型并直接链接到“新建文档”页面。如果您计划使用菜单，则必须在菜单文件中调整两个代码部分

第一个是菜单顶部显示的标题，第二个是菜单内容。菜单项的格式是显示的图像，后面是菜单项文本，最后是点击菜单项时使用的文档 URL。

在表单文档中有几个地方需要进行调整。

页面标题

只需添加一个描述流程的页面标题。

特定文档设置


大多数设置在一个代码块中完成

  • 在 mandatoryFields 数组中，您可以指定在数据发送到服务器之前必须检查的字段的 ID。请记住，您必须自己标记字段为必填（我使用红色星号表示）。
  • 如果您的站点在 SharePoint 层级结构中更深，则必须填写 pathToSite。
  • 必须将 nameOfDocumentLibrary 填入文档应存储的文档库的名称。空格必须替换为 %20！
  • showSubfolderSelector 启用/禁用一个下拉框，其中包含文档库顶层的​​所有文件夹。应隐藏的文件夹的名称应以“Z_”开头。
  • targetFileNamePrefix 和 targetFileNamePostfix 将用于构建文档在文档库中的文件名。格式为：“Prefix_YYYYMMDD_hhmmssPostfix”。

最后，我们需要 HTML 表单本身。它将在文档末尾的 pagecontent 标签之间定义

为控件定义 ID
如果您打算在 SharePoint 以外的任何系统中使用用户输入的数据，那么您应该为所有 input 标签定义一个唯一的 ID，因为具有 ID 的控件值将存储在一个 JSON 变量中，该变量可以在最终的只读文档中进行解析


返回而不是关闭弹出窗口
 

如果您不想在弹出模式下使用表单，则必须取消注释 history.back 并注释掉 window.frameEelemnt.commitPopup()。这将导致浏览器返回历史记录而不是关闭弹出窗口框架。

最后的建议：如果您计划编辑页面代码，请使用 SharePoint Designer。不是因为我从推销它中获得金钱，只是因为它使许多事情变得更容易，而且代码补全也会有帮助。

兴趣点 

大部分代码都很直接，但我想展示一些值得一提的代码部分。

窃取摘要

$.ajax({
    url: "../_api/contextinfo",
    type: "POST",
    headers: { ACCEPT: "application/json;odata=verbose",  contentType: "application/json;odata=verbose" },
    success: function (data) {
    if(data.d)
    {
     digest = data.d.GetContextWebInformation.FormDigestValue;       
    }
    },
    error: function (xhr) {
     alert("Error getting digest:" + xhr.status + ': ' + xhr.statusText+ "\n"+ xhr.responseText);
    }
});

如何在没有身份验证/授权的情况下将文档保存到 SharePoint？

你不能！

但是，当用户可以访问表单时，她/他已经登录到 SharePoint。我们可以“窃取”摘要（一种会话 cookie）并用它来上传我们的表单。

上传表单（否则它会让我无法休息；））：

执行上传过程的代码花了很长时间才奏效。

（抱歉，代码格式化器在这里出错，所以我将其添加为图片）

它所做的就是使用 SharePoint REST 接口上传内容。获得服务器接受的正确格式是反复试验的结果。

结论

通过使用 jquery 和一些 HTML 和 JavaScript 在 SharePoint 中设置基于 HTML 表单的文档存档系统并不难。我只是把所有这些碎片放在一起，希望它对您也有用，并且整体比其各部分的总和更有价值。

法律事宜
Microsoft、ASP.NET、Sharepoint、Infopath、Microsoft Office 是 Microsoft Corporation 在美国和其他国家/地区的注册商标。（http://www.microsoft.com）

Adobe、Adobe Acrobat & PDF 是 Adobe 的 TM (http://www.adobe.com) 

汽车菜单页面中的图像来自 Axialis 免费图像库，并获得“Creative Commons Attribution License”许可 -> Axialis

历史 

版本 1.00 初始发布 2013.10.21
版本 1.01 小型错别字和布局修复 2013.10.22
 

 

示例代码文件许可

整篇文章获得 CPOL 许可。 

代码示例（我的部分）获得 GPL v3 或更高版本的许可。
代码示例包括 jquery，它获得 MIT 许可。
代码示例包含来自 Axialis 图像库的图像，该库获得 Creative Commons Attribution License 许可。
请注意包含的许可文件。

© . All rights reserved.