Weave your enterprise solutions directly into Office products with the App Model

Chris O’Brien, Andrew Salamatov

CODE-B599

CONNECT TO OFFICE 365 SERVICES

Users and

groups

EXTEND OFFICE EVERYWHERE

Today

BUILD USING AN OPEN PLATFORM

What is an App for Office?A web page within an Office client

App can read/write document

Task pane apps

Displays contextual info in dedicated task pane area

Available in:ExcelPowerPointWordProject

Content app

Displays contextual info in main app area

Available in:ExcelPowerPointAccess app for SharePoint

Mail app

“View” and “Compose” appsCan detect content in mail and provide contextual app

Available in:Outlook

Apps for Office - dev fundamentalsApp components:App manifestWeb site

Office JavaScript API (Office.js)Usually referenced on Microsoft CDNAPI updates are versioned

It’s web development!Use all JS/CSS frameworks you want!Same origin policy appliesSecure dev practices needed (SSL, input validation etc.)

Permissions modelRestricted -> Read -> Write -> ReadWrite

Demo

Getting started with Apps for Office (developer)

Useful Office API snippets (all apps)document.getFileAsync()

Access the full document (in slices up to 4MB)

document.bindingsCollection of locations in document (e.g. user or app defined)

document.goToByIDAsync()Navigate to a place in the document (binding)

document.settings.get()/set()/saveAsync()Persist some state (get/set)

SharePoint/Office 365 in Apps for Office

SharePoint apps - recap

Code is isolated from SharePoint, using remote APIsClient-side: JavaScript in user’s browserServer-side: CSOM code in Azure/IIS/other

Combining Apps for SharePoint/OfficeCommon pattern:App for SharePoint has related Word/Excel/mail app

Creation process:Create app for SharePointAdd project item “App for Office”

Good for:Using SharePoint as data repositoryConsuming SharePoint “services” e.g. OneDrive For BusinessProviding end-user experience *not* specific to a document

MSDN - How to: Create an app for SharePoint that contains a document template and task pane app

Documents in an App for SharePointHow an app is embedded in a

document:Document is then used as template in SharePoint

Provider-hosted MVC page as task paneThis is an advanced technique!

Some challenges here:Some minor work to fix-up JS dependencies etc.Server-side authentication back to SharePoint is difficult (no SharePoint context passed)

Workaround – use a previously-stored access/refresh token (e.g. from an app part)Workaround – use client-side code (cross domain library)

Benefits:One instance of app files (SharePoint-hosted deploys to each app web, unless tenant-scoped)Can use server-side .NET e.g. MVC, caching, data access etc.Can use OfficeDev Patterns & Practices library for SharePoint code

Demo

Combining Apps for Office with Apps for SharePoint (task pane app + SharePoint app)

Useful building blocks

SearchDisplay

templates

User profiles

OneDrive for Business sites

Key SharePoint aspects in the demo were:

Also – jQuery, jQueryUI, bootstrap, OfficeDev Patterns & Practices libraries etc.

Office 365 alternative to SharePoint AppsExternal apps which use Office 365 APIsWeb or client application not installed to SharePoint (e.g. standalone MVC app)

App registered in AzureBacked by Azure AD auth and “Common Consent” authorization framework – “App Launcher” integrationAuth token can be used against SharePoint CSOM/REST APIs

Use consolidated APIs across SharePoint, Exchange, LyncMail, Calendar, Files, Contacts, Tasks (and more to come!)

NOTE – these APIs launched (GA) this week at TechEd!

Mail apps

Demo

Mail apps

Mail App Capabilities

Write once, run everywhereOutlook, OWA, OWA app on iOS and Android

Appear in messages and appointments in compose and readActivate contextually in read

Installed by end users or admins

Mail App APIsGeneral APIsPer-app settings and per-item custom propertiesUser profileSSO tokenLimited Exchange Web Services access

Read APIsEWS/OData Item idAttachmentsBasic item properties

Compose APIsR/W basic item propertiesAdd attachmentsWrite to body

ReadWriteMailbox

ReadWriteItem

ReadItem

Restricted• Limited access to

item props

• Read access to item

• R/W access to item

• R/W access to item• Limited EWS access

AuthenticationAuthenticating to a non-AAD federated applicationWindows Integrated AuthSet up trust with Exchange cert, use Exchange Identity Token

Authenticating to a federated applicationAAD auth + Exchange Identity Token for Single Sign On*

* Due to limitations of iOS, AAD auth won’t work, so Exchange Identity Token is necessary. Android works.

Exchange Identity TokenToken signed by Exchange, includes unique identifier for a userMail app requests token using mailbox.getUserIdentiyToken and passes it back to backend for validationBackend validates token and maps to AAD logon

APP

Outlook

App BackendExchange

1 2

3

EIT1 AAD refresh token 1

EIT2 AAD refresh token 2

EIT3 AAD refresh token 3

… …

4

App requests token Token passed backfor validation

App backend validates token

Looks upidentitymapping

Identity Mapping

Bugger Architecture

App + Service hostBug Database

• Uses Windows Integrated auth• Uses service account to call into bug database

App + Service host

Demo

Building a mail app

App deployment

App distribution choices

Office Store App Catalog

App site hosting choices (provider-hosted)Common options:Azure WebsitesSelf-hosting:

Azure IAASOn-premises IIS serversOther

Self-hosting aspects:SSL, load-balancing/HA, backup & restore,

DNS, access outside firewall etc.

Azure Websites = the easy button

Demo

Publishing an App for SharePoint with an App for Office (using Azure for app hosting)

Tips, tricks and gotchas

Common gotcha #1 • Document is not running in app web

• URL for remote page (in task pane manifest) may be incorrect

• Details of app (embedded in Word doc template) may be incorrect (GUID, version etc.)

• Maybe logged into Office client app with wrong account (unable to authenticate to SharePoint)

• App Catalog URL may not have been added to Office Trust Center > Trusted Locations

Other common gotchasAccess denied (401) on AJAX requestRemote endpoint not listed/authorized in app manifest ORRemote endpoint is on different protocol/IE security zone

Office.context.document.url is NULLUser has not yet saved document! (your app should ask them to save it)

SharePoint cross-domain library calls failHost site may not be in Trusted Sites, or be in different zone to app web – use apphost pattern (http://msdn.microsoft.com/en-us/library/office/jj612823(v=office.15).aspx)

Tips and tricks

Use Fiddler to see communication from client app (e.g. Word) to website

Tips and tricks

Consider “tenant-scoped” installation if using App for SharePoint

BUT, no app parts! Consider JS injection instead..

Tips and tricks

Leverage OfficeDev PnP code where possible

http://aka.ms/OfficeDevPnP

Key takeawaysUX can be weaved into different productsWord, Excel, PowerPoint, Project, Mail etc. – as well as SharePoint/external app

SharePoint/Office 365 services can help!..but pay attention to:• Authentication • App web constraints

-> Consider Office 365/Azure AD external app if target is Office 365

Drive user productivity with compose and read mail apps

App ideas

PowerPoint

•Corporate presentation builder

Excel•Import data from LOB system for analysis

Word•Proposal/contract builder•Yammer integration

Mail•Bug tracker•Frequent snippets•Meeting location details

Developer Patterns & Practices

Transform your code

Providing App Model Patterns for common SharePoint Full Trust Code and Office Add-in scenarios

60+ Visual Studio projects

Common scenariosBrandingSite provisioningRemote event receivers

Large file supportTaxonomy driven navigationAnd much more… aka.ms/OfficeDevPnP

Other resourcesMSDN - mail apps:http://msdn.microsoft.com/EN-US/library/office/fp161135(v=office.15).aspx

MSDN – SharePoint app with document template/task pane app:http://msdn.microsoft.com/en-us/library/office/fp179815(v=office.15).aspx

Resources

Learning

Microsoft Certification & Training Resources

www.microsoft.com/learning

Developer Network

http://developer.microsoft.com

TechNet

Resources for IT Professionals

http://microsoft.com/technet

Sessions on Demand

http://channel9.msdn.com/Events/TechEd

http://www.visualstudio.com

http://blogs.msdn.com/b/developer-tools/

http://msdn.microsoft.com/vstudio

DEV Track Resources

visualstudio

@visualstudio

visualstudio

TechEd Mobile app for session evaluations is currently offline

SUBMIT YOUR TECHED EVALUATIONSFill out an evaluation via

CommNet Station/PC: Schedule Builder

LogIn: europe.msteched.com/catalog

We value your feedback!

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.