0
SharePoint 2013 and
Existing Web Applications
Tips for Leveraging Your Web Application Investments in SharePoint 365 Sites
Hi Everyone!
 Name: Paul Aldigé Katz
 Email: pkatz@limeleap.com
 Twitter Handle: @napkatz
 Company: (http://www.limele...
And I’m a (relatively) new dad!
Eli (and his Mom) gave me the day off
What I’m Showing Today
 How to leverage your existing .NET Web Application investments in
the new SharePoint 2013 app mod...
SharePoint’s New App Model
 To highlight the new app model briefly, Microsoft has:
 Completely separated custom server-s...
SharePoint’s New App Model
 From a GUI perspective, apps appear:
 Within iFrames inside of SharePoint pages using App Pa...
Why choose the Provider-Hosted hosting
method?
 Your app might need to run behind a corporate firewall; for whatever reas...
And perhaps the biggest reason!!!
 You’ve already invested a lot of time, energy, and
$$$ building your web application, ...
I’ll show you how we turned this:
Into that:
Assumptions for this presentation
 You have a SharePoint 2013 Office 365 Developer Site:
 Free 30 Day Trial Available, $...
Assumptions for this presentation
 Your existing web application:
 is at least a .NET 4.0 web application
 Uses some fo...
SharePoint Site Setup
Some initial setup steps to do on your SharePoint site
Create an App Catalog Site
 Click Admin on the top menu and then click
SharePoint in the dropdown
 Click apps on the rig...
Use appregnew.aspx to create a client
secret based relationship with your app
 <Your SharePoint Site>/_layouts/15/appregn...
Use appregnew.aspx to create a client
secret based relationship with your app
 This method does not support multi-tenant ...
Building Your App In Visual Studio 2012
How to build your on-premise app
Create your app in VS2012 - I
Specify your SharePoint
2013 site
Make sure your select
“Provider-hosted” for
where you want...
Create your app in VS2012- II
Specify Use client secret
when setting up
authentication
Create your app in VS2012- III
 Your new solution contains two projects:
 The SharePoint 2013 App project
 A matching w...
In your appManifest.xml file, specify the
start page of your app
Then update the code of your
AppManifest.xml file to include your client
ID.
Add an app part to embed an interface
inside a SharePoint page
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...
Publish your app to SharePoint
Make it available for your site collections
Upload your app file to the SharePoint
developer site.
 Go to your App Catalog Site, and click the Distribute apps for Sh...
Upload your app file
 Click new app, and upload the
.app file the Visual Studio
publishing tool created.
 After the uplo...
We’re half done!!!
Now we need to make your web application talk to SharePoint
Web Application Updates
Updates you can make
Install the SharePoint Server 2013 Client
Components SDK
 http://www.microsoft.com/en-us/download/details.aspx?id=35585
...
Also install Microsoft Identity Foundation
 http://www.microsoft.com/en-us/download/details.aspx?id=17331
In your Visual Studio web project, add..
 Also add the following references
 Microsoft.IdentityModel – Set Copy Local to...
Feel free to use my version of
TokenHelper 
 http://go.limeleap.com/community/bid/298691/SharePoint-2013-App-
Flexibilit...
Database Table
On the start page of your app, leverage
TokenHelper to Authenticate into SharePoint
You should now have a fully
authenticated SharePoint 2013 app!
Although, it looks nothing like SharePoint probably…
Use the Chrome Control
Bring a bit of SharePoint 2013 into your app
http://msdn.microsoft.com/en-us/library/fp179916.aspx
The Chrome Control
 Essentially, the Chrome Control uses JavaScript to:
 load in the style sheet from your SharePoint si...
Standard ways of updating you web
application’s GUI Code
 Minimize how your application’s style sheet interferes with Sha...
The ThemeHelper Class Can be a Huge
Timesaver!
 http://go.limeleap.com/community/bid/287707/How-to-Easily-Bring-
SharePoi...
An Example of ThemeHelper is use
Let’s dive into some code!
A look at how Authentication is working, the Chrome Control, and
ThemeHelper!
Summary
 It doesn’t take long to get a legacy .NET application connected to a
SharePoint 2013 Office 365 site, complete w...
SharePoint 2013 and Existing Web Applications
SharePoint 2013 and Existing Web Applications
Upcoming SlideShare
Loading in...5
×

SharePoint 2013 and Existing Web Applications

3,405

Published on

Tips for Leveraging Your Web Application Investments in SharePoint 365 Sites

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,405
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "SharePoint 2013 and Existing Web Applications"

  1. 1. SharePoint 2013 and Existing Web Applications Tips for Leveraging Your Web Application Investments in SharePoint 365 Sites
  2. 2. 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)
  3. 3. And I’m a (relatively) new dad! Eli (and his Mom) gave me the day off
  4. 4. 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.
  5. 5. 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.
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. I’ll show you how we turned this:
  10. 10. Into that:
  11. 11. 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
  12. 12. 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
  13. 13. SharePoint Site Setup Some initial setup steps to do on your SharePoint site
  14. 14. 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
  15. 15. Use appregnew.aspx to create a client secret based relationship with your app  <Your SharePoint Site>/_layouts/15/appregnew.aspx
  16. 16. 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.
  17. 17. Building Your App In Visual Studio 2012 How to build your on-premise app
  18. 18. 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.
  19. 19. Create your app in VS2012- II Specify Use client secret when setting up authentication
  20. 20. 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.
  21. 21. In your appManifest.xml file, specify the start page of your app
  22. 22. Then update the code of your AppManifest.xml file to include your client ID.
  23. 23. Add an app part to embed an interface inside a SharePoint page
  24. 24. 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
  25. 25. Publish your app to SharePoint Make it available for your site collections
  26. 26. Upload your app file to the SharePoint developer site.  Go to your App Catalog Site, and click the Distribute apps for SharePoint tile
  27. 27. 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:
  28. 28. We’re half done!!! Now we need to make your web application talk to SharePoint
  29. 29. Web Application Updates Updates you can make
  30. 30. 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.
  31. 31. Also install Microsoft Identity Foundation  http://www.microsoft.com/en-us/download/details.aspx?id=17331
  32. 32. 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………………
  33. 33. 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
  34. 34. Database Table
  35. 35. On the start page of your app, leverage TokenHelper to Authenticate into SharePoint
  36. 36. You should now have a fully authenticated SharePoint 2013 app! Although, it looks nothing like SharePoint probably…
  37. 37. Use the Chrome Control Bring a bit of SharePoint 2013 into your app http://msdn.microsoft.com/en-us/library/fp179916.aspx
  38. 38. 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
  39. 39. 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…….
  40. 40. 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!
  41. 41. An Example of ThemeHelper is use
  42. 42. Let’s dive into some code! A look at how Authentication is working, the Chrome Control, and ThemeHelper!
  43. 43. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×