cd ../blog
$ published · 1 min read

Apps, Apps and Apps… A Story (Step 1)

Setting up a composite SharePoint App + Office App solution in Visual Studio 2013 — creating the document library, linking the task pane app, and deploying to a Developer Site.

#sharepoint#sharepoint-2013#deployment
</>

This is part of a series:

  1. Apps, Apps and Apps… A Story (Step 1) — this post
  2. Apps, Apps and Apps… A Story (Step 2) — Commenting App

A few weeks ago I gave a presentation about SharePoint Apps and Office Apps combined at SharePoint Connections Amsterdam. It was lots of fun and I always love meeting new people.

I mentioned I’d put my slides and code on the blog — and I did 😊

Now I’m going to create a small blog series about the two technologies and combining them. In the end, it’s really not that hard, and it opens a world of additional possibilities on top of what the SharePoint Apps mechanism already provides.

If you don’t know what Apps for Office are, I suggest reading the TechNet article first.

Also for AngularJS background:

Step 1: Create the SharePoint App Solution

I’m using Visual Studio 2013 (same with 2012).

  1. Create a new SharePoint App solution
  2. Select SharePoint-hosted app and point to a Developer Site

Why SharePoint-hosted? I’m going to use a document library and list in the SharePoint App web. Benefits include no server-side code required and full CSOM/REST access.

Step 2: Add an Office App to the Same Solution

With the SharePoint App solution created, add an Office App to the same Visual Studio solution. Now both are in one solution but still separate.

Select Word for the task pane type, then select “Create a new document and insert my app”.

What gets created:

  • Home.html — the web page displayed in the task pane
  • AppDemo.docx — the document template; this is the “glue” between the SharePoint App and the Office App

Step 3: Create the Document Library

Add a Document Library list to the Visual Studio solution. In the wizard, select “Use the following document as the template for this library” and point to the .docx file from the Office App project (under the OfficeDocuments folder).

Since the SharePoint App only has a chrome control on the default page, add a link to the document library in Pages/Default.aspx:

<a href='../Lists/DocLib'>Document Library</a>

Step 5: Deploy and Test

Deploy to your Developer Site. Click the app name → you’ll land in the App web with a link to the document library.

Click New Item → select the doclibcontenttype → Word opens with the task pane loaded.

Note: The task pane HTML references a script from the Office CDN:

<script src='https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js'></script>

This requires an internet connection. For offline development, comment this line and uncomment the two local script references (microsoftajax.js and office.js) already in your Scripts folder.

What’s Next

In the next post, we’ll create a real-world commenting app on top of this scaffold — adding a Comments list, REST calls, CSOM operations, and a proper UI inside the Word task pane.

Download the starter code