SharePoint 2013 Hosted App Presentation by Roy Kim

SharePoint 2013 Hosted
App:
Deep Dive Implementation
Roy Kim
January 2013
roykimsharepoint.wordpress.com
@roykimtoronto
roykimtoronto@gmail.com

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


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


App Model

Look at

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


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)

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

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


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


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

Demo: Client Web Part Edit Mode

Client Web Part
Properties


• 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)



• Styling, Title, Caption Settings
1) Master Settings (Default Settings list item)
2) Client Web Part Settings (Override)


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

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

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


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


Default.aspx

• Landing page in app web
• Design consideration:
Can be a place for administrative functionality
(initialization code or settings page)


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


API Set in SP 2013

• http://msdn.microsoft.com/en-us/library/jj164060.aspx

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

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)
);

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

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”


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/Name

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


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


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 }
);

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)
);

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)


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 })

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.


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


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


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)


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)

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


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 $spapp


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.


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

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(..)



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-scroll

HTTP
• Headers, status code, cache headers
• http verbs (e.g. get, post, put, delete)
• Same original policy (browser security)
• REST


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.jspa

Questions

Roy Kim
• Blog
• Email
roykimtoronto@gmail.com
• Twitter
@roykimtoronto


SharePoint 2013 Hosted App Presentation by Roy Kim

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to SharePoint 2013 Hosted App Presentation by Roy Kim (20)

More from Roy Kim (11)

Recently uploaded (20)

SharePoint 2013 Hosted App Presentation by Roy Kim

Editor's Notes