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.
SharePoint 2013 Hosted App Presentation by Roy Kim
1. SharePoint 2013 Hosted
App:
Deep Dive Implementation
Roy Kim
January 2013
roykimsharepoint.wordpress.com
@roykimtoronto
roykimtoronto@gmail.com
roykimsharepoint.wordpress.com
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 - SharePoint
roykimsharepoint.wordpress.com
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 & Tools
roykimsharepoint.wordpress.com
4. App Model
Look at
roykimsharepoint.wordpress.com
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.config
roykimsharepoint.wordpress.com
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. Development Environment Setup
Visual Studio 2012 SharePoint Web App Windows Server 2008
/ Napa R2/2012
Host Web
SP Hosted
DNS Server
Developer 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. 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 App
roykimsharepoint.wordpress.com
9. Web Programming Model
Browser
HTML/CSS
JavaScript/JQuery
CSOM $.ajax
OAuth
R
Client X JSON
E
M
S ODATA
L
Server T
SharePoint Server
http://<server>/<site>/_api
Endpoint
client.svc
Web, Lists, Items, Workflows,
Search, BCS, Managed Metadata, User Profile
roykimsharepoint.wordpress.com
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 list
roykimsharepoint.wordpress.com
11. Demo: Client Web Part Edit Mode
Client Web Part
Properties
roykimsharepoint.wordpress.com
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. 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. 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 Part
roykimsharepoint.wordpress.com
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
Library
roykimsharepoint.wordpress.com Browser SharePoint Server
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 code
roykimsharepoint.wordpress.com
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 application
roykimsharepoint.wordpress.com
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. 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 web
roykimsharepoint.wordpress.com
20. API Set in SP 2013
• http://msdn.microsoft.com/en-us/library/jj164060.aspx
roykimsharepoint.wordpress.com
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.js
roykimsharepoint.wordpress.com
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. 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 functions
roykimsharepoint.wordpress.com
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
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 fiddler
roykimsharepoint.wordpress.com
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
web
roykimsharepoint.wordpress.com
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
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. 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. 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. 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, Read
roykimsharepoint.wordpress.com
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 App
roykimsharepoint.wordpress.com
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. Publishing
Simplistic 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. 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).aspx
roykimsharepoint.wordpress.com
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. 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 Applications
roykimsharepoint.wordpress.com
45. Questions
Roy Kim
• Blog
roykimsharepoint.wordpress.com
• Email
roykimtoronto@gmail.com
• Twitter
@roykimtoronto
roykimsharepoint.wordpress.com
Notas do Editor
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.