SharePoint 2013 Hosted App Presentation by Roy Kim


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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • DNS Server – Create wild card DNS entry for app web host named sitesApps Service application & 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('CoverPhotos')http://win2008/_api/web/lists/getbytitle('CoverPhotos')/items(1)
  • e.g.http://win2008/_api/web/lists/getbytitle('CoverPhotos')http://win2008/_api/web/lists/getbytitle('CoverPhotos')/items(1)
  • http://<appweburl>/_api/SP.AppContextSite(@target)/web/title?@target='http://win2008‘/PhotoApp/_api/SP.AppContextSite(@target)/web/lists/getbytitle('CoverPhotos')/items?$expand=File,ParentList&@target='http://win2008'
  • SharePoint 2013 Hosted App Presentation by Roy Kim

    1. 1. SharePoint 2013 Hosted App: Deep Dive Implementation Roy Kim January 2013 @roykimtoronto
    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 -
    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 &
    4. 4. App Model Look
    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,
    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)
    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 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
    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
    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
    11. 11. Demo: Client Web Part Edit Mode Client Web Part
    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)
    13. 13. Demo: Photo Banner App • Styling, Title, Caption Settings 1) Master Settings (Default Settings list item) 2) Client Web Part Settings (Override)
    14. 14. App at Runtime Site Collection Domain: Domain: <prefix> 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 Client Web
    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 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
    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
    18. 18. Default.aspx • Landing page in app web • Design consideration: Can be a place for administrative functionality (initialization code or settings page)
    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
    20. 20. API Set in SP 2013 •
    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
    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) );
    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
    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”
    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/
    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
    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
    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 } );
    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) );
    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)
    31. 31. Cross Domain/iFrame Communication Domain: Host Web <iframe> 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 })
    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
    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,
    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
    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)
    36. 36. PublishingSimplistic Deployment Path Visual Studio Office 365 2012 Napa App– SharePoint Hosted App App Code Code /bin/ /Lists/AppPackages/ SharePoint Farm SharePoint Web App Office 365 (SharePoint) App App Host Web Catalog Site Host Web Catalog Site App Web App Web (subsite) (subsite)
    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:
    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 $
    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
    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
    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(..), $
    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,
    43. 43. Developer Skills & Knowledge HTTP • Headers, status code, cache headers • http verbs (e.g. get, post, put, delete) • Same original policy (browser security) •
    44. 44. Tools Client Side • Visual Studio JavaScript Outline Parser • Chrome Developer Tools, FireBug. IE Developer Tools • JS Regex • • Fiddler Server Side • SharePoint Manager 2013 • UlSViewer • PowerShell Editor: PowerGUI
    45. 45. Questions Roy Kim • Blog • Email • Twitter