Apps, Apps and apps … A story (Step 1)

  1. Apps, Apps And Apps … A Story (Step 1) – this blog
  2. Apps, Apps And Apps … A Story (Step 2) – Commenting App
  3. Apps, Apps And Apps … A Story (Step 2b) – Commenting App Going AngularJS

A few weeks ago I gave a presentation about SharePoint Apps and Office apps combined on the SharePoint Connections: Amsterdam conference.

It was lots of fun and I always love meeting new people.

I’ve mentioned I would put my slides and my code up on my blog. Which I did of course Glimlach  .

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

If you don”t know what Apps for Office are I suggest reading the technet article first.

Also if you want to know more about AngularJS there are 2 blog posts you can read:

I am using Visual Studio 2013 but it should be the same with Visual Studio 2012.

To start first create a SharePoint App Solution:

CreateSPApp

Next I am selecting a SharePoint hosted app and I point to a site that is of the type ‘Developer Site’.

Step2

Now why am I selecting a SharePoint hosted App?

I am going to use a document library and list in the SharePoint App web. Also additional benefits are:

Reasons

When the SharePoint App solution is created, go ahead and add an Office App in the same Visual Studio Solution.

Now we have both solutions in one Visual Studio Solution, but they are still separate at the moment.

OfficeAppAdd

With the next questions, just select the Word for the task pane, click next and select ‘Create a new document and insert my app’.

Let”s check first what is actually created by adding the Apps for Office:

OfficeAppSolutoin

I have highlighted what is important:

  • Home.html is the web page that is being used to display in the task pane.
  • Appsdemo.docx is the document template that we are going to use, this can be viewed as the glue between the SharePoint App and the Office App

Now we have both solutions in one Visual Studio Solution, but they are still separate at the moment.

Next up is putting the 2 together.. Create a document library (add a list to the visual studio solution)

AddDocLib

In the next window select a document library under ‘Create a customizable list template and a list instance of it:’. Hit next and select ‘use the following document as the template for this library’, go to OfficeDocuments under your current solution directory and select the Docx file.

Since you only have a chrome control on your page, add a link to the document library by adding

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

To your default.aspx page in your SharePoint App solution (hint: under the pages folder in the solution).

Now you can deploy your solution to the Developer site template and you”ll see that the solution is listed.

DeployedApps

If you click on the App name than you”ll be transferred to the App web. On it you”ll see a link to our document library.

You”ll see 2 content types, select the ‘doclibcontenttype’.

Your screen should look like the image blow.

OfficeAppWord

It can be that it takes a long time to load this html page.

It is even possible that your javascripts are not working.

This is because in the home.html file there is an external reference to a JS file on the Office CDN.

<script src=’https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js’ type=’text/javascript’></script>

This is done so that you have the latest version of the office.js file, but in environments where the SharePoint farm / client pc”s are not connected with the internet It is not that handy.

Just downloading this file and putting it in your solution is an option, but the office.js file has some deferred loads, so it loads other javascript files when it needs. So you see that an internet connection is the easiest way.

But for offline development they already provided a simpler way, just comment out the line above and uncomment the 2 lines containing microsoftajax.js and office.js, both files are located in your scripts directory.

In the next blog post we are going to create a real world app from the solution that we”ve just created. But for now, think about an App that would really help your situation.

download the code

Leave a Reply

Your email address will not be published. Required fields are marked *