office appsbiwugpresentation
DESCRIPTION
TRANSCRIPT
![Page 1: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/1.jpg)
SharePoint 2013Apps, Apps, Apps
Andy Van Steenbergen
![Page 2: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/2.jpg)
About me
Andy Van SteenbergenSenior SharePoint consultant @ OrdinaSP Competence Center LeadLesgever @ CVO Antwerpen
@Meligo#SharingIsCaring
Blog.meligo.be
MicrosoftExtendedExpertTeamMember
![Page 3: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/3.jpg)
Let’s start
![Page 4: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/4.jpg)
SharePoint
![Page 5: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/5.jpg)
So why the need for Apps in SharePoint?
Sites
Vie
ws
Columns
Libra
riesPages
List
sWeb Parts
WorkflowsM
ast
er
Pag
es
SolutionsFe
atu
res
Conte
nt Ty
pes
Docu
ments
![Page 6: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/6.jpg)
So why the need for Apps in SharePoint?
Sites
Vie
ws
Columns
Apps
Libra
riesPages
List
sWeb Parts
WorkflowsM
ast
er
Pag
es
SolutionsFe
atu
res
Conte
nt Ty
pes
Docu
ments
![Page 7: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/7.jpg)
App Hosting
App Web (from WSP)
HostwebSharePoint-hosted
AppReuse (lists, out-of-box web
parts)Client side technologies and
declarative workflows
Provider-hosted App
“Bring your own server hosting infrastructure”
SharePoint
Web
Get remote events from SharePoint Use CSOM/REST + OAuth
Cloud-hosted apps
Your Hosted
Site
Auto-hosted AppWindows Azure + SQL
Azure provisioned automatically as apps
are installed
Azure SharePoint Web
![Page 8: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/8.jpg)
SharePoint Office Store
SharePoint App Catalog
Web Browser
Anatomy of a SharePoint Hosted app
Manifest
Code
JS CSS
HTML ASPX
![Page 9: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/9.jpg)
Reasons to use SharePoint hosted apps
INHERENT MULTI-TENANCY
& ISOLATION
NO ADDITIONALCOST
NO NEED FOR ADDITIONAL
INFRASTRUCTURE
AUTHENTICATION IS AUTOMATIC
SYMMETRIC IN OFFICE 365AND ON-PREM
![Page 10: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/10.jpg)
The isolated domain
http://app-bdf2016ea7dacb.contosoapps.com/sites/Biwug/Poll
Host web
http://intranet.contoso.com/sites/Biwug
App webPoll App
/Poll
App prefix (tenant)
App ID
App domain
Host web
App name
http://app-bdf2016ea7dacb.contosoapps.com/sites/Biwug/Poll
![Page 11: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/11.jpg)
SharePoint component isolation1 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/
![Page 12: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/12.jpg)
Apps for Office
![Page 13: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/13.jpg)
What are Apps for Office?
Content Area
Also known as Agaves . . .
Task Pane
![Page 14: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/14.jpg)
Apps for Office: Supported typesApplication Supported types
Excel 2013 •Task pane•Content
Excel Web App •Content
Word 2013 •Task pane•Content
Outlook 2013 •Mail (content)
Outlook Web App •Mail
PowerPoint 2013 •Task pane•Content
Project Professional 2013 •Task pane•Content
![Page 15: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/15.jpg)
App Shapes for Office
Task Pane
App adjacent to the document
ContentApp in the body of the document
Mail Inline Pane on an email or appointment item
![Page 16: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/16.jpg)
![Page 17: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/17.jpg)
App Shapes for Office
Task Pane
App adjacent to the document
ContentApp in the body of the document
Mail Inline Pane on an email or appointment item
![Page 18: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/18.jpg)
![Page 19: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/19.jpg)
App Shapes for Office
Task Pane
App adjacent to the document
ContentApp in the body of the document
Mail Inline Pane on an email or appointment item
![Page 20: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/20.jpg)
![Page 21: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/21.jpg)
![Page 22: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/22.jpg)
Apps for Office: Spectrum
![Page 23: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/23.jpg)
![Page 24: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/24.jpg)
Pro DevPower User
Familiar Toolset Across Skill Levels
Access Services 2013
The easiest way for a non-developer to build and
publish apps for SharePoint
Visual Studio 2012
A great end-to-end development experience for highest customization
“Napa” Office 365 Development Tools
A lightweight, in-browser development experience
Apps for Office
Apps for SharePoint
![Page 25: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/25.jpg)
From Developer to End User
Dev center
submission
Office Store
Integrated
Office Store
DirectVendor/
IT projects
SharePointApp
Catalog
TRIAL/ PURCHASE
TRIAL/PURCHASE
Office and SharePoint
Developer
End users
IT admin
![Page 26: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/26.jpg)
ServerClient
Bro
wse
r Hos
t
Common App Architecture
Web Server H
ostClient-side Logic
HTML / CSS / Javascript
Office JS SharePoint JS (CSOM)
SharePoint&
Exchange
Server-side LogicAny language
Office
Web
App
s
Win
RT
Mac
Mob
ile
Win
32
APPProvider-hosted
Oth
erE.
g. L
AM
P
IIS /
ASP
.Net
Win
dow
sAzu
re
CSOM REST
On-premises
IE
Chr
ome
Fire
Fox
Safa
ri
Tier 1 Tier 2
OtherECMAScript 5
Online
SharePoint
SQL
Workflow
Autohosted
SQL
Web Sites
Clie
nt A
PIs Server
APIsO
ther
Dev
ices
& C
lient
s
3rd P
arty
Ser
vice
s
Development ToolsVisual Studio 2012, Napa or any standard Web development tool
![Page 27: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/27.jpg)
ServerClient
Bro
wse
r Hos
t
Common App Architecture
Web Server H
ost
SharePoint JS (CSOM)
SharePoint&
Exchange
Server-side LogicAny language
APPProvider-hosted
Oth
erE.
g. L
AM
P
IIS /
ASP
.Net
Win
dow
sAzu
re
CSOM REST
On-premises
IE
Chr
ome
Fire
Fox
Safa
ri
Tier 1 Tier 2
OtherECMAScript 5
Online
SharePoint
SQL
Workflow
Autohosted
SQL
Web Sites
Clie
nt A
PIs Server
APIsO
ther
Dev
ices
& C
lient
s
3rd P
arty
Ser
vice
s
Office JS
Office
Web
App
s
Win
RT
Mac
Mob
ile
Win
32
Client-side LogicHTML / CSS / Javascript
Development ToolsVisual Studio 2012, Napa or any standard Web development tool
![Page 28: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/28.jpg)
Parts of the App for Office
App
App ManifestWeb Page<XML>HTML/CSS/JS
![Page 29: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/29.jpg)
Office Javascript API Overview
Document
Office.context
CustomXmlParts
Bindings
Settings
R/WSelection Selection
Mailbox
Properties & Settings
User Profile
EWS
Item
Project
Tasks
Project Info
![Page 30: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/30.jpg)
Outlook App - Behind the scenes
Manifest deployed to ExchangeApp added manifest saved to user’s mailboxExchange 2013 is required for mail apps
Exchange Serverwith app manifests
Cloud Servicewith app HTML + JS
User running Outlook
Outlook loads Office JS libraryClicking on app tab loads the app’s HTML and JSApps must reference Office.js and use it to interact with Outlook
Outlook processes rules Outlook 2013 client loads all manifestsOutlook processes rules from manifest on the selected itemApps whose rules match are displayed as tabs
![Page 31: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/31.jpg)
Possibilities…Activate on patternsBug trackingPackage trackingCase number/PO status look-up
Activate on entities or item classesNews link summaryPhone dialerWorkflow around a custom Exchange item class
Activate on all itemsCRMSocial (LinkedIn)Display information about recipients
![Page 32: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/32.jpg)
![Page 33: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/33.jpg)
“Comment a document” app
Still need a “cool” name
![Page 34: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/34.jpg)
Comment options for a document•Word review
• SharePoint Versions• SharePoint Approve / reject
• 3rd party tools?
![Page 35: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/35.jpg)
Solution?• Embed comments in document
• Comments stay in App Web (security)
• CSOM and/or REST + JavaScript
• Easy to create
![Page 36: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/36.jpg)
Flow1. If new document, comments are not yet possible
2. If not new document, comments are possible1. Select reviewer2. Add comment message3. Click “add comment”
1. Comment is being saved in list2. Call is done to retrieve comments from list
![Page 37: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/37.jpg)
How to build it
1. Add a document library
2. Create a document that contains an app for Office
3. Set the default content type for the document library to that document
App for SharePoint
Document Library
Document Template
App
![Page 38: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/38.jpg)
Composable App Model
Document Library
App AppApp App
Document
App
App for SharePoint • App includes a
document library• Documents added to
the document library include an app for Office
• E.g. Comments app
![Page 39: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/39.jpg)
![Page 40: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/40.jpg)
End User Experience
![Page 41: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/41.jpg)
Office Web Apps nowOffice Web AppsSharePoint
High FidelityFamiliarAvailable
EverywhereAdvanced Authoring
Working with Others
PCs/Macs PhonesTabletsSmart Phones
Lync File SharesInternal
Websites Exchange
![Page 42: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/42.jpg)
Working with othersDocument
ReviewMulti-user Authoring
Meetings
Editing Excel Web App Presentation Broadcast
Change Tracking
Commenting
OneNote Web App
Word Web App
PowerPoint Web App
Lync Integration
Async Navigation
Media Playback
With anyone with a browser
Working with others now
![Page 43: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/43.jpg)
Across devicesAcross devices NowPCs/Macs Tablets
Smart Phones
Phones
Editing
Viewing
IEFirefoxChromeSafari
WindowsiOS
WindowsiOSAndroid
Any browser-enabled phone
Editing
Device-optimized (touch, size)
![Page 44: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/44.jpg)
?Question Answer
![Page 45: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/45.jpg)
Take away• Learn Javascript + REST / CSOM
• Composable Apps are easy to build, just follow the correct steps
![Page 46: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/46.jpg)
![Page 47: Office appsbiwugpresentation](https://reader035.vdocuments.us/reader035/viewer/2022070302/54819ee3b479590a0d8b4589/html5/thumbnails/47.jpg)