BRK3156: Build an Add-in for Outlook.com, Outlook and Office 365 That Reaches Over 400 Million Users!

[Speaker: Andrew Salamatov, Wamwitha Maina] Yes, you read that right – in under 5 minutes, you can build *one* app, list it in *one* store and have it appear in Outlook.com, Outlook desktop and Office 365. We’ve got many exciting updates since Build 2014 – from apps platform coming to Outlook.com, to simple development tools, to apps now able to place buttons among native Outlook actions. Learn about new capabilities, new UI entry points and best practices for building beautiful and powerful integrations via Apps for Outlook.

Best PracticesBreakoutIgnite2015
1.0x

BRK3156: Build an Add-in for Outlook.com, Outlook and Office 365 That Reaches Over 400 Million Users!

Created 2 years ago

Duration 1:10:38
lesson view count 91
[Speaker: Andrew Salamatov, Wamwitha Maina] Yes, you read that right – in under 5 minutes, you can build *one* app, list it in *one* store and have it appear in Outlook.com, Outlook desktop and Office 365. We’ve got many exciting updates since Build 2014 – from apps platform coming to Outlook.com, to simple development tools, to apps now able to place buttons among native Outlook actions. Learn about new capabilities, new UI entry points and best practices for building beautiful and powerful integrations via Apps for Outlook.
Select the file type you wish to download
Slide Content
  1. Build an add-in for Outlook reaching over 400 Million users!

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

    • Andrew Salamatov
    • BRK3156
  2. Let’s build!

    Slide 2 - Let’s build!

    • Platform capabilities & new APIs
    • New UI entry points
    • Outlook ecosystem
    • Agenda
  3. Build an add-in across Outlook.com, Outlook and Office 365

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

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

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

  5. Outlook add-in platform

    Slide 5 - Outlook add-in platform

  6. Rule-based activation

    Slide 6 - 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
  7. Available today

    Slide 7 - Available today

    • Display new reply form with an attachment
    • Get/set user’s selection from subject or body in compose
    • Coming in Outlook 2016 and soon to O365
    • Get full body in read
    • Get/set full body in compose
    • Save draft in compose
    • Close item being composed
    • New APIs
  8. Demo: Explore Outlook add-ins

    Slide 8 - Demo: Explore Outlook add-ins

  9. New entry points

    Slide 9 - New entry points

  10. Add-ins must feel native and intuitive

    Slide 10 - 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
  11. Outlook will highlight regex matches and entities against plain text body

    Slide 11 - 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
  12. Outlook will highlight regex matches and entities against plain text body

    Slide 12 - 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
  13. Demo: Add-in commands

    Slide 13 - Demo: Add-in commands

  14. Demo: Add-in commands

    Slide 14 - Demo: Add-in commands

  15. 1-click way for users to take add-in actions

    Slide 15 - 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
  16. Scales with the rest of the ribbon

    Slide 16 - 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
  17. Demo: Build an add-in commands

    Slide 17 - Demo: Build an add-in commands

  18. Function Buttons

    Slide 18 - Function Buttons

    • Track
  19. Function Buttons

    Slide 19 - Function Buttons

    • Track
    • FunctionFile.html
    • //JS code
    • Office.initialize…
    • function track()
    • IE Process
  20. Exchange and Outlook.com generate a token

    Slide 20 - 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:
  21. Single Sign On

    Slide 21 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
  22. Single Sign On

    Slide 22 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
  23. Single Sign On

    Slide 23 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Token is generated and
    • returned to Outlook
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
    • Token passed back to add-in
  24. Single Sign On

    Slide 24 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Token is generated and
    • returned to Outlook
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
    • Token passed back to add-in
    • Add-in passes token to backend
    • to validate token and look up user
  25. Single Sign On

    Slide 25 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Token is generated and
    • returned to Outlook
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
    • Token passed back to add-in
    • Add-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
  26. Single Sign On

    Slide 26 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Token is generated and
    • returned to Outlook
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
    • Token passed back to add-in
    • Add-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
  27. Single Sign On

    Slide 27 - Single Sign On

    • Mail Server
    • User in Outlook
    • Add-in
    • Add-in
    • Backend
    • Token is generated and
    • returned to Outlook
    • Outlook requests token
    • from server
    • Add-in calls getUserIdentityTokenAsync()
    • Token passed back to add-in
    • Add-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
    • Once user logs in, add-in backend creates
    • a mapping of uid in token with known
    • identity
  28. Office Store

    Slide 28 - Office Store

  29. Easy access to the Office Store

    Slide 29 - Easy access to the Office Store

    • End-users can get any add-in from Store
    • End-users can side-load add-ins
    • Getting add-ins
  30. Go to dev.outlook.com for add-ins documentation and resources

    Slide 30 - 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