Developer vision User mailbox with app manifests Add-in’s Service with app HTML + JS User running Outlook.

Andrew SalamatovSenior Program Manager

Build an add-in for Outlook reaching over 400 Million users!

3-694

DATAUSERS

HTML

Developer vision

Let’s build!Platform capabilitiesNew UI entry pointsOutlook ecosystem

Agenda

Build an add-in across Outlook.com, Outlook and Office 365

Outlook add-in platform

Manifest is saved to user’s mailbox

Outlook clients load manifest and display add-ins

Outlook add-in architecture

User mailboxwith app manifests

Add-in’s Servicewith app HTML + JS

User running Outlook

• Rule-based activation• Add-ins can appear based on regex match• Based on presence of entities (eg postal address, meeting suggestion)• Based on presence of attachments• Based on type of item

• Extensive JS object model API• Access to core item properties in read and compose• Access to body and attachments• Ability to modify fields and add attachments in compose• Launch native reply and new appointment forms• Ability to set custom properties on items

• Support for SSO

Add-in capabilities

• Exchange and Outlook.com generate a token

• Add-in validates token and maps it to known user id

Single Sign On

{

"aud" : "https://mailhost.contoso.com/IdentityTest.html",

"iss" : "00000002-0000-0ff1-ce00-000000000000@mailhost.contoso.com",

"nbf" : "1331579055",

"exp" : "1331607855",

"appctxsender":"00000002-0000-0ff1-ce00-000000000000@mailhost.context.com",

"isbrowserhostedapp":"true",

"appctx" : {

"msexchuid" : "53e925fa-76ba-45e1-be0f-4ef08b59d389@mailhost.contoso.com",

"version" : "ExIdTok.V1“,

"amurl" : "https://mailhost.contoso.com:443/autodiscover/metadata/json/1"

}

}

Token:

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Token is generated and

returned to Outlook

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Token passed back to add-in

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Token is generated and

returned to Outlook

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Token passed back to add-inAdd-in passes token to backend

to validate token and look up user

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Token is generated and

returned to Outlook

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Token passed back to add-inAdd-in passes token to backend

to validate token and look up user

If user is not found, add-in backend

requests to have user log in

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Token is generated and

returned to Outlook

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Token passed back to add-inAdd-in passes token to backend

to validate token and look up user

If user is not found, add-in backend

requests to have user log in

Add-in pops up a window

and prompts user to auth

Auth Prompt

Single Sign OnMail Server User in Outlook Add-in

Add-inBackend

Token is generated and

returned to Outlook

Outlook requests token

from server Add-in calls getUserIdentityTokenAsync()

Token passed back to add-inAdd-in passes token to backend

to validate token and look up user

If user is not found, add-in backend

requests to have user log in

Add-in pops up a window

and prompts user to auth

Auth PromptOnce user logs in, add-in backend creates

a mapping of uid in token with known

identity

Demo: Explore Outlook add-ins

New entry points

Add-ins must feel native and intuitive

Leverage UI framework of host client

Entry points must scale gracefully

Write once, run everywhere

Outlook add-in vision

• Outlook will highlight regex matches and entities against plain text body

• Clicked on entity or regex match will be passed into add-in

• Add-in is loaded in a hover card experience

Body text highlighting

• 1-click way for users to take add-in actions

• In Outlook desktop, actions are ribbon buttons and can:• Launch task pane• Execute a JavaScript function without showing UI• Dropdown (menu) with different types of buttons as options [coming

later]

• Support backwards compatibility

Add-in commands

• Scales with the rest of the ribbon

• Commands can be on default tab, or create 1 custom tab• Up to 6 buttons per group• 1 group on default tab, up to 10 groups on custom tab

• Commands that don’t launch UI can show status messages on the mail item or appointment

Commands UI

Demo: Add-in commands

Function Buttons

Track

Function Buttons

Track

FunctionFile.html//JS code

Office.initialize…

function track()

IE Process

Office Store

• Easy access to the Office Store

• End-users can get any add-in from Store

Getting add-ins

• Go to dev.outlook.com for add-ins documentation and resources

• Request a preview Outlook.com account to test add-ins by emailing us at outlookdev@microsoft.com

• Sign up for Office 16 Technical Preview by going to http://aka.ms/joinoffice and build add-ins with commands

Calls to Action

http://dev.office.com/devprogram

Developer Program Launch

E-mail Newsletters

Free Developer

Subscription

1 YEAR FREE

Free Training

Free Tools Webinars

Call to action

Sign up for Developer Program

Collect your stickers at //build

Check out the express talks

Improve your Office 365 development skills by enrolling in our specially designed courses in MVA.

Get started with Office 365 Developer Pack.

Try Microsoft Azure for free and deploy your first Office 365 solution today!

Resources

© 2015 Microsoft Corporation. All rights reserved.