Office and SharePoint 2013 App Example

Blog Written by: David McWee, SharePoint Architect

View David's Blog at:  http://dmcwee.wordpress.com/

Twitter: @dmcwee

With the introduction of the 2013 product line, both Office and SharePoint, Microsoft has chosen to implement an App model.  In the last blog I wrote about how this App model is very similar to Facebook’s App Model. I also mentioned, but didn’t go into great detail that SharePoint and Office Development share the App model concept.  In this blog I want to demonstrate how to implement an App that works with SharePoint and Office.  I will use the Office 365 Developer Preview which includes all the 2013 products hosted in the Microsoft Office 365 Cloud.  If you haven’t already I recommend signing up for your own instance, it’s free and eliminates the need for you to have on-premise development servers.  In addition, you have access to the Napa Tools which are a web based version of Visual Studio, of course it is very stripped down, to help with some of the simple app development.  My initial goal writing this demo was to use the Napa tool, but I realized pretty quickly that wouldn’t be a possibility.

Scenario

This article is going to focus on how we can augment the Hosted Outlook Web Application contact information with data that is stored in SharePoint.  Imagine receiving an e-mail from a customer within your Outlook Web Mail and being able to retrieve the past orders, address, account information, etc for that customer without ever having to leave that e-mail.

How Do We Do It?

SharePoint and Office Apps are really .NET Web Applications being displayed through an IFrame, when using the App Part in SharePoint.  As such we need to provide the page that will display when our App is opened by the Outlook.  For this we simply use an HTML page with a few div’s that we will dynamically update from our JavaScript.

 

Both SharePoint and Office include robust JavaScript Object Model APIs and JavaScript will be at the heart of a lot of new Apps.  In this App we are going to use JavaScript to make asynchronous call(s) to get the SharePoint data.  The first issue with this will be that our SharePoint environment is in a different domain, and therefore because of JavaScript security any direct requests would fail.  To work around this issue I will add a REST web service to the App to effectively proxy the request to SharePoint, but also to simplify the authentication and data returned.  For now we will assume the REST service exists and we will add the JavaScript to make the necessary call and update our display.

 

As I stated, Office and SharePoint have robust JavaScript APIs and we are using those to retrieve from the e-mail the subject, from, and to.  We are making an assumption that the Display Name in the e-mail is [First] [Last] which in a production system we would want to be a bit more robust, or perhaps use the E-Mail as our common identifier.

Following retrieving the information we call our proxy service with the URL of the Site and the list we want to get information from.  In this example we are using the Contacts list, but we could be pointed to a BCS list from a system like CRM or any other type.  The service is going to return a response message, which basically provides debugging information from the services as well as a list of contacts where the Title (aka Last Name) and Address have been populated.  Once we get this information back we will update our html file with the information.

In the REST Proxy we have a bit more work to do.  Because the app is hosted outside of the Office 365 environment, where Outlook and SharePoint run, we have to act as an external application.  As such we will need to create a client context, load it, and then execute any queries necessary to retrieve our information.  Additionally, because our authentication context is only with Outlook we will need to authenticate with SharePoint in order to successfully receive the information.  To simplify the token authentication with Office 365 I found the MsOnlineClaimsHelper which was created by Wictor Wilen and would strongly recommend you take advantage of his work.

 

The service begins by creating the Client Context, adding Wictor’s MsOnlineClaimsHelper, and then retrieving the list items.  If you are familiar with the SharePoint JavaScript, Silverlight, or Phone API(s) this should look extremely familiar.  Unlike the standard SharePoint Object Model notice we have to Load the items and then calling ExecuteQuery before we actually have the items we can work with.  Finally we iterate through the list of items creating an Address string as well as capturing the Last Name (Title) and then returning our response object.  Although this is being done from an external Web Application, it could be performed from a console application, Windows 8 App, Windows Phone App, or Silverlight.

Result

Now that we have a functional web services, we can go ahead and test the application to see what we get. 

 

That is it, we just modified the Office 365 Outlook Web Application to include our custom app and the information from SharePoint.