Auto Hosted App : SharePointContext/SharePointContextFilter With JSON and client chrome control

Poster un commentaire

mars 13, 2014 par jvanderoost

Hi all,

Before I begin, I want to say thank you to a few friends and a few developers with which I worked. Thank you to Fievez Vincent for his ideas and his great sense of observation, thank you to Jean-Paul Hecquet which is a great analyst and mastering SQL depth, thank you Taylan Bagcigil has with which I worked earlier this year and the end of last year that has a knack for design and mastering SharePoint and i want to say thank for his investment, he was able to accommodate my crazy schedules.

As you may have noticed, Visual Studio 2013 offers new things about Apps for SharePoint, I showed you how to use TokenHelper in previous articles, the TokenHelper was really powerful but it had limitations and a way of working that could be complex at times.

Now when you create a new SharePoint Apps, you have the following architecture:

First things : SharePointContext

This is a new class that is added in the new out of the box template is helps you manage your SharePoint context across page requests.

When SharePoint “starts” an app when a user launches an app, SharePoint packs up some information about that user and passes it along to the app as a POST parameter. This is called the ContextToken and it contains OAuth tokens/information that you need in order to make calls back to SharePoint. Now the trick is that SharePoint passes it to your app when it launches and then it is up to you to do something like cache it so that in subsequent page requests your app has that context and can reuse it.  The basic auth token in it is good for 12 hours & it also contains a refresh token that can be used to get new auth tokens for up to 6 months.

The first question people that are new to SharePoint app development ask me is “my app breaks on the second page request, why?” … it is usually because they don’t realize its totally up to them to cache these very important tokens.

How to use it ?

It’s just really easy …

The SharePointContextProvider.Current.GetSharePointContext(HttpContext) creating a new context object & initializing it using all that good information passed as a POST parameter and some querystring parameters too.

When you make the GetSharePointContext(HttpContext) call the class checks the ASP.Net Session state for an existing context. If it doesn’t find one then it creates a new one based on the information passed and then stashes it in Session state for subsequent requests.

Second things : SharePointContextFilter

This attribute on controller actions ensures a context is passed from SharePoint. If not it will redirect the user back to SharePoint to obtain one.  Why is this important?  Well, if someone bookmarks your app then when they use that bookmark the context wont be passed & in that case you need to bounce them via SharePoint to go and get one for the first request.  The SharePointContextFilter automates that for you.  This is only available in the MVC project however. Very handy indeed not having to wire up this flow yourself!

You don’t need to worry about writing any of this however, as it is all done for you in the helper class.

Third things: spcontext.js

The spcontext.js library is used to automatically append the SPHostUrl parameter to every link on a page. In MVC5, the library is packaged in its own bundle, so it’s easy to add to an existing layout.

Last things : Chrome Controle Client

n the new SharePoint 2013 App model, there are essentially two ways to host apps – within SharePoint itself or from an external web site (also known as « provider hosted » or « autohosted »). One of the disadvantages of external apps is that they don’t look or feel like SharePoint. All the familiar navigation menus and shortcuts are missing, resulting in a stark contrast between the default SharePoint visual experience and whichever app is currently being used unless the app developer went the extra mile (or ten) to style their app.

Microsoft allows developers to import a very basic version of the SharePoint 2013 chrome into their apps without having to manually create matching HTML controls. The functionality for this can be found in the SP.UI.Controls.js file located in the new /_layouts/15 directory.

And if we do it? Integrating SharePointContextFilter with JQuery for example, integrate customer Chrome Control …

Let’s go, I take a solution and go! I’ll start with my create a Database to insert data into it. Then I’ll add my SharePointContextFilter all my methods.

I’ll start by creating my Controller and create all the necessary methods :

You need to use JsonResult? No matters:

In the view, you simply need to add one thing to call JSON, I create a simply sample Script for you :

Now the Chrome Control, First I will create my bundles:

Now i want to modify the _Layout and add some Scripts, but first check the header of the « MasterPage » to add the CSS of SharePoint and use the Control of SharePoint, i need to add some references :

The Result :

As you can see, I now have the style: « SharePoint » and navigation « SharePoint » in my Auto Hosted App in MVC5 and my SharePointContextFilter, if I ever have to refresh my token, it is automatic or it asks me to log in again.

My next article will cover the licensing of apps in the Store. How to simulate during development, and how to verify that license is valid for a specific user, for example.

Enjoy!