1. SP Apps, New Model, New App
Store: The Office Store
Alberto Díaz Martín (@adiazcan)
Juan Carlos González Martín (@jcgm1978)

2. Session Agenda
• Overview of the SharePoint Apps model
• SharePoint-Hosted Apps
• Autohosted Apps
• Provider-Hosted Apps
• Development Tools & Technologies
• Show me the money: The Office Store

3. Microsoft Vision: Modernizing the Platform
Today’sMarket Today’sTrends Our Principles

4. Evolution of SharePoint Development
2007 2010 2013

5. So…What are SharePoint Apps?
• Apps are self-contained pieces of functionality that extend the
capabilities of a SharePoint site
• Apps integrate the best of the web and SharePoint; they are
targeted and easy-to-use, and do a great job at solving user
needs
App
App ManifestWeb Page
<XML>HTML/CSS/JS

6. The Result: A new Cloud Apps Model

7. ServerClient
BrowserHost
Common Apps Architecture
WebServerHost
SharePoint
& Exchange
OtherDevices
&Clients
Office
APP
3rdPartyServices
ClientAPIs
ServerAPIs

8. App Permissions
• App permissions are configured in the App manifest:
– Developers specify the permissions the App needs to be able to
run
• Apps request permissions during installation:
– Granting App permissions is all or nothing – It’s not possible to
pick or choose what permissions are granted to the App
• App permissions are granted by the user installing and
executing the App:
– Users can only grant the permissions they have

9. CREATING A SHAREPOINT APP WITH
NAPA
DEMO

10. Apps Hosting Models
 “Bring your own server
hosting infrastructure”
 Your hosted site
Any Web Server
(Online or On-premises)
SharePoint
(Online)
Windows Azure
 Host your code in SharePoint
 Client side technologies and
declarative workflows
SharePoint
(Online or On-premises)
Cloud-based Apps:
 Get remote events from SharePoint
 Use CSOM/REST + OAuth to work with SP
 Reuse web elements
(lists, files, out-of-box web parts)
 No server code allowed; use client
JavaScript for logic, UX

11. App Hosting Models
• Cloud-Hosted vs. SharePoint-Hosted?
Cloud Hosted Apps SharePoint Hosted Apps
Preferred hosting model for almost all types
of apps
Good for smaller apps & resource storage
Full power of web – choose your
infrastructure & technology
SharePoint-based; no server-side code
May require your own hosting Automatically hosted in SharePoint
May require you own handling of
multitenancy & permission management
Inherent multitenancy & isolation

12. SharePoint-Hosted Apps
• Why SharePoint-Hosted Apps?
INHERENT
MULTI-TENANCY
& ISOLATION
NO ADDITIONAL
COST
NO NEED FOR
ADDITIONAL
INFRASTRUCTURE
AUTHENTICATION
IS AUTOMATIC
SYMMETRIC
IN OFFICE 365
AND ON-PREM

13. SharePoint component isolation
• 1 app installation = 1 “app web”
• App webs are isolated in their own domain:
• Leverages web browser same-origin policy for script isolation
Host
web
App
web
https://contoso.sharepoint.com/site/
https://contoso-appUID.sharepoint.com/site/app/

14. App Layers & Components
Data Layer
• Lists & Libraries:
• Fields & Content
Types
• Data Stored in
Content DB
• WebProxy: Any data
source
• App scoped BDC
models & ECTs
Business Layer
• JavaScript:
• CSOM & REST API
• Workflows
• Custom Actions
UX Layer
• Declarative Pages &
HTML Pages
• Custom Actions
• OOB Web Parts
• App Parts
• Other elements:
• CSS files

15. Business Layer – JS CSOM & REST API
• JavaScript CSOM:
• REST/OData:
var ctx = new SP.ClientContext("http://mydomain-appUID.spo.com/site/app");
ctx.load(ctx.get_web().get_title());
ctx.executeQueryAsync();
http://contoso-appUID.spo.com/site/app/_api/web/Title

16. UX Layer - User Experience
• Get styling for free:
– App Web Template:
• Blank starting place
• SharePoint provides OOB CSS to style contents and the whole App 
Integrated & aligned with the core UX SharePoint experience
• App Master page for chroming (app.master)
• App lock down feature hides dangerous UI entry points inside appweb
• Reusable UI components:
– List view web part
– Reusable UI controls like dialogs and callouts
– Custom Actions let you extend menus, ribbon, and script

17. UX Layer - App Web Custom Actions
• Target to any location: Ribbon, ECB, ScriptLink
• Web scoped
• You can add your own business logic

18. CREATING A SHAREPOINT-HOSTED
APP IN VISUAL STUDIO
DEMO

19. Autohosted Apps
Tenant A
Tenant B

20. App Layers & Components
Data Layer
• Lists & Libraries
• Relational DBs:
• Hosted in SQL
Azure
• App scoped BDC
models & ECTs
• Others: be careful
with latency
Business Layer
• CSOM (.NET) &
REST API
• Workflows
• Custom Actions
UX Layer
• Declarative Pages
• Custom Actions
• OOB Web Parts
• App Parts
• Other elements:
• CSS files
• JS for Chroming

21. UX Layer - Optimizing UX
• Leverage the chrome control:
– Allows full-screen Apps to be framed in the chrome and styles
similar to the host web: placeholders for icons, breadcrumbs,
menus, …
• Import styles from host web:
– Add reference to: http://<host web
domain>/_layouts/15/defaultcss.ashx in the head of app page
• The chrome control automatically adds styles from the host web,
so this approach is only required for pages displayed in app parts
or modal windows

22. App Permissions
• Azure Access Control Service (ACS) plays the role of the
authorization server:
– Azure ACS stores basic information about the app and provides
apps access tokens for calling SharePoint APIs

23. Usage Model and Licensing
• Microsoft-owned Azure account:
– All Autohosted Apps for SharePoint are provisioned into a Microsoft-owned
Azure account that only Microsoft has access to
• Licensing through the Office 365 tenant:
– Azure hosting costs passed through to tenant…developers don’t pay for
hosting
• App Catalog:
– Great for company-specific customizations
– 1 App Catalogue per Office 365 tenant
• SharePoint Store:
– Great for ISVs or developers looking a way of monetizing SharePoint Apps
– The bad news: Autohosted Apps are not supported in the SharePoint Store yet

24. Autohosted Apps Key Takeaways
• Easy to Develop:
– Familiar tools, simple deployment, and automatic DR
• Simplified Upgrade:
– Autohosted Apps provide a reliable upgrade path: just deploy a new version of your App, and the
upgrade is automatically done
• Cloud Ready:
– Autohosted Apps are designed to provide an uncompromised cloud experience in Office 365
• Rich SharePoint Integration:
– New APIs allow the Autohosted Apps to run on top of Azure but richly integrated with SharePoint
• Low Cost of Entry for Developers:
– No more bulky development environment:
• A Surface Pro + Visual Studio + An Office 365 Tenant

25. Provider-Hosted Apps
• What technologies can we use?
Data Layer
• Any Data Store:
SQL, mySQL,
Oracle, CSV, Access,
FoxPro, DB2,
SQLite, …
• Lists & Libraries
• App scoped BDC
models & ECTs
• Indeed any data
source
Business Layer
• CSOM (.NET) +
REST API
• Use any server side
code technology of
your choice:
• .NET Code (C#,
VB.NET), CGI,
Java, Perl, Ruby,
Node.js, …
UX Layer
• UX Technologies:
• HTML4/5,
ASP.NET, JSP, …
• Client Side Code:
JavaScript, jQuery,
AJAX, PHP, …
Anything!

26. Development Tools & Technologies
Traditional Tools New Tools

27. App Shapes
Full page
Implement complete app experiences
to satisfy business scenarios
App Parts (aka Client Web Part)
Create app parts that can interact
with the SharePoint experience
UI command extensions
Add new commands to the ribbon and item
menus

28. App Shapes
• Client WebPart
– Wizard creates XML & page
– Shine through parts of your app
– Create convenient launch points
– Content hosted in an iFrame
• UI Extensions
– Show on the ribbon
– Add to item menu (ECB)
– Wizard creates XML

29. Web to SharePoint Communication
• Use of OAuth for secure communications:
– SharePoint & web application trust
third party (ACS)
• Trusted communication process using a
ClientId & a ClientSecret:
– SharePoint & ACS know the ClientId
– Web application & ACS know the
ClientSecret

30. Debugging Apps – Just press F5
• No app registration required:
– ClientId & ClientSecret are generated by Visual Studio for you
• IIS Express is used to host Web project:
– ~remoteAppUrl token updated so it points to an IIS Express Url
• LocalDB is used for SQL database:
– Connection string updated in web.config from SQL project
• Local workflow service is started & configured

31. Deploying an App from the IDE
• Supported only for SharePoint-Hosted & Autohosted
• App is packaged (.app) and provisioned to:
– SharePoint 2013 OnPremise (Only SharePoint-Hosted)
– O365 (SharePoint Online) & Azure (both App types)

32. Publishing an App
• Use when App is ready for…
– Testing by another person or team
– Being uploaded to the Store or the App Catalog
• SharePoint-hosted & Autohosted Apps:
– No App registration required
– Everything is included in the .app package
• Provider-hosted Apps:
– Developer must acquire ClientId & ClientSecret
– SharePoint artifacts are included in .app package
– Web assets are included in the Web Deploy package - developer must deploy
» Developer must publish & deploy SQL assets in case they are not included in the Web Deploy
package

33. Remote Event Receivers & App Events
• Implemented as WCF services:
– Support for synchronous and asynchronous events
• App Events:
– App install, app upgrade, app uninstalling
• http://msdn.microsoft.com/en-
us/library/office/jj220048(v=office.15).aspx
• Some Remote Event Receiver events:
– Item added, item changed, item deleted …

34. BUILDING A SHAREPOINT APP
FROM SCRATCH
DEMO

35. Office Store or
App Catalog
Consumers &
Corporate Users
Developer
Web Server
(Internet or Intranet)
App manifest (.xml)
or .app package
Document
Sharing
Office Store
• App Packaging and Deployment
Web Page

36. Introducing the Office and SharePoint Store
OfficeandSharePointPlatforms
Data
Visualization
Content
Management
Vertical
specific…
Function
specific….
DataMigration Infrastructure Deployment Managed
Services

37. FREE/
TRIAL/
PURCHASE
OFFICE
APP
VALIDATION
Choice of distribution channel

38. Making money on the store
adspaid apps
in-app
purchases

39. Making money on the store
• Paid Apps:
– The user can download and use the app, in perpetuity, for a one-time charge
• In-App purchases: purchases are done through the App once it’s installed:
– You can include in-App purchases in your App as long as you follow the Office
Store validation guidelines published by Microsoft:
• http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx
• Through Advertisements added to the App:
– You can include Adds in your App as long as you follow the Office Store
validation guidelines published by Microsoft:
• http://msdn.microsoft.com/en-us/library/office/apps/jj220035.aspx

40. Making money with paid apps
per seat price organization wide price
X
subscription

41. The store caters a wide variety of Apps
Data
VisualizationApps span enterprise and
consumer scenarios
All apps are tested by
Microsoft before publishing
on the store
Communication
Lifestyle
Content
Management
Project
Management
Social
Reference
Financial
Management

42. A QUICK LOOK TO THE OFFICE
(SHAREPOINT) STORE APPS
DEMO