1. SharePoint 2013 and
Existing Web Applications
Tips for Leveraging Your Web Application Investments in SharePoint 365 Sites
2.
3.
4. Hi Everyone!
Name: Paul Aldigé Katz
Email: pkatz@limeleap.com
Twitter Handle: @napkatz
Company: (http://www.limeleap.com)
LinkedIn: https://www.linkedin.com/profile/view?id=2708087
Job Title: Chief Software Architect
Hobbies: Tennis, Windows Phone Development (in my copious amount of free time)
5. And I’m a (relatively) new dad!
Eli (and his Mom) gave me the day off
6. What I’m Showing Today
How to leverage your existing .NET Web Application investments in
the new SharePoint 2013 app model
LimeLeap received a lot of help when building our SharePoint
products from the SharePoint community, so we thought we’d return
the favor in kind.
7. SharePoint’s New App Model
To highlight the new app model briefly, Microsoft has:
Completely separated custom server-side code from SharePoint in order
to protect SharePoint’s core code from extra resource intensive
processing. Unlike web parts, no server-side app code runs on SharePoint’s
server.
In return, Microsoft has made a HUGE investment in providing service-
based methods for exposing SharePoint’s object library to code running on
other servers.
8. SharePoint’s New App Model
From a GUI perspective, apps appear:
Within iFrames inside of SharePoint pages using App Parts OR
As full web sites running on a different server using SharePoint’s available client-side
libraries and web services to bring in SharePoint’s design theme.
In either case, your app’s server-side code does not run in SharePoint
Your app’s server-side code can either run in an auto-hosted Azure space,
or on your own server infrastructure, via the provider-hosted app model.
For the purposes of this presentation, we’ll focus on the latter
9. Why choose the Provider-Hosted hosting
method?
Your app might need to run behind a corporate firewall; for whatever reason,
hosting it in the cloud is a no-no.
Your app’s server-side code is PHP, JSP, etc…
SharePoint 2013 is just one of many clients for your web application
You just like the control of directly running your own app
10. And perhaps the biggest reason!!!
You’ve already invested a lot of time, energy, and
$$$ building your web application, and don’t want
to rebuild it!
So today, I’ll show you how to bring that
investment into SharePoint 365
13. Assumptions for this presentation
You have a SharePoint 2013 Office 365 Developer Site:
Free 30 Day Trial Available, $100 a year afterward
http://msdn.microsoft.com/en-us/library/fp179924.aspx
Free for MSDN Premium and Ultimate Subscribers
Can be provisioned from Office 365 E1 or E3 plans
You have Visual Studio 2012 Professional or higher installed, and Microsoft
Office Developer Tools for Visual Studio 2012
You have at least Visual Studio 2010 or higher to upgrade the codebase of your
existing web application
14. Assumptions for this presentation
Your existing web application:
is at least a .NET 4.0 web application
Uses some form of internal users database table to manage accounts
We’ll be syncing this later with the Office 365 account
16. Create an App Catalog Site
Click Admin on the top menu and then click
SharePoint in the dropdown
Click apps on the right sidebar
Click App Catalog under apps. SharePoint will
guide you though creating your App Catalog
Site if you don’t already have one
17. Use appregnew.aspx to create a client
secret based relationship with your app
<Your SharePoint Site>/_layouts/15/appregnew.aspx
18. Use appregnew.aspx to create a client
secret based relationship with your app
This method does not support multi-tenant uses of your app
Use the Microsoft Seller Dashboard if you want to “sell” your app to multiple
SharePoint installations
Your app Domain will need to include a specific port number if it won’t be
running on a standard SSL port.
Make sure you write down the information created. It will be necessary when
packaging your app.
19. Building Your App In Visual Studio 2012
How to build your on-premise app
20. Create your app in VS2012 - I
Specify your SharePoint
2013 site
Make sure your select
“Provider-hosted” for
where you want to host
your app.
21. Create your app in VS2012- II
Specify Use client secret
when setting up
authentication
22. Create your app in VS2012- III
Your new solution contains two projects:
The SharePoint 2013 App project
A matching web application project that Visual Studio assumes will be your
provider hosted app. For the purposes of this walkthrough you can ignore it.
24. Then update the code of your
AppManifest.xml file to include your client
ID.
25. Add an app part to embed an interface
inside a SharePoint page
26. Now Publish your app to create an .app
file.
You’ll be asked for your
Client ID and Secret. Enter
them in the wizard.
Also, specify the website
your app will be hosted
it’s OK to specify an SSL
address that doesn’t exist.
For our method of
deployment, it doesn’t
matter
27. Publish your app to SharePoint
Make it available for your site collections
28. Upload your app file to the SharePoint
developer site.
Go to your App Catalog Site, and click the Distribute apps for SharePoint tile
29. Upload your app file
Click new app, and upload the
.app file the Visual Studio
publishing tool created.
After the upload, add any
additional information for your
catalog entry:
32. Install the SharePoint Server 2013 Client
Components SDK
http://www.microsoft.com/en-us/download/details.aspx?id=35585
Install it on the web server that will be hosting your provider-hosted app
Also, install it on any development workstations that do not have Visual
Studio 2012 installed, but will be used to update the web application’s code.
33. Also install Microsoft Identity Foundation
http://www.microsoft.com/en-us/download/details.aspx?id=17331
34. In your Visual Studio web project, add..
Also add the following references
Microsoft.IdentityModel – Set Copy Local to true
Microsoft.IdentityModel.Extensions – Set Copy Local to true
Microsoft.SharePoint.Client – Set Copy Local to true
Microsoft.SharePoint.Client.Runtime – Set Copy Local to true
System.IdentityModel
System.Web.Extensions
System.ServiceModel
System.Web.Extensions
TokenHelper.vb or TokenHelper.cs
Can be cut and pasted from the Visual Studio 2012 app project.
Should also be available online
BUT………………
35. Feel free to use my version of
TokenHelper
http://go.limeleap.com/community/bid/298691/SharePoint-2013-App-
Flexibility-Instantiate-Your-TokenHelper-Class
This allows you to allow your web application to become the backend for
multiple SharePoint 2013 Provider-Hosted Apps
Then use any mechanism you would like to sync up incoming apps to your web
application: I chose a database table
37. On the start page of your app, leverage
TokenHelper to Authenticate into SharePoint
38. You should now have a fully
authenticated SharePoint 2013 app!
Although, it looks nothing like SharePoint probably…
39. Use the Chrome Control
Bring a bit of SharePoint 2013 into your app
http://msdn.microsoft.com/en-us/library/fp179916.aspx
40. The Chrome Control
Essentially, the Chrome Control uses JavaScript to:
load in the style sheet from your SharePoint site
Integrate a top navigation bar you can customize.
For more info: http://msdn.microsoft.com/en-us/library/fp179916.aspx
41. Standard ways of updating you web
application’s GUI Code
Minimize how your application’s style sheet interferes with SharePoint’s style
sheet.
If Your Have More Time….
Adopt SharePoint styles instead of using your web application’s styles so that your
application’s design changes properly when an end-user changes their SharePoint
theme.
See if the overall layout of your web application fits SharePoint’s Modern UI look
and feel.
BUT…….
42. The ThemeHelper Class Can be a Huge
Timesaver!
http://go.limeleap.com/community/bid/287707/How-to-Easily-Bring-
SharePoint-2013-Theme-Colors-Into-Your-Apps
This is a HUGE timesaver if it can be assumed your App will have Manage
rights for the SharePoint site
The ThemeHelper class downloads SharePoint’s Theme Colors into a local
class, and you can then use them in a Client-Side Style Sheet
You will want to used caching here!
44. Let’s dive into some code!
A look at how Authentication is working, the Chrome Control, and
ThemeHelper!
45. Summary
It doesn’t take long to get a legacy .NET application connected to a
SharePoint 2013 Office 365 site, complete with seamless authentication
You can enjoy the relative inexpensiveness and availability of a SharePoint
2013 Office 365 site, while pulling in legacy applications hosted elsewhere
The price for each Office 365 E1 user is only $8.00 a month, and also includes
Hosted Email, Office Web Apps, Lync, Skydrive Pro
We really haven’t touched the surface of what SharePoint apps can actually
do with the SharePoint object model. All we did was authenticate, but there’s
tons more available via the SharePoint.Client library