Office 365 & SharePoint Connect Session

2. Reach for the Cloud: Build
Solutions with the Power
of Microsoft Graph
Bill Ayers

3. Eur Ing Dr Bill Ayers
MCM/MCSM Charter SharePoint
MVP, MCT, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, Professional
Scrum Master, etc. etc.
Flow Simulation Ltd.
www.SPDoctor.net
BillA@flosim.com
@SPDoctor
Consultant specialising in SharePoint and
Office 365 Development and Architecture
for Collaboration and Mobile Development

4. • What is a Graph?
• The Microsoft Graph
• Raw REST API
• MSGraphClient
• Conclusions
Agenda

5. What is a Graph?

6. Brainbow
Identify individual
neurons by using
fluorescent
proteins

7. Groups
People
Conversations
Files
Insights
Microsoft Graph

8. Groups
People
Conversations
Files
Insights
Microsoft Graph

9. Unified REST API and comprehensive
developer experience for integrating the data
and intelligence exposed by Microsoft services
(Microsoft 365).
Microsoft Graph

10. Action
Task pane
Dialog box
Event
Common across canvases
Canvas
specific
extensions
Data import
Dictionaries
Bot
Connector
Navigation
Branding
 
Extensions
Office 365 Platform

11.  
LIVE POLL
Yes No Maybe
Microsoft 365 Platform

12.  
LIVE POLL
Yes No Maybe
Microsoft Graph
Groups
People
Conversations
Files
Insights
Microsoft 365 Platform

13. Users Groups Outlook OneNote DynamicsSharePoint Intune
Teams
Azure AD
Planner
Excel
https://graph.microsoft.com
Microsoft Graph
Application –
web, mobile,
UWP, SPFx, etc.
Insights

14. Drawbacks of Office 365 Service APIs
• Multiple inconsistent APIs and endpoints to retrieve data
• Need to obtain multiple access tokens
• REST and OData standards have continued to evolve
• Different authorization mechanisms for work and personal

15. Service APIs vs. Microsoft Graph API
Microsoft Graph
Simplest way to access data in Office 365 and
other Microsoft cloud services
Service specific endpoints
Available and supported
Inconsistent and ad-hoc
Users Groups Outlook OneNoteSharePoint
Teams
Planner
https://graph.microsoft.com
Users Groups Outlook OneNoteSharePoint

16. Data
Outlook - Mail, Calendar, Contacts and Tasks
SharePoint -Sites and Lists, Links*, List Views*
OneDrive - Drives and Files
Teams – Channels*, Messages*
Planner - Tasks, Plans
Excel – Spreadsheets
OneNote – Notes, etc.
Windows 10 – Identity, Access controls, synch, domains
Dynamics – Financials*
EMS – AzureAD, Intune, ATP, Analytics, Alerts, Policies
*preview

17. Core business data
accessible through the
Microsoft Graph – with
more to come…
Is this person out of the office?
Who is their manager?
Where do they need to be next?
What documents have they been working
on recently?
Rich Context
Deep Insights
Real-time Updates

18. Calling the REST API
https://graph.microsoft.com/v1.0/users/
/{version}
/{resource}
/{id}
/{property}
https://{domain}
?{query-parameters}

19. Calling the API
• HTTP verbs dictate the request intent: GET | POST | PATCH | PUT | DELETE
• Version: /v1.0 or /beta
• Resource: /users, /groups, /sites, /drives, /devices, more…
• Member from collection: /users/bill
• Property: /users/bill/department
• Traverse to related resources via navigations: /users/bill/events
• Query parameters: /users/bill/events?$top=5
o Format results: $select, $orderby
o Control results: $filter, $expand
o Paging: $top, $skip, $skiptoken
/{version} ?{query-parameters}/{resource}/{id}/{property}
OData
https://{domain}
REST

20. Explore REST Endpoint
https://dev.office.com/ (follow link to Microsoft Graph
then link to Graph Explorer)

21. Using REST with (e.g.) JavaScript
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://graph.microsoft.com/v1.0/me/");
xhr.setRequestHeader("Accept", "application/json;odata=verbose ");
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
document.getElementById(“output”).innerText = "Site title: " + data.d.Title
};
xhr.send();
jQuery.ajax({
url: encodeURI("https://graph.microsoft.com/v1.0/me/"),
headers: { accept: "application/json;odata=verbose" }
}).done(function (data) {
$("#output").text("Site title: " + data.d.Title);
}).fail(function (msg) {
$("#output").text("Request Failed: " + msg);
});
Note: an access token is usually required in the authorization header – outside the scope of this talk

22. Demo Docs
https://graph.microsoft.com > documentation

23. Wrapper SDKs
•Language-specific bindings
•Easier to use
•Varying degrees of ‘strong typing’

24. Code-genned Wrapper APIs
https://github.com/microsoftgraph/msgraph-sdk-javascript
$metadata/
OpenAPI
Code
generation
Manual
Fine-tuning
API

25. Demo: Traversing the Microsoft
Graph using Client Libraries
https://github.com/microsoftgraph/msgraph-sdk-javascript

26. MSGraphClient

27. Looking at Graph SDKs and
OfficeDev PnP-JS-Core

28. Which to use?
•Legacy APIs: CSOM, EWS, etc.
•REST APIs: Outlook, SharePoint, etc.
•Language-specific wrappers, e.g. PnP-JS-Core
•Microsoft Graph REST API
•Microsoft Graph language-specific APIs
•Context-based APIs (MSGraphClient)

29. • Microsoft Graph – single endpoint and open standards
• Microsoft Graph improving with more content
• Use with SPFx without AuthZ woes
• Improving fast – but may need “legacy” approaches
• Start building tomorrow’s business solutions!
Conclusions:

30. Resources
• dev.office.com
• Graph Explorer: https://developer.microsoft.com/en-us/graph/graph-explorer
• Microsoft Graph JavaScript client library:
https://github.com/microsoftgraph/msgraph-sdk-javascript/
• MSGraphClient documentation: https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/use-msgraph
• Microsoft Graph: A Walkthrough - Adis Jugo (4:30pm today)