![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image19.png)
You can implement SharePoint documents in your AngularJS applications much easier when you create your code in a Visual Studio LightSwitch Cloud Business app. Essentially we will make a SharePoint CSOM call to create a Word Document in an associated SharePoint list when we create a new task in our SharePoint Provider Hosted application.
The Application
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_fb3bb859-0553-4cc2-a582-b7257374fc5e.png)
We start with the application created in AngularJS Posting To SharePoint Newsfeed Using Visual Studio LightSwitch.
We add tasks using the add new button and then click Save.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_86909865-d919-4ba4-a00c-992730c0e202.png)
After the task is saved, we can click on the task in the list to edit it.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_d0c9b580-9204-48b1-9824-605667dbfe62.png)
We will see that a Microsoft Word Document has been created and attached to the task.
We can click on either the Direct Link or the Inline Edit link to open the document.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_bf5ecebb-80c8-474a-bfdc-d0b1c000b3cb.png)
If we click on the Inline Edit link, the document will open in Word Online in Office 365.
Creating The Application
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_354b29fe-19ed-4bbd-98ef-2474320e5d5f.png)
We start with the application created in AngularJS Posting To SharePoint Newsfeed Using Visual Studio LightSwitch.
![image image](867450/Windows-Live-Writer-3bdc9b8fb111_B354-image_3f53f23c-2539-46d8-be37-959b0e48cd23.png)
This project is based on the application created in the article An End-to-End AngularJS SharePoint Module using LightSwitch OData as a Back-End.
Add References
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_e6d64529-c50d-48cb-8554-da25fe875b12.png)
First, to provide the functionality to programmatically create Word documents, install the Open XML SDK for Microsoft Office (OpenXMLSDKV25.msi) from this link.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_a345746f-d105-4278-afac-dada62d291f1.png)
Add a reference to DocumentFormat.OpenXml…
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_8c8d63b3-8635-4bf1-b60a-7967486c718c.png)
…and WindowsBase.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_f3978433-c254-4397-9e4e-52f90386d101.png)
In the Properties for DocumentFormat.OpenXml, ensure you set Copy Local to True so that it will be deployed when you deploy the application to production.
Update the ToDo Table
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_3f1632cc-7c5c-4ce3-897e-de3b7f1967bf.png)
Open the ToDo table and create a field called TaskID.
We will use this field later to connect this table to the SharePoint Document Library.
Connect LightSwitch To SharePoint Document Library
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_a04fb9d9-86e0-4c21-b5bc-a4e93f58135d.png)
We will now follow the instructions in the article: Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch) to connect the project to the SharePoint Document Library.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_f311c9fd-15bb-45be-8106-442c91a726c5.png)
First, we need to create a SharePoint Document Library List.
Log into your SharePoint Development site, and click add an app under Site Contents.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_435575d7-5a09-4aab-a141-ffa554835f65.png)
Add a Document Library.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_40461f83-737f-4b06-ac96-1ccfb8b45b59.png)
Call it TaskDocuments.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_9bd493d3-9504-43cf-a03e-1e942e67df78.png)
After the list is added to the list of apps in Site Contents, select the SETTINGS.
We now need to add a column (TaskID) to allow us to associate a Document to a Task.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_9fe93ebc-c0b7-477b-90e3-a6401e736334.png)
In the Settings, select Create column.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_b15fb93a-8641-4287-a29e-7d4aaaf5d427.png)
Call the column TaskID and set its type to Single line of text.
This is so that each document can be associated with a Task in the application.
Click OK.
Connect To The Document Library
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_093c5cc7-acab-42fd-a509-d0cdbcb4ed70.png)
In Visual Studio, right-click on Data Sources and select Add Data Source.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_d286e129-e31a-470e-9102-23faa3396553.png)
Select SharePoint.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_335ac6d7-ba9d-4389-81c6-e6d4a3a3be88.png)
Enter the address of your Development SharePoint server.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_916d4ced-e907-46d6-8b68-afe65f90be1c.png)
You may have to log in.
![image image](867450/Windows-Live-Writer-Implementing-Custom-SharePoint-Document-_BF92-image_a32c4888-24db-414e-9ca5-3302b2360988.png)
Select the TaskDocuments from Document Libraries, and UserInformationList from Lists.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_2e663bd7-30ec-445f-8e01-664cf2a907d4.png)
The lists will show in the project.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_094148f1-e9a6-49f4-a071-639c5ab01d65.png)
- Open the TaskDocument table and click the Relationship button.
- Select ToDo as the To table and set the Multiplicity to Many to One.
- Set TaskID as the Primary and Foreign keys.
- Click OK.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_12020885-446c-4a14-9ef1-c6c52b7a3dcc.png)
The relationship will show.
Creating The Word Document
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_5274bf17-3a76-48f9-b2d6-0a1d8b4ac624.png)
Next, we open the ToDo table and select the _Inserting method.
We add the following code to the end of the method:
entity.TaskID = System.Guid.NewGuid().ToString();
var clientContext =
this.Application.SharePoint.GetHostWebClientContext();
Microsoft.SharePoint.Client.Web web = clientContext.Web;
clientContext.Load(web);
clientContext.ExecuteQuery();
Microsoft.SharePoint.Client.WebCollection webs = web.Webs;
clientContext.Load<Microsoft.SharePoint.Client.WebCollection>(webs);
clientContext.ExecuteQuery();
Microsoft.SharePoint.Client.ListCollection Lists = web.Lists;
clientContext.Load<Microsoft.SharePoint.Client.ListCollection>(Lists);
clientContext.ExecuteQuery();
Microsoft.SharePoint.Client.List TaskDocumentsLibrary =
Lists.GetByTitle("TaskDocuments");
Microsoft.SharePoint.Client.Folder destintationFolder =
TaskDocumentsLibrary.RootFolder;
clientContext.Load(destintationFolder);
clientContext.ExecuteQuery();
using (WordprocessingDocument wordDocument =
WordprocessingDocument.Create(
HttpContext.Current.Server.MapPath("~/LocalOOXMLDocument.docx"),
WordprocessingDocumentType.Document))
{
MainDocumentPart mainPart = wordDocument.AddMainDocumentPart();
mainPart.Document = new Document();
Body body = mainPart.Document.AppendChild(new Body());
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)
));
}
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));
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();
Microsoft.SharePoint.Client.ListItem listItem = newFile.ListItemAllFields;
listItem["TaskID"] = entity.TaskID;
listItem.Update();
clientContext.ExecuteQuery();
You will need to add the following Using statements to the top of the class:
using System.IO;
using Microsoft.SharePoint.Client;
using System.Web;
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;
Update the AngularJS Application
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_abff8389-8e65-4738-83a0-49e3ed75875a.png)
Open the JayDataCRUD.js file and update the Angular controller with the following code:
$scope.TaskDocuments = [];
$data.initService('/SharePointDocuments.svc').then(function (SharePointDocuments) {
$scope.SharePointDocuments = SharePointDocuments;
$scope.TaskDocuments = SharePointDocuments.TaskDocuments.toLiveArray();
});
Object.defineProperty($scope, "colTaskDocument", {
get: function () {
if ($scope.selectedToDo)
return $scope.SharePointDocuments
.TaskDocuments
.filter('TaskID',
'==',
$scope.selectedToDo.TaskID)
.toLiveArray();
}
});
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_4b2d6883-af54-44d9-99c4-a5bca1d8ebea.png)
Open the JayDataCRUD.aspx file and update the markup with the following code:
<table>
<tr data-ng-repeat="TaskDocument in colTaskDocument">
<td>
{{TaskDocument.Name}}
</td>
</tr>
</table>
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_75e20b44-22d3-41bf-8cae-c4c3883001aa.png)
We can now run the application…
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_0479aa18-6b60-451a-9ea2-ba6217ab1fa8.png)
We can create a new task and then click on it to edit it.
We see that an associated Word document has been created and its name will display.
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_184e9651-eaa8-4452-b108-b4e9a737af2a.png)
When we go directly to the SharePoint TaskDocument list, we see the Word document can be viewed.
Link To The SharePoint Document From AngularJS
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_3f1f31e9-1422-4673-a68a-7aa308477e96.png)
If we navigate directly to the LightSwitch OData feed that it automatically creates for the SharePoint TaskDocuments list (when we connect to it in LightSwitch), we see that it exposes a direct link to the Word document (don’t worry a user still has to be authenticated to get to it).
We can use this property to provide a link to the document in our AngularJS application.
First we add the following filter to the JayDataCRUD.js file (place under var app = angular.module('app', ['jaydata']):
app.filter('WordViewer', function () {
return function (DocumentURL, DocumentName) {
var a = document.createElement('a');
a.href = DocumentURL;
return 'https://'
+ a.hostname
+ '/_layouts/15/WopiFrame.aspx?sourcedoc='
+ DocumentURL
+ '&file='
+ DocumentName
+ '&action=default';
};
});
Next, we update the markup in the JayDataCRUD.aspx file to consume the filter:
<table>
<tr data-ng-repeat="TaskDocument in colTaskDocument">
<td>
{{TaskDocument.Name}}
<a href="{{TaskDocument.Microsoft_LightSwitch_ReadLink}}">[Direct Link]</a>
<a href="{{ TaskDocument.Microsoft_LightSwitch_ReadLink | WordViewer : TaskDocument.Name }}">
[Inline Edit]</a>
</td>
</tr>
</table>
![image image](867450/Windows-Live-Writer-e9a3608047ae_7562-image_2b824e3c-7e81-45a2-9771-32595371a7bf.png)
When we run the application, we now have a direct link and a inline edit link to the associated Word document.
Links
SharePoint 2013: Create Word documents using OOXML in apps for SharePoint
Link to open in browser with Office Web Apps
Welcome to the Open XML SDK 2.5 for Office
Links – LightSwitch Help Website
AngularJS Posting To SharePoint Newsfeed Using Visual Studio LightSwitch
An End-to-End AngularJS SharePoint Module using LightSwitch OData as a Back-End
Deploy A LightSwitch Application To Office 365 / SharePoint Online
Exploring SharePoint 2013 Visual Studio Cloud Business Apps (LightSwitch)
Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch)
Creating A SharePoint Online Testing Site
Creating A LightSwitch SharePoint 2013 Multi-Tenant Provider-Hosted Application