This document provides an overview of developing Office add-ins using Office.js and integrating with Microsoft Graph. It discusses the opportunity with Office 365 usage growth and data available through Microsoft Graph. It then provides introductions to Office add-in development with Office.js, the key components of Microsoft Graph including its REST API, authentication, extensions, and webhooks. Code samples and starter projects are referenced to help get started.

1. Office Add-in & Microsoft Graph
Development 101
@Hongbo_Miao
Program Manager

2. Contents
• Opportunity
• Office Add-in 101
• Microsoft Graph 101

3. Office 365
Authoring
Word
Excel
PowerPoint
OneNote
Mail & Social
Outlook
Yammer
Sites & Content
OneDrive
SharePoint
Delve
Chat, Meetings & Voice
Microsoft Teams
Skype for Business
Analytics
Power BI
MyAnalytics

4. Opportunity
DATA
4T+
emails sent with O365
3B
minutes of Skype calls daily
2B+
meetings created per month
INTELLIGENCEUSERS
90%
of Fortune 500 have MS Cloud
300%
growth in usage of Outlook add-ins
100M
monthly commercial active users
35%
growth in O365 commercial seats
150%
Microsoft Graph API calls this quarter
8T
nodes in the Microsoft Graph

5. Office Add-in

6. Ways to Build an Add-in
• VBA
• VSTO
• Office.js
• …

7. Why Office.js
• Cross platform - not only Windows, Mac, but also iOS, Online
• Single sign in - integrate easily with Office 365 account
• Centralized deployment and distribution
• Monetize through Office store
• Use web technology

8. Sample
Transform Data

9. Components
Ribbon
Task Pane Content
Dialog

10. How it works
Office Store or
O365 Tenant
Developer
Add-in
User
Manifest
Server

11. Snippet
Excel.run(context => {
const range = context.workbook.getSelectedRange();
range.format.fill.color = 'blue';
return context.sync();
});

12. Playground
Script Lab https://github.com/OfficeDev/script-lab
Help explore Office.js API

13. 1. Generate the App
Create React App https://github.com/facebookincubator/create-react-app
Angular CLI https://github.com/angular/angular-cli

14. 2. Generate the Manifest
YO Office https://github.com/OfficeDev/generator-office
Help generate and validate manifest (& generate projects)

15. Starter
React https://github.com/Hongbo-Miao/office-addin-react
Angular https://github.com/Hongbo-Miao/office-addin-angular

16. Microsoft Graph

17. What is Microsoft Graph
GROUPS
ME
CONVERSATIONS CONTENT
INSIGHTS
CONTACTS
PEOPLE
ORGANIZATION
TASKS
EMAIL
EVENTS
DOCUMENTS
DEVICES
CHATS
COLLABORATION
ACTIVITY
TRENDING
SHARED
REPORTS

18. With Microsoft Graph
manager
directReports
memberOf
Email
Documents
Contacts
Calendar
Tasks
Meetings
Sites
Trending
Documents
People I’m
working
with
Find me the best
time to meet Ana
Out of office
Search people
based on topics
Recent
Documents
contentprofile insights

19. Key Parts of Microsoft Graph
• REST API
• Auth
• Extensions
• Webhook

20. REST API
Users Groups Outlook Calendar SharePointExcel IntuneTeams Azure ADOneNote Planner
My app
Microsoft Graph

21. REST API
GET https://graph.microsoft.com/v1.0/me
{
"displayName": "Hongbo Miao",
"jobTitle": ”Program Manager",
"officeLocation": "36/4473”
}

22. REST API
GET | POST | PATCH | PUT | DELETE
/{version}/{resource}/{id}/{property}?{query}
• v1.0, beta
• users, groups, sites, drives, devices ...
• jack
• events, department ...
• $select, $orderby, $filter, $expand, $top, $skip ...

23. REST API
Graph Explorer https://developer.microsoft.com/en-us/graph/graph-explorer
Help you explore Microsoft Graph API

24. Auth
// One way to implement using hello.js
init() {
hello.init({
msft: {
oauth: {
version: 2,
auth: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize'
},
scope_delim: ' ',
form: false
}
});
hello.init(
{ msft: APPID },
{ redirect_uri: window.location.href }
);
}
login() {
hello('msft').login({ scope: SCOPE }); // e.g. 'contacts.read,files.readwrite'
}
logout() {
hello('msft').logout();
}

25. Extensions
Open Extensions
Add untyped data to a resource
https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/resources/opentypeextension
Schema Extensions
Allow you to define a schema to extend and add typed data to a resource
https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/resources/schemaextension

26. Extensions
Open Extension Sample
POST /users/jack@mail.com/extensions
{
extensionName: "social",
twitter: "jack",
github: "jack"
}
PATCH /users/jack@mail.com/extensions/social (Note it is replacing)
{
extensionName: "social",
facebook: "jack"
}
GET /users/jack@mail.com/extensions/social
DELETE /users/jack@mail.com/extensions/social

27. Extensions
Open Extensions
// User 1
{
extensionName: "social",
twitter: "abc"
}
// User 2
{
extensionName: "social",
github: "abc"
}
Schema Extensions
// User 1
{
extensionName: "social",
twitter: "abc"
}
// User 2
{
extensionName: "social",
twitter: "abc"
}

28. Webhook
Monitor changes and deliver notifications to the client
https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/resources/webhooks

29. Webhook
Server
Client
POST /subscriptions (changeType, expirationDateTime)
200 OK
login.microsoftonline.com
myapp.com/listen (validationToken)
myapp.com/listen
Microsoft Graph
myapp.com/callback (accessToken)
WebSocket, HTTP/2, etc.
Office 365 login page

30. Webhook
Temporary
Server
Client
POST /subscriptions (changeType, expirationDateTime)
200 OK
login.microsoftonline.com
myapp.com/listen (validationToken)
myapp.azurewebsites.net
Microsoft Graph
myapp.com/callback (accessToken)
WebSocket, HTTP/2, etc.
Azure
Functions
Office 365 login page

31. Webhook
GET /subscriptions/43268ccb-6c5e-4ffd-a2dd-888e1d8f2a8c
{
"resource": "me/mailFolders('Inbox')/messages",
"changeType": "created",
"notificationUrl": "https://mywebsite.com/listen",
"expirationDateTime": "2017-09-01T00:00:00.000Z"
}
Node.js Sample https://github.com/microsoftgraph/nodejs-webhooks-rest-sample
ASP.NET Sample https://github.com/microsoftgraph/aspnet-webhooks-rest-sample

32. Starter
React https://github.com/Hongbo-Miao/office-addin-react (very soon)
Angular https://github.com/Hongbo-Miao/office-addin-angular

33. Thanks!
@hongbo_miao
github.com/hongbo-miao