使用 LightSwitch 和 AngularJS 创建 SharePoint Word 文档
5.00/5 (6投票s)
当您在 Visual Studio LightSwitch Cloud Business 应用中创建代码时，可以更轻松地在 AngularJS 应用程序中实现 SharePoint 文档。
下载文件： 从此链接下载
当您在 Visual Studio LightSwitch Cloud Business 应用中创建代码时，可以更轻松地在 AngularJS 应用程序中实现 SharePoint 文档。本质上，当我们创建一个新的任务在我们的 SharePoint Provider Hosted 应用程序时，我们将进行一次 SharePoint CSOM 调用，以便在关联的 SharePoint 列表中创建一个Word 文档。
应用程序
我们从在 AngularJS 使用 Visual Studio LightSwitch 发布到 SharePoint 新闻源 中创建的应用程序开始。
我们使用添加新项按钮添加任务，然后单击保存。
保存任务后，我们可以单击列表中的任务进行编辑。
我们将看到已创建一个Microsoft Word 文档并将其附加到任务。
我们可以单击直接链接或内联编辑链接来打开文档。
如果单击内联编辑链接，文档将在 Office 365 中的 Word Online 中打开。
创建应用程序
我们从在 AngularJS 使用 Visual Studio LightSwitch 发布到 SharePoint 新闻源 中创建的应用程序开始。
此项目基于 使用 LightSwitch OData 作为后端实现端到端的 AngularJS SharePoint 模块 一文中的应用程序。
添加引用
首先，要提供以编程方式创建Word文档的功能，请从此链接安装Open XML SDK for Microsoft Office (OpenXMLSDKV25.msi)。
添加对DocumentFormat.OpenXml的引用...
...和WindowsBase。
在DocumentFormat.OpenXml的属性中，确保将复制本地设置为True，以便在将应用程序部署到生产环境时部署它。
更新 ToDo 表
打开ToDo表并创建一个名为TaskID的字段。
稍后我们将使用此字段将此表连接到SharePoint 文档库。
将 LightSwitch 连接到 SharePoint 文档库
现在，我们将按照以下文章中的说明操作：在 SharePoint 2013 Cloud Business 应用 (LightSwitch) 中实现文档，将项目连接到SharePoint 文档库。
首先，我们需要创建一个SharePoint 文档库列表。
登录到您的SharePoint 开发站点，然后在“站点内容”下单击“添加应用”。
添加一个文档库。
将其命名为TaskDocuments。
将列表添加到“站点内容”中的应用列表后，选择“设置”。
现在我们需要添加一个列 (TaskID)，以便将文档与任务相关联。
在“设置”中，选择“创建列”。
将列命名为TaskID，并将其类型设置为单行文本。
这样，每个文档都可以与应用程序中的任务相关联。
点击**确定**。
连接到文档库
在Visual Studio中，右键单击“数据源”并选择“添加数据源”。
选择SharePoint。
输入您的开发 SharePoint 服务器的地址。
您可能需要登录。
从“文档库”中选择TaskDocuments，从“列表”中选择UserInformationList。
这些列表将显示在项目中。
- 打开TaskDocument表并单击“关系”按钮。
- 选择ToDo作为To表，并将多重性设置为一对多。
- 将TaskID设置为主键和外键。
- 点击**确定**。
关系将显示。
创建 Word 文档
接下来，我们打开ToDo表并选择_Inserting方法。
我们将以下代码添加到该方法的末尾
// Create a unique ID for this Item
// so that we can also store it in the Document
// Library document to relate it to the Item
entity.TaskID = System.Guid.NewGuid().ToString();
// Load the properties for the SharePoint web object.
var clientContext =
this.Application.SharePoint.GetHostWebClientContext();
Microsoft.SharePoint.Client.Web web = clientContext.Web;
// Get the current web
clientContext.Load(web);
clientContext.ExecuteQuery();
// Get the WebCollection
Microsoft.SharePoint.Client.WebCollection webs = web.Webs;
clientContext.Load<Microsoft.SharePoint.Client.WebCollection>(webs);
clientContext.ExecuteQuery();
// ** SharePoint Document **
//Load the lists from the Web object.
Microsoft.SharePoint.Client.ListCollection Lists = web.Lists;
clientContext.Load<Microsoft.SharePoint.Client.ListCollection>(Lists);
clientContext.ExecuteQuery();
// Get the target library and its root folder.
Microsoft.SharePoint.Client.List TaskDocumentsLibrary =
Lists.GetByTitle("TaskDocuments");
Microsoft.SharePoint.Client.Folder destintationFolder =
TaskDocumentsLibrary.RootFolder;
clientContext.Load(destintationFolder);
clientContext.ExecuteQuery();
// Build a Word Document by using OOXML
// First create it in a folder in this Web app.
using (WordprocessingDocument wordDocument =
WordprocessingDocument.Create(
HttpContext.Current.Server.MapPath("~/LocalOOXMLDocument.docx"),
WordprocessingDocumentType.Document))
{
// Add a main document part.
MainDocumentPart mainPart = wordDocument.AddMainDocumentPart();
// Create the document structure.
mainPart.Document = new Document();
Body body = mainPart.Document.AppendChild(new Body());
// Create a paragraph.
Paragraph para = body.AppendChild(new Paragraph());
Run run = para.AppendChild(new Run());
run.AppendChild(
new Text(
String.Format("Here's some text for {0}",entity.TaskName)
));
}
// The local file has been created in the folder of the Web project
// Read it and create a new file in SharePoint, based on this local file.
FileStream fs = null;
byte[] documentBytes;
fs = System.IO.File.OpenRead(
HttpContext.Current.Server.MapPath("~/LocalOOXMLDocument.docx"));
documentBytes = new byte[fs.Length];
fs.Read(documentBytes, 0, Convert.ToInt32(fs.Length));
// At this stage, the file contents of the OOXML document have
// been read into the byte array
// Use that as the content of a new file in SharePoint.
Microsoft.SharePoint.Client.FileCreationInformation ooxmlFile
= new Microsoft.SharePoint.Client.FileCreationInformation();
ooxmlFile.Overwrite = true;
ooxmlFile.Url = clientContext.Url
+ destintationFolder.Name
+ "/" + entity.TaskName + ".docx";
ooxmlFile.Content = documentBytes;
Microsoft.SharePoint.Client.File newFile = TaskDocumentsLibrary.RootFolder.Files.Add(ooxmlFile);
clientContext.Load(newFile);
clientContext.ExecuteQuery();
// Get the ListItem associated with the File
Microsoft.SharePoint.Client.ListItem listItem = newFile.ListItemAllFields;
// Update the TaskId field
// so the document will be associated with the ToDo item
listItem["TaskID"] = entity.TaskID;
listItem.Update();
clientContext.ExecuteQuery();
您需要在类的顶部添加以下Using语句
using System.IO; using Microsoft.SharePoint.Client; using System.Web; using DocumentFormat.OpenXml; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Wordprocessing;
更新 AngularJS 应用程序
打开JayDataCRUD.js文件，并使用以下代码更新Angular控制器
// Create empty collection
$scope.TaskDocuments = [];
// Call the /SharePointDocuments.svc LightSwitch OData service
$data.initService('/SharePointDocuments.svc').then(function (SharePointDocuments) {
$scope.SharePointDocuments = SharePointDocuments;
$scope.TaskDocuments = SharePointDocuments.TaskDocuments.toLiveArray();
});
// Create a colTaskDocument property that will
// return the TaskDocuments for the selected
// TaskID
Object.defineProperty($scope, "colTaskDocument", {
get: function () {
if ($scope.selectedToDo)
return $scope.SharePointDocuments
.TaskDocuments
.filter('TaskID',
'==',
$scope.selectedToDo.TaskID)
.toLiveArray();
}
});
打开JayDataCRUD.aspx文件，并使用以下代码更新标记
<table>
<tr data-ng-repeat="TaskDocument in colTaskDocument">
<td>
{{TaskDocument.Name}}
</td>
</tr>
</table>
我们现在可以运行该应用程序...
我们可以创建一个新任务，然后单击它进行编辑。
我们将看到已创建一个相关的Word文档，并且将显示其名称。
当我们直接转到SharePoint TaskDocument列表时，我们将看到Word文档可以被查看。
从 AngularJS 链接到 SharePoint 文档
如果我们直接导航到LightSwitch OData提要（当我们在LightSwitch中连接到它时，它会自动为SharePoint TaskDocuments列表创建的），我们将看到它公开了一个指向Word文档的直接链接（不用担心，用户仍然需要经过身份验证才能访问它）。
我们可以使用此属性在我们的AngularJS应用程序中提供指向文档的链接。
首先，我们将以下过滤器添加到JayDataCRUD.js文件中（放在*var app = angular.module('app', ['jaydata'])*下方）
app.filter('WordViewer', function () {
return function (DocumentURL, DocumentName) {
// Get the domain from the DocumentURL
// Create a temp element
var a = document.createElement('a');
// Assign DocumentURL to the .href
// so we can call .hostname in the final step
a.href = DocumentURL;
// Return the URL
return 'https://'
+ a.hostname
+ '/_layouts/15/WopiFrame.aspx?sourcedoc='
+ DocumentURL
+ '&file='
+ DocumentName
+ '&action=default';
};
});
接下来，我们更新JayDataCRUD.aspx文件中的标记以使用该过滤器
<table>
<tr data-ng-repeat="TaskDocument in colTaskDocument">
<td>
{{TaskDocument.Name}}
<a href="{{TaskDocument.Microsoft_LightSwitch_ReadLink}}">[直接链接]</a>
<a href="{{ TaskDocument.Microsoft_LightSwitch_ReadLink | WordViewer : TaskDocument.Name }}">
[内联编辑]</a>
</td>
</tr>
</table>
当我们运行该应用程序时，现在将有一个指向相关Word文档的直接链接和一个内联编辑链接。
链接
SharePoint 2013：使用 OOXML 在 SharePoint 应用中创建 Word 文档
欢迎使用 Office 的 Open XML SDK 2.5
链接 - LightSwitch 帮助网站
AngularJS 使用 Visual Studio LightSwitch 发布到 SharePoint 新闻源
一个端到端的 AngularJS SharePoint 模块，使用 LightSwitch OData 作为后端
将 LightSwitch 应用程序部署到 Office 365 / SharePoint Online
探索 SharePoint 2013 Visual Studio 云业务应用程序 (LightSwitch)