Office Add-in & Microsoft Graph - Development 101
•
0 likes•362 views
Slides at Redmond Interoperability Plugfest 2017
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Office Add-in & Microsoft Graph - Development 101
Similar to Office Add-in & Microsoft Graph - Development 101 (20)
Recently uploaded
Recently uploaded (20)
Office Add-in & Microsoft Graph - Development 101
- 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
- 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
- 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)
- 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