Click here to Skip to main content
14,297,293 members

Creating SharePoint Word Documents with AngularJS using LightSwitch

Rate this:
5.00 (6 votes)
Please Sign up or sign in to vote.
5.00 (6 votes)
19 Jan 2015CPOL
You can implement SharePoint documents in your AngularJS applications much easier when you create your code in a Visual Studio LightSwitch Cloud Business app.

image

Download file: From this link

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

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

After the task is saved, we can click on the task in the list to edit it.

image

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

If we click on the Inline Edit link, the document will open in Word Online in Office 365.

Creating The Application

image

We start with the application created in AngularJS Posting To SharePoint Newsfeed Using Visual Studio LightSwitch.

image

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

First, to provide the functionality to programmatically create Word documents, install the Open XML SDK for Microsoft Office (OpenXMLSDKV25.msi) from this link.

image

Add a reference to DocumentFormat.OpenXml

image

…and WindowsBase.

image

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

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

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

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

Add a Document Library.

image

Call it TaskDocuments.

image

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

In the Settings, select Create column.

image

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

In Visual Studio, right-click on Data Sources and select Add Data Source.

image

Select SharePoint.

image

Enter the address of your Development SharePoint server.

image

You may have to log in.

image

Select the TaskDocuments from Document Libraries, and UserInformationList from Lists.

image

The lists will show in the project.

image

 

  1. Open the TaskDocument table and click the Relationship button.
  2. Select ToDo as the To table and set the Multiplicity to Many to One.
  3. Set TaskID as the Primary and Foreign keys.
  4. Click OK.

 

image

The relationship will show.

Creating The Word Document

image

Next, we open the ToDo table and select the _Inserting method.

We add the following code to the end of the method:

// 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();

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

Open the JayDataCRUD.js file and update the Angular controller with the following code:

// 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();
    }
});

 

image

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

We can now run the application…

image

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

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

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) {
        // 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';
    };
});

 

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

defwebserver
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions

 
-- There are no messages in this forum --
Article
Posted 19 Jan 2015

Stats

13.6K views
4 bookmarked