SharePoint 2013 Hosted     App:     Deep Dive Implementation     Roy Kim     January 2013     roykimsharepoint.wordpress.c...
About Me          • 5 years of SharePoint          • 10 years of Microsoft .NET platform          • Previous companies    ...
Agenda               The following presentation is about sharing my experience and knowledge in the               course o...
App Model     Look atroykimsharepoint.wordpress.com
App Model Key Design Theme: Isolation          • Application runtime isolation          • Can be hosted away from SP serve...
Consequences of Isolation          • Push Client Side technologies and concepts (HTML,            JS, .NET Client OM)     ...
Development Environment Setup                    Visual Studio 2012                     SharePoint Web App           Windo...
SharePoint Hosted App Development Steps          1. Prerequisites             SharePoint 2013 Installation             Vis...
Web Programming Model                                          Browser                                                  HT...
Demo: Photo Banner App         • Photo Banner Rotator displaying a title and caption         • UI component: Client web pa...
Demo: Client Web Part Edit Mode                                                Client Web Part                            ...
Demo: Photo Banner App                                 • Banner Title                                 • Photo Caption     ...
Demo: Photo Banner App   • Styling, Title, Caption Settings   1) Master Settings (Default Settings list item)   2) Client ...
App at Runtime                  Site Collection                    Domain: www.portal.com                           Domain...
Project Solution Structure                          UI                     Client Side       App Web                      ...
Solution Structure & Project Items          • App Manifest            Properties and metadata of the app for registration ...
What is the App Web?          • Not intended to be a full feature SharePoint site.          • Just a container for default...
Default.aspx          • Landing page in app web          • Design consideration:            Can be a place for administrat...
Client Web Part          • Aka “App Part”          • ClientWebPart.aspx          • Expose app within host web pages.      ...
API Set in SP 2013        • http://msdn.microsoft.com/en-us/library/jj164060.aspxroykimsharepoint.wordpress.com
JavaScript Object Model          • Request batching instructions into an async http            request          • “object ...
JavaScript Object Model    var clientContext = new SP.ClientContext(siteUrl);    this.oWebsite = clientContext.get_web(); ...
Photo Banner App      Client Browser                                                          SharePoint Server API      A...
REST API          • Uniform interface for all types of clients and servers to            access SharePoint.          • AJA...
REST API          • $.ajax( url, type, data, callback function)          • <server>/_api/web/lists(„<guid>‟)            <s...
REST API vs JSOM                    REST                                   JSOM                    More declarative as ins...
Cross Domain Call       • To get around browser same origin policy, the cross-         domain library is a client-side alt...
Cross Domain Call : REST  // Initialize the RequestExecutor with the app web URL.  executor = new SP.RequestExecutor(appwe...
Cross Domain Call : JSOM context = new SP.ClientContext(appweburl); factory = new SP.ProxyWebRequestExecutorFactory(appweb...
Cross Domain Call     Reference:     Code sample: Get the host web title using the cross-domain library       (REST)     C...
Cross Domain/iFrame Communication  Domain: www.portal.com                  Host Web                                       ...
No App Activation Event Receiver          • No notice of app event receiver for when an app is            first activated ...
App Permissions       • Permission requests are declared in the AppManifest.xml       • Permissions on objects such as Web...
App Permissions          • Can we request permission on a specific list?            Have not noticed any proven way to ask...
Debugging          • Use Chrome/IE Developer Tools, FireBug          • No ULS logging with JavaScript (of course)         ...
PublishingSimplistic Deployment Path                  Visual Studio                                    Office 365         ...
Publishing            • Visual Studio Solution > Right Click – Publish            • Output folder: Projects<MyApp>binDebug...
PowerShell Deployment         •      Import-SPAppPackage -Path "$appPath" -Site $Web -Source $sourceApp         •      Ins...
Publishing       $spapp = Import-SPAppPackage -Path Path to app -Site URL -Source Source       # Imports the app and sets ...
Gotchas/Issues         • AppWeb – Access is denied           Disable loopback check – prevents reflection attack         •...
Developer Skills & Knowledge          JavaScript          • functions, function objects, types,            comparison oper...
Developer Skills & Knowledge          HTML          • <div>, <span>, <ul>, <ol>, <li>, <table>, <input>          CSS      ...
Developer Skills & Knowledge         HTTP         • Headers, status code, cache headers         • http verbs (e.g. get, po...
Tools          Client Side          • Visual Studio JavaScript Outline Parser                  http://visualstudiogallery....
Questions                                 Roy Kim                                 • Blog                                  ...
Upcoming SlideShare
Loading in...5
×

SharePoint 2013 Hosted App Presentation by Roy Kim

7,095

Published on

Sharing my experience and knowledge of developing a SharePoint Hosted App during late 2012. This app is a photo slider with a Picture Library and a custom list to hold default settings. Subjects include, REST API, JavaScript Object Model, Client Web Part, App Web, Cross Domain Call to the host web and other developer insights.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,095
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • DNS Server – Create wild card DNS entry for app web host named sitesApps Service application &amp; Subscription Settings –App Management –These services support apps in your environment by storing the data needed to run apps in the farm. The Subscription Settings service and the App Management Service store app licenses, app principals, app users, app registrations, and so on.
  • e.g.http://win2008/_api/web/lists/getbytitle(&apos;CoverPhotos&apos;)http://win2008/_api/web/lists/getbytitle(&apos;CoverPhotos&apos;)/items(1)
  • e.g.http://win2008/_api/web/lists/getbytitle(&apos;CoverPhotos&apos;)http://win2008/_api/web/lists/getbytitle(&apos;CoverPhotos&apos;)/items(1)
  • http://&lt;appweburl&gt;/_api/SP.AppContextSite(@target)/web/title?@target=&apos;http://win2008‘/PhotoApp/_api/SP.AppContextSite(@target)/web/lists/getbytitle(&apos;CoverPhotos&apos;)/items?$expand=File,ParentList&amp;@target=&apos;http://win2008&apos;
  • Transcript of "SharePoint 2013 Hosted App Presentation by Roy Kim"

    1. 1. SharePoint 2013 Hosted App: Deep Dive Implementation Roy Kim January 2013 roykimsharepoint.wordpress.com @roykimtoronto roykimtoronto@gmail.comroykimsharepoint.wordpress.com
    2. 2. About Me • 5 years of SharePoint • 10 years of Microsoft .NET platform • Previous companies Pricewaterhouse Coopers, Infusion, Accenture • 2 years in community involvement Speaking, blogging, user groups • Jack of all trades, expert at one - SharePointroykimsharepoint.wordpress.com
    3. 3. Agenda The following presentation is about sharing my experience and knowledge in the course of building a SharePoint 2013 Hosted App. • App Model Overview • Development Environment • SharePoint App at Runtime • Implementation Insights • Deployment & Publishing • Developer Skill Set & Toolsroykimsharepoint.wordpress.com
    4. 4. App Model Look atroykimsharepoint.wordpress.com
    5. 5. App Model Key Design Theme: Isolation • Application runtime isolation • Can be hosted away from SP server • Security boundary • Delegated deployment to site collection administrator or site admin • Deployment isolation from farm and server level repositories – 15 Hive, GAC, IIS, virtual folders, web.configroykimsharepoint.wordpress.com
    6. 6. Consequences of Isolation • Push Client Side technologies and concepts (HTML, JS, .NET Client OM) • API programming model (CSOM, REST+ODATA,) • Security: cross domain scripting, app permissions, OAuth • Remote hosting server (provider hosted/autohosted) • Manage application level tenancy for provider hosted apps. • No UI integration (e.g. client web part iframe)roykimsharepoint.wordpress.com
    7. 7. Development Environment Setup Visual Studio 2012 SharePoint Web App Windows Server 2008 / Napa R2/2012 Host Web SP Hosted DNS ServerDeveloper Machine App App Web (subsite) SharePoint Service Applications Browser Provider Hosted Subscription (IE, Chrome, FFX) Settings Web Site (IIS) Custom Web Custom Web App Management Application Application
    8. 8. SharePoint Hosted App Development Steps 1. Prerequisites SharePoint 2013 Installation Visual Studio 2012 Microsoft Office Developer Tools for VS2012 RTM – Preview (from Web Platform installer) 2. DNS Server: Create wildcard domain for apps 3. Central Admin: Manage Service Applications http://msdn.microsoft.com/en-us/library/fp179923(v=office.15) 4. Central Admin > App > Configure App Urls 5. Visual Studio 2012: Create SharePoint 2013 App project 1. Write your code 2. Set target deployment Site Url in Project Properties 3. Right click „Deploy „ 6. SP Site: Go to Site > Site Contents 1. Add an Approykimsharepoint.wordpress.com
    9. 9. Web Programming Model Browser HTML/CSS JavaScript/JQuery CSOM $.ajax OAuth RClient X JSON E M S ODATA LServer T SharePoint Server http://<server>/<site>/_api Endpoint client.svc Web, Lists, Items, Workflows, Search, BCS, Managed Metadata, User Profile roykimsharepoint.wordpress.com
    10. 10. Demo: Photo Banner App • Photo Banner Rotator displaying a title and caption • UI component: Client web part with custom properties • Business Logic: Client Side JavaScript • Data Access Logic: JavaScript Object Model / REST API • Data Store: Photo library, Settings custom listroykimsharepoint.wordpress.com
    11. 11. Demo: Client Web Part Edit Mode Client Web Part Propertiesroykimsharepoint.wordpress.com
    12. 12. Demo: Photo Banner App • Banner Title • Photo Caption • Photo Library Source: Host Web or App Web • Host Web must have Picture Library the following columns • Column Presented as Title Banner Title Description Photo Caption Active Flag to display photo (RoutingEnabled)roykimsharepoint.wordpress.com
    13. 13. Demo: Photo Banner App • Styling, Title, Caption Settings 1) Master Settings (Default Settings list item) 2) Client Web Part Settings (Override)roykimsharepoint.wordpress.com
    14. 14. App at Runtime Site Collection Domain: www.portal.com Domain: <prefix>.portalapps.com Host Web App Web Clientwebpart Default.aspx Home.aspx .aspx Site Columns Site Columns Site Columns App.js Photo Settings Content Type Content Type Photo Library Photo Settings List Library REST API Browser www.portal.com www.portalapps.com Client Web Partroykimsharepoint.wordpress.com
    15. 15. Project Solution Structure UI Client Side App Web Business Logic jQuery.js AppManifest. Default.aspx Feature.xml xml elements.xml elements.xml Clientwebpart Site Columns Site Columns App.js Site Columns App Package .aspx Settings Photo (deployment) Content Type Content Type App.css Photo Settings List Libraryroykimsharepoint.wordpress.com Browser SharePoint Server
    16. 16. Solution Structure & Project Items • App Manifest Properties and metadata of the app for registration and installation into the host SharePoint site • Client Side Libraries Microsoft.Ajax.js sp.runtime.js sp.js • Default.aspx, clientwebpart.aspx • Elements.xml, schema.xml • No server side C# or VB .NET coderoykimsharepoint.wordpress.com
    17. 17. What is the App Web? • Not intended to be a full feature SharePoint site. • Just a container for default.aspx page, lists, etc. • App Web Site Definition APP#0 • Chrome (master page) is simplified and locked down. No navigation – only link back to host web. • Full immersive applicationroykimsharepoint.wordpress.com
    18. 18. Default.aspx • Landing page in app web • Design consideration: Can be a place for administrative functionality (initialization code or settings page)roykimsharepoint.wordpress.com
    19. 19. Client Web Part • Aka “App Part” • ClientWebPart.aspx • Expose app within host web pages. • Web Part properties are in the form of query string parameters Reference: Blog Client Webpart Properties • Can not interface or communicate with other web parts. • Generates iFrame with url referring to app webroykimsharepoint.wordpress.com
    20. 20. API Set in SP 2013 • http://msdn.microsoft.com/en-us/library/jj164060.aspxroykimsharepoint.wordpress.com
    21. 21. JavaScript Object Model • Request batching instructions into an async http request • “object oriented” • Intellisense capability in VS 2012 • Data returned as JSON • JS Library Microsoft.Ajax.js sp.runtime.js sp.jsroykimsharepoint.wordpress.com
    22. 22. JavaScript Object Model var clientContext = new SP.ClientContext(siteUrl); this.oWebsite = clientContext.get_web(); this.oWebsite.set_title(Updated Web Site); Batch this.oWebsite.set_description(This is an updated Web site.); this.oWebsite.update(); clientContext.load(this.oWebsite, Title, Description); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );roykimsharepoint.wordpress.com
    23. 23. Photo Banner App Client Browser SharePoint Server API App Web: CS Logic Default.aspx AppViewModel.js Client Web part.aspx CPApp object getCoverPhotosListData Query Settings List (async) onCheckSettings (callback) Query Photo List (async) Asynchronous onGetPhotosList (callback) calls chained in call back functionsroykimsharepoint.wordpress.com
    24. 24. REST API • Uniform interface for all types of clients and servers to access SharePoint. • AJAX + RESTful Urls/endpoints + OData + JSON/Atom • OData protocol • Query string operators to select, filter, order, etc.. • “kind of like SQL clauses for the web”roykimsharepoint.wordpress.com
    25. 25. REST API • $.ajax( url, type, data, callback function) • <server>/_api/web/lists(„<guid>‟) <server>/_api/web/lists/getbytitle(„Title‟) <server>/_api/web/lists/add • JSON Input { "d" : { "results": { "__metadata": { "type": "SP.ListCreationInformation" }, "CustomSchemaXml": "…large payload…/", "Description": "desc", "DocumentTemplateType": "1", "TemplateType": "101", "Title": "Announcements" } } } • Odata Query /Products?$select=Title,Products/Name&$expand=Products/Nameroykimsharepoint.wordpress.com
    26. 26. REST API vs JSOM REST JSOM More declarative as instructions are in More imperative approach with the JSON object properties and methods. Easy debugging read/GET requests Intellisense support in VS using browser and/or fiddlerroykimsharepoint.wordpress.com
    27. 27. Cross Domain Call • To get around browser same origin policy, the cross- domain library is a client-side alternative • SP.RequestExecutor.js is hosted in the SharePoint website that you can reference in your remote app. • Allows you to interact with more than one domain in your remote app page through a proxy. • AppContextSite object is the “gateway” to the host webroykimsharepoint.wordpress.com
    28. 28. Cross Domain Call : REST // Initialize the RequestExecutor with the app web URL. executor = new SP.RequestExecutor(appweburl); executor.executeAsync( { url: appweburl + "/_api/SP.AppContextSite(@target)/web/title?@target=" + hostweburl + "", method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: successHandler, error: errorHandler } );roykimsharepoint.wordpress.com
    29. 29. Cross Domain Call : JSOM context = new SP.ClientContext(appweburl); factory = new SP.ProxyWebRequestExecutorFactory(appweburl); context.set_webRequestExecutorFactory(factory); appContextSite = new SP.AppContextSite(context, hostweburl); this.web = appContextSite.get_web(); context.load(this.web); context.executeQueryAsync( Function.createDelegate(this, successHandler), Function.createDelegate(this, errorHandler) );roykimsharepoint.wordpress.com
    30. 30. Cross Domain Call Reference: Code sample: Get the host web title using the cross-domain library (REST) Code sample: Get the host web title using the cross-domain library (JSOM)roykimsharepoint.wordpress.com
    31. 31. Cross Domain/iFrame Communication Domain: www.portal.com Host Web <iframe> www.portalapps.com SP.RequestExecutor.js Client Web Part Page iframe postMessage REST API Send to iFrame: iframeWin.postMessage(messageObject, targetDomainString) Event receiver in iFrame: Photo Library window.attachEvent(“iFrameWinMessage”, function(e) { e.origin })roykimsharepoint.wordpress.com
    32. 32. No App Activation Event Receiver • No notice of app event receiver for when an app is first activated • There exists „App Installed‟, „App Uninstall‟, „App Upgrade” events, but are executed before creating any lists or executes any code. • Workaround: On every app load, have some conditional initialization logic to do initial setup.roykimsharepoint.wordpress.com
    33. 33. App Permissions • Permission requests are declared in the AppManifest.xml • Permissions on objects such as Web, List and other SP services on behalf of the user. • Permissions Levels : Manage, Full Control, Contribute, Readroykimsharepoint.wordpress.com
    34. 34. App Permissions • Can we request permission on a specific list? Have not noticed any proven way to ask permissions for a specific object or specific set of objects. E.g. App wants only to read only Customer list and Documents library. • Authorization is facilitated by the SharePoint security infrastructure. • OAuth is not needed in SharePoint Hosted Approykimsharepoint.wordpress.com
    35. 35. Debugging • Use Chrome/IE Developer Tools, FireBug • No ULS logging with JavaScript (of course) • Can not find a way to directly update HTML, CSS, JS files in App Web (Dev Environment)roykimsharepoint.wordpress.com
    36. 36. PublishingSimplistic Deployment Path Visual Studio Office 365 2012 Napa App– SharePoint Hosted App App Code Code /bin/publish.app/myApp.app /Lists/AppPackages/myApp.app myApp.app SharePoint Farm SharePoint Web App Office 365 (SharePoint) App App Host Web Catalog Site Host Web Catalog Site App Web App Web (subsite) (subsite)roykimsharepoint.wordpress.com
    37. 37. Publishing • Visual Studio Solution > Right Click – Publish • Output folder: Projects<MyApp>binDebugapp.publish Creates an app package file with file extension .app. Can rename extension .app to .zip file to see file contents. Output folder comes with deployment script and deployment configuration files. • Deploy to App Catalog in On Premise or Office 365 (cloud) • Reference: http://msdn.microsoft.com/en-us/library/jj220044.aspx http://msdn.microsoft.com/en-us/library/ff356104(VS.110).aspxroykimsharepoint.wordpress.com
    38. 38. PowerShell Deployment • Import-SPAppPackage -Path "$appPath" -Site $Web -Source $sourceApp • Install-SPApp -Web $Web -Identity $spapp Get-SPAppInstance - Web $Web | where-object {$_.Title -eq $AppName} • Uninstall-SPAppInstance –Identity $appInstance • Import-SPAppPackage -Path "$appPath" -Site $Web -Source $sourceApp • Update-SPAppInstance -Identity $appInstance -App $spapproykimsharepoint.wordpress.com
    39. 39. Publishing $spapp = Import-SPAppPackage -Path Path to app -Site URL -Source Source # Imports the app and sets a variable that you can use to identify the app when you install it in the next step. Install-SPApp -Web URL -Identity $spapp # Installs the app to the subweb you specify.roykimsharepoint.wordpress.com
    40. 40. Gotchas/Issues • AppWeb – Access is denied Disable loopback check – prevents reflection attack • VS Deploy App – Output Window: Failed to install app. Error in the xml declarative mark up in the solution files Investigate xml syntax errors. Troubleshoot by removing, one by one, elements in the feature to trace problem area. • Deployment Issues with failing to deploy: Check if App Management and Subscription Settings Service is „started‟ in Central Admin > Manage Service Applicationsroykimsharepoint.wordpress.com
    41. 41. Developer Skills & Knowledge JavaScript • functions, function objects, types, comparison operators, object literals, variable scope, this keyword • null, undefined, NaN • JSON • JQuery • Selectors, $.each, $(document).ready(function() { ... }), module pattern • $.ajax(...) function, $.get(..), $get.post(..)roykimsharepoint.wordpress.com
    42. 42. Developer Skills & Knowledge HTML • <div>, <span>, <ul>, <ol>, <li>, <table>, <input> CSS • Layout display, overflow, float, position, top, left, z-index • Structure padding, margin, width, height, • Styling font, color, border, text-overflow, overflow, no-scrollroykimsharepoint.wordpress.com
    43. 43. Developer Skills & Knowledge HTTP • Headers, status code, cache headers • http verbs (e.g. get, post, put, delete) • Same original policy (browser security) • RESTroykimsharepoint.wordpress.com
    44. 44. Tools Client Side • Visual Studio JavaScript Outline Parser http://visualstudiogallery.msdn.microsoft.com/288a2b0f-1357-47b4-8215-1134c36bdf30 • Chrome Developer Tools, FireBug. IE Developer Tools • JS Regex http://www.jslab.dk/tools.regex.php • jsbeautifier.org • Fiddler Server Side • SharePoint Manager 2013 • UlSViewer • PowerShell Editor: PowerGUI http://powergui.org/downloads.jsparoykimsharepoint.wordpress.com
    45. 45. Questions Roy Kim • Blog roykimsharepoint.wordpress.com • Email roykimtoronto@gmail.com • Twitter @roykimtorontoroykimsharepoint.wordpress.com

    ×