SlideShare a Scribd company logo
1 of 44
Platinum
Gold
Silver
SharePint
Community
Thanks to our sponsors!
Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at
Agenda
Agenda
SharePoint REST APIs
Our Scenario
• Building a SharePoint Framework webpart that connects to a
SharePoint list to play with its data
• Using a single Interface to define our Data Access services to enable
easy on-the-fly switch of data sources
• Mocking Service for swapping and localWorkbench development
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { IHelpDeskItem } from "./../models/IHelpDeskItem";
import { WebPartContext } from "@microsoft/sp-webpart-base";
export default interface IDataService {
getTitle(): string;
isConfigured(): boolean;
getItems(context: WebPartContext): Promise<IHelpDeskItem[]>;
addItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>;
updateItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>;
deleteItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>;
}
export default class SharePointDataService implements IDataService {
//…
}
Data Service Architecture
Using the SharePoint REST APIs?
• Enable almost all your CRUD scenarios in the solutions you are
building on SharePoint Online and SharePoint On-Premises
• When called from a SharePoint context, no authentication required
as it’s all cookie based
• It follows the OData standards, making it easy to query your content
OData URI at a glance
OData URI at a glance
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Creating a new SPFx Project
yo @Microsoft/sharepoint --skip-install
# Installing all dependencies
npm install
# Opening the newly created project
code .
Creating a new SPFx Project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Getting all the sessions of the specified list using SharePoint REST APIs
public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> {
return new Promise<IHelpDeskItem[]>((resolve, reject) => {
context.spHttpClient.get(
`${absoluteUrl}/_api/web/lists/GetById('${this._listId}')/items` +
`?$select=*,HelpDeskAssignedTo/Title&$expand=HelpDeskAssignedTo`,
SPHttpClient.configurations.v1)
.then(res => res.json())
.then(res => {
let helpDeskItems:IHelpDeskItem[] = [];
for(let helpDeskListItem of res.value) {
helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem));
}
resolve(helpDeskItems);
}).catch(err => console.log(err));
});
}
Retrieving Data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Creating a new session in the specified list
public addItem(item: IHelpDeskItem): Promise<void> {
return new Promise<void>((resolve, reject) => {
//…
return this._webPartContext.spHttpClient.post(
`${currentWebUrl}/_api/web/lists/GetById('${this._listId}')/items`,
SPHttpClient.configurations.v1, {
headers: { "Accept": "application/json;odata=nometadata",
"Content-type": "application/json;odata=verbose",
"odata-version": "" },
body: body
});
}).then((response: SPHttpClientResponse): Promise<any> => {
return response.json();
}).then((item: any): void => {
resolve();
});
});
}
Creating Data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Deleting a specific item from the specified list
public deleteItem(id: number): Promise<void> {
return new Promise<void>((resolve, reject) => {
if (!window.confirm(`Are you sure?`)) { return; }
return this._webPartContext.spHttpClient.post(
`${currentWebUrl}/_api/web/lists/GetById('${this._listId}')/items(${id})`,
SPHttpClient.configurations.v1, {
headers: { "Accept": "application/json;odata=nometadata",
"Content-type": "application/json;odata=verbose",
"odata-version": "",
"IF-MATCH": "*",
"X-HTTP-Method": "DELETE" }
}).then((response: SPHttpClientResponse): void => {
resolve();
});
});
}
Deleting Data
Using SharePoint Search
• Using search allows you to query content in multiple lists or multiple
sites or site collections
• Uses a totally other query language (KQL or Keyword Query
Language)
• Very performant and optimized for fetching a lot of data, but has a 15
minutes-ish delay in terms of data freshness
• Does not support any data modification
KQL Crash Course
• See Mickael Svenson blog series “SharePoint Search Queries
Explained”
• https://www.techmikael.com/2014/03/sharepoint-search-queries-
explained.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Getting all the sessions of the specified list using SharePoint Search
public getItems(context: IWebPartContext): Promise<IHelpDeskItem[]> {
return new Promise<IHelpDeskItem[]>((resolve, reject) => {
context.spHttpClient.get(`${absoluteUrl}/_api/search/query?` +
`querytext='ContentTypeId:0x0100…* AND ListID:${this._listId}'` +
`&selectproperties='…'` +
`&orderby='ListItemID asc'`, SPHttpClient.configurations.v1, {
headers: { "odata-version": "3.0" }
}).then(res => res.json()).then(res => {
let helpDeskItems:IHelpDeskItem[] = [];
if(res.PrimaryQueryResult) {
for(var row of res.PrimaryQueryResult.RelevantResults.Table.Rows) {
helpDeskItems.push(this.buildHelpDeskItem(row));
}
}
resolve(helpDeskItems);
});
}
Retrieving Data
Notes on legacy APIs support
• SharePoint APIs cover a wide-range of options, but not everything
• You “might” have to revert to JSOM for some scenarios (Managed
Metadata, etc.)
• Or even to the ASMXWeb Services for more specific scenarios
(Recurring Events in Calendars, etc.)
• The SharePoint Framework supports those scenarios, but will require
some extra work
Microsoft Graph and Custom APIs
What is the Microsoft Graph?
Groups
People
Conversations
Insights
Microsoft Graph is all about you
If you or your customers are part of the millions of users that are using Microsoft
cloud services, then Microsoft Graph is the fabric of all your data
It all starts with /me
Gateway to your data in the Microsoft
cloud
Your app
Gateway
Your or your
customer’s
data
Office 365 Windows 10 Enterprise Mobility + Security
1Microsoft Graph
Microsoft Graph
ALL
Microsoft 365
Office 365
Windows 10
EMS
ALL ONE
https://graph.microsoft.com
Microsoft 365 Platform
web, device,
and service apps
Extend Microsoft 365 experiences
1
iOS/Android/Windows/Web
Build your experience
Microsoft Graph
Options for the Microsoft Graph
• Using the built-in MsGraphClient class that takes care of the entire
authentication flow and token management for you
• Using a custom implementation using ADAL or MSAL
Are there any limitations?
• Every scope will have to be defined beforehand and could open some
security challenges
• Authentication challenges could bring a broken experience to your
users depending on the platform and browser used
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// In your package-solution.json
{
// …
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Sites.ReadWrite.All"
},
// …
]
// …
}
Enabling Graph in your solution
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Getting all the sessions of the specified list using the Microsoft Graph
public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> {
let graphUrl: string = `https://graph.microsoft.com/v1.0` +
`/sites/${this.getCurrentSiteCollectionGraphId()}` +
`/lists/${this._listId}` +
`/items?expand=fields(${this.getFieldsToExpand()})`;
return new Promise<IHelpDeskItem[]>((resolve, reject) => {
this._client.api(graphUrl).get((error, response: any) => {
let helpDeskItems:IHelpDeskItem[] = [];
for(let helpDeskListItem of response.value) {
helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem));
}
resolve(helpDeskItems);
});
});
}
Retrieving Data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Creating a new item in the specified list
public addItem(item: IHelpDeskItem): Promise<void> {
let graphUrl: string = `https://graph.microsoft.com/v1.0` +
`/sites/${this.getCurrentSiteCollectionGraphId()}` +
`/lists/${this._listId}` +
`/items`;
return new Promise<void>((resolve, reject) => {
const body: any = { "fields" : {
"Title": item.title,
"HelpDeskDescription": item.description,
"HelpDeskLevel": item.level
}};
this._client.api(graphUrl).post(body, (error, response: any) => {
resolve();
});
});
}
Creating Data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Deleting the specified item form the specified list
public deleteItem(id: number): Promise<void> {
let graphUrl: string = `https://graph.microsoft.com/v1.0` +
`/sites/${this.getCurrentSiteCollectionGraphId()}` +
`/lists/${this._listId}` +
`/items/${id}`;
return new Promise<void>((resolve, reject) => {
this._client.api(graphUrl).delete((error, response: any) => {
resolve();
});
});
}
Deleting Data
Custom APIs
• Using the built-in AadGraphClient class that takes care of the entire
authentication flow and token management for you
• Using a custom implementation using ADAL or MSAL
• You can use user impersonation (or not) to query SharePoint content
based on user permissions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Getting all the sessions of the specified list using the AAD Client
public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> {
return new Promise<IHelpDeskItem[]>((resolve, reject) => {
let apiUrl: string = "<url>/api/GetHelpDeskItems";
this._client
.get(apiUrl, AadHttpClient.configurations.v1)
.then((res: HttpClientResponse): Promise<any> => {
return res.json();
}).then((res: any): void => {
let helpDeskItems:IHelpDeskItem[] = [];
for(let helpDeskListItem of res) {
helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem));
}
resolve(helpDeskItems);
});
});
}
}
Retrieving Data
Patterns & Practices JS Core
What is PnP JS Core?
PnPJS is a fluent JavaScript API for consuming SharePoint and Office 365
REST APIs in a type-safe way.You can use it with SharePoint Framework,
Nodejs, or JavaScript projects.This an open source initiative that
complements existing SDKs provided by Microsoft offering developers
another way to consume information from SharePoint and Office 365.
https://github.com/pnp/pnpjs
Benefits of PnP JS Core
• Type safe so you get your errors while you code and not when you
execute and test
• Works on all versions of SharePoint (On-Premises, Online, etc.)
• Offers built-in caching mechanisms
• Heavily used in the SharePoint Development Community
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { sp } from "@pnp/sp";
// ...
public onInit(): Promise<void> {
return super.onInit().then(_ => {
// other init code may be present
sp.setup({
spfxContext: this.context
});
});
}
// ...
Sample – Setup PnP JS for SharePoint
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Getting all the sessions of the specified list using PnP JS Core
public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> {
return new Promise<IHelpDeskItem[]>((resolve, reject) => {
sp.web.lists.getById(this._listId).items
.select("*", "HelpDeskAssignedTo/Title")
.expand("HelpDeskAssignedTo").getAll().then((sessionItems: any[]) => {
let helpDeskItems:IHelpDeskItem[] = [];
for(let helpDeskListItem of sessionItems) {
helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem));
}
resolve(helpDeskItems);
});
});
}
Retrieving Data
Next Steps
Resources
• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-
parts/guidance/connect-to-sharepoint-using-jsom
• https://www.techmikael.com/2014/03/sharepoint-search-queries-
explained.html
• https://github.com/pnp/pnpjs
• https://github.com/sebastienlevert/apis-apis-everywhere
Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• #SPFx
• Log issues & questions to the GitHub Repositories
Thanks!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!

More Related Content

What's hot

Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
SPTechCon
 
Engage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 TagEngage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 Tag
Webtrends
 
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.02005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
Daniel Fisher
 

What's hot (20)

Hidden Docs in Angular
Hidden Docs in AngularHidden Docs in Angular
Hidden Docs in Angular
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
 
Lowering in C#: What really happens with your code?, from NDC Oslo 2019
Lowering in C#: What really happens with your code?, from NDC Oslo 2019Lowering in C#: What really happens with your code?, from NDC Oslo 2019
Lowering in C#: What really happens with your code?, from NDC Oslo 2019
 
Data Binding in Action using MVVM pattern
Data Binding in Action using MVVM patternData Binding in Action using MVVM pattern
Data Binding in Action using MVVM pattern
 
A (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project FilesA (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project Files
 
Angular 2 introduction
Angular 2 introductionAngular 2 introduction
Angular 2 introduction
 
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
 
The most basic inline tag
The most basic inline tagThe most basic inline tag
The most basic inline tag
 
Engage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 TagEngage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 Tag
 
Universal JS Web Applications with React - Web Summer Camp 2017, Rovinj (Work...
Universal JS Web Applications with React - Web Summer Camp 2017, Rovinj (Work...Universal JS Web Applications with React - Web Summer Camp 2017, Rovinj (Work...
Universal JS Web Applications with React - Web Summer Camp 2017, Rovinj (Work...
 
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
 
Going Offline with Gears And GWT
Going Offline with Gears And GWTGoing Offline with Gears And GWT
Going Offline with Gears And GWT
 
Rapid prototyping of eclipse rcp applications - Eclipsecon Europe 2017
Rapid prototyping of eclipse rcp applications - Eclipsecon Europe 2017Rapid prototyping of eclipse rcp applications - Eclipsecon Europe 2017
Rapid prototyping of eclipse rcp applications - Eclipsecon Europe 2017
 
Easing offline web application development with GWT
Easing offline web application development with GWTEasing offline web application development with GWT
Easing offline web application development with GWT
 
Jira reporting in google sheets
Jira reporting in google sheetsJira reporting in google sheets
Jira reporting in google sheets
 
Nativescript angular
Nativescript angularNativescript angular
Nativescript angular
 
FIWARE Developers Week_ Introduction to Managing Context Information at Large...
FIWARE Developers Week_ Introduction to Managing Context Information at Large...FIWARE Developers Week_ Introduction to Managing Context Information at Large...
FIWARE Developers Week_ Introduction to Managing Context Information at Large...
 
AtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and Server
 
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.02005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
2005 - .NET Chaostage: 1st class data driven applications with ASP.NET 2.0
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 

Similar to SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!

jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
Kiril Iliev
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
European Innovation Academy
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basics
Anton Narusberg
 

Similar to SharePoint Saturday Belgium 2018 - APIs, APIs everywhere! (20)

SharePoint Conference 2018 - Build an intelligent application by connecting i...
SharePoint Conference 2018 - Build an intelligent application by connecting i...SharePoint Conference 2018 - Build an intelligent application by connecting i...
SharePoint Conference 2018 - Build an intelligent application by connecting i...
 
European SharePoint Conference 2018 - Build an intelligent application by con...
European SharePoint Conference 2018 - Build an intelligent application by con...European SharePoint Conference 2018 - Build an intelligent application by con...
European SharePoint Conference 2018 - Build an intelligent application by con...
 
SharePoint Saturday Chicago - Everything your need to know about the Microsof...
SharePoint Saturday Chicago - Everything your need to know about the Microsof...SharePoint Saturday Chicago - Everything your need to know about the Microsof...
SharePoint Saturday Chicago - Everything your need to know about the Microsof...
 
Office 365 Groups and Tasks API - Getting Started
Office 365 Groups and Tasks API - Getting StartedOffice 365 Groups and Tasks API - Getting Started
Office 365 Groups and Tasks API - Getting Started
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CN
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
 
JavaOne Brasil 2016: JavaEE e HTML5: da web/desktop ao mobile
JavaOne Brasil 2016: JavaEE e HTML5: da web/desktop ao mobileJavaOne Brasil 2016: JavaEE e HTML5: da web/desktop ao mobile
JavaOne Brasil 2016: JavaEE e HTML5: da web/desktop ao mobile
 
20150728 100분만에 배우는 windows 10 앱 개발
20150728 100분만에 배우는 windows 10 앱 개발20150728 100분만에 배우는 windows 10 앱 개발
20150728 100분만에 배우는 windows 10 앱 개발
 
AI: Mobile Apps That Understands Your Intention When You Typed
AI: Mobile Apps That Understands Your Intention When You TypedAI: Mobile Apps That Understands Your Intention When You Typed
AI: Mobile Apps That Understands Your Intention When You Typed
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Micro app-framework
Micro app-frameworkMicro app-framework
Micro app-framework
 
Micro app-framework - NodeLive Boston
Micro app-framework - NodeLive BostonMicro app-framework - NodeLive Boston
Micro app-framework - NodeLive Boston
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
 
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
 
Introduction To Google Android (Ft Rohan Bomle)
Introduction To Google Android (Ft Rohan Bomle)Introduction To Google Android (Ft Rohan Bomle)
Introduction To Google Android (Ft Rohan Bomle)
 
NoSQL meets Microservices - Michael Hackstein
NoSQL meets Microservices -  Michael HacksteinNoSQL meets Microservices -  Michael Hackstein
NoSQL meets Microservices - Michael Hackstein
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 
Leveraging APIs from SharePoint Framework solutions
Leveraging APIs from SharePoint Framework solutionsLeveraging APIs from SharePoint Framework solutions
Leveraging APIs from SharePoint Framework solutions
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basics
 

More from Sébastien Levert

More from Sébastien Levert (20)

SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutesSharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
SharePoint Fest Chicago 2019 - Build a Full Intranet in 70 minutes
 
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
SharePoint Fest Chicago 2019 - Building tailored search experiences in Modern...
 
SharePoint Fest Chicago 2019 - From SharePoint to Office 365 Development
SharePoint Fest Chicago 2019 - From SharePoint to Office 365 DevelopmentSharePoint Fest Chicago 2019 - From SharePoint to Office 365 Development
SharePoint Fest Chicago 2019 - From SharePoint to Office 365 Development
 
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development TechniquesESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
 
ESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFxESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFx
 
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 DevelopmentSharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
 
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
SharePoint Fest Seattle 2019 - Building tailored search experiences in Modern...
 
SPC19 - Building tailored search experiences in Modern SharePoint
SPC19 - Building tailored search experiences in Modern SharePointSPC19 - Building tailored search experiences in Modern SharePoint
SPC19 - Building tailored search experiences in Modern SharePoint
 
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
 
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
SharePoint Fest DC 2019 - Bot Framework and Microsoft Graph - Join The Revolu...
 
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
SharePoint Fest DC 2019 - From SharePoint to Office 365 DevelopmentSharePoint Fest DC 2019 - From SharePoint to Office 365 Development
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
 
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFxWebinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
Webinar - 2020-03-24 - Build your first Microsoft Teams app using SPFx
 
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
SPTechCon Austin 2019 - Top 10 feature trends to make you fall in love with y...
 
SPTechCon Austin 2019 - From SharePoint to Office 365 development
SPTechCon Austin 2019 - From SharePoint to Office 365 developmentSPTechCon Austin 2019 - From SharePoint to Office 365 development
SPTechCon Austin 2019 - From SharePoint to Office 365 development
 
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 developmentSharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
 
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
SharePoint Saturday Vienna 2018 - Top 10 feature trends to make you fall in l...
 
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutesSharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
SharePoint Saturday Vienna 2018 - Building a modern intranet in 60 minutes
 
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutesNashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
Nashville SharePoint User Group 2018 - Building a modern intranet in 60 minutes
 
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
SharePoint Fest Seattle 2018 - Build an intelligent application by connecting...
 
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 DevelopmentSharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 

SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!

  • 1.
  • 3. Hi! I’m Seb! @sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at
  • 7. Our Scenario • Building a SharePoint Framework webpart that connects to a SharePoint list to play with its data • Using a single Interface to define our Data Access services to enable easy on-the-fly switch of data sources • Mocking Service for swapping and localWorkbench development
  • 8. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import { IHelpDeskItem } from "./../models/IHelpDeskItem"; import { WebPartContext } from "@microsoft/sp-webpart-base"; export default interface IDataService { getTitle(): string; isConfigured(): boolean; getItems(context: WebPartContext): Promise<IHelpDeskItem[]>; addItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>; updateItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>; deleteItem(context: WebPartContext, item: IHelpDeskItem): Promise<void>; } export default class SharePointDataService implements IDataService { //… } Data Service Architecture
  • 9. Using the SharePoint REST APIs? • Enable almost all your CRUD scenarios in the solutions you are building on SharePoint Online and SharePoint On-Premises • When called from a SharePoint context, no authentication required as it’s all cookie based • It follows the OData standards, making it easy to query your content
  • 10. OData URI at a glance
  • 11. OData URI at a glance
  • 12. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 # Creating a new SPFx Project yo @Microsoft/sharepoint --skip-install # Installing all dependencies npm install # Opening the newly created project code . Creating a new SPFx Project
  • 13. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Getting all the sessions of the specified list using SharePoint REST APIs public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> { return new Promise<IHelpDeskItem[]>((resolve, reject) => { context.spHttpClient.get( `${absoluteUrl}/_api/web/lists/GetById('${this._listId}')/items` + `?$select=*,HelpDeskAssignedTo/Title&$expand=HelpDeskAssignedTo`, SPHttpClient.configurations.v1) .then(res => res.json()) .then(res => { let helpDeskItems:IHelpDeskItem[] = []; for(let helpDeskListItem of res.value) { helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem)); } resolve(helpDeskItems); }).catch(err => console.log(err)); }); } Retrieving Data
  • 14. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Creating a new session in the specified list public addItem(item: IHelpDeskItem): Promise<void> { return new Promise<void>((resolve, reject) => { //… return this._webPartContext.spHttpClient.post( `${currentWebUrl}/_api/web/lists/GetById('${this._listId}')/items`, SPHttpClient.configurations.v1, { headers: { "Accept": "application/json;odata=nometadata", "Content-type": "application/json;odata=verbose", "odata-version": "" }, body: body }); }).then((response: SPHttpClientResponse): Promise<any> => { return response.json(); }).then((item: any): void => { resolve(); }); }); } Creating Data
  • 15. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Deleting a specific item from the specified list public deleteItem(id: number): Promise<void> { return new Promise<void>((resolve, reject) => { if (!window.confirm(`Are you sure?`)) { return; } return this._webPartContext.spHttpClient.post( `${currentWebUrl}/_api/web/lists/GetById('${this._listId}')/items(${id})`, SPHttpClient.configurations.v1, { headers: { "Accept": "application/json;odata=nometadata", "Content-type": "application/json;odata=verbose", "odata-version": "", "IF-MATCH": "*", "X-HTTP-Method": "DELETE" } }).then((response: SPHttpClientResponse): void => { resolve(); }); }); } Deleting Data
  • 16. Using SharePoint Search • Using search allows you to query content in multiple lists or multiple sites or site collections • Uses a totally other query language (KQL or Keyword Query Language) • Very performant and optimized for fetching a lot of data, but has a 15 minutes-ish delay in terms of data freshness • Does not support any data modification
  • 17. KQL Crash Course • See Mickael Svenson blog series “SharePoint Search Queries Explained” • https://www.techmikael.com/2014/03/sharepoint-search-queries- explained.html
  • 18. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Getting all the sessions of the specified list using SharePoint Search public getItems(context: IWebPartContext): Promise<IHelpDeskItem[]> { return new Promise<IHelpDeskItem[]>((resolve, reject) => { context.spHttpClient.get(`${absoluteUrl}/_api/search/query?` + `querytext='ContentTypeId:0x0100…* AND ListID:${this._listId}'` + `&selectproperties='…'` + `&orderby='ListItemID asc'`, SPHttpClient.configurations.v1, { headers: { "odata-version": "3.0" } }).then(res => res.json()).then(res => { let helpDeskItems:IHelpDeskItem[] = []; if(res.PrimaryQueryResult) { for(var row of res.PrimaryQueryResult.RelevantResults.Table.Rows) { helpDeskItems.push(this.buildHelpDeskItem(row)); } } resolve(helpDeskItems); }); } Retrieving Data
  • 19. Notes on legacy APIs support • SharePoint APIs cover a wide-range of options, but not everything • You “might” have to revert to JSOM for some scenarios (Managed Metadata, etc.) • Or even to the ASMXWeb Services for more specific scenarios (Recurring Events in Calendars, etc.) • The SharePoint Framework supports those scenarios, but will require some extra work
  • 20. Microsoft Graph and Custom APIs
  • 21. What is the Microsoft Graph? Groups People Conversations Insights
  • 22. Microsoft Graph is all about you If you or your customers are part of the millions of users that are using Microsoft cloud services, then Microsoft Graph is the fabric of all your data It all starts with /me
  • 23. Gateway to your data in the Microsoft cloud Your app Gateway Your or your customer’s data Office 365 Windows 10 Enterprise Mobility + Security 1Microsoft Graph
  • 24. Microsoft Graph ALL Microsoft 365 Office 365 Windows 10 EMS ALL ONE https://graph.microsoft.com
  • 25. Microsoft 365 Platform web, device, and service apps Extend Microsoft 365 experiences 1 iOS/Android/Windows/Web Build your experience Microsoft Graph
  • 26. Options for the Microsoft Graph • Using the built-in MsGraphClient class that takes care of the entire authentication flow and token management for you • Using a custom implementation using ADAL or MSAL
  • 27. Are there any limitations? • Every scope will have to be defined beforehand and could open some security challenges • Authentication challenges could bring a broken experience to your users depending on the platform and browser used
  • 28. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // In your package-solution.json { // … "webApiPermissionRequests": [ { "resource": "Microsoft Graph", "scope": "Sites.ReadWrite.All" }, // … ] // … } Enabling Graph in your solution
  • 29. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Getting all the sessions of the specified list using the Microsoft Graph public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> { let graphUrl: string = `https://graph.microsoft.com/v1.0` + `/sites/${this.getCurrentSiteCollectionGraphId()}` + `/lists/${this._listId}` + `/items?expand=fields(${this.getFieldsToExpand()})`; return new Promise<IHelpDeskItem[]>((resolve, reject) => { this._client.api(graphUrl).get((error, response: any) => { let helpDeskItems:IHelpDeskItem[] = []; for(let helpDeskListItem of response.value) { helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem)); } resolve(helpDeskItems); }); }); } Retrieving Data
  • 30. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Creating a new item in the specified list public addItem(item: IHelpDeskItem): Promise<void> { let graphUrl: string = `https://graph.microsoft.com/v1.0` + `/sites/${this.getCurrentSiteCollectionGraphId()}` + `/lists/${this._listId}` + `/items`; return new Promise<void>((resolve, reject) => { const body: any = { "fields" : { "Title": item.title, "HelpDeskDescription": item.description, "HelpDeskLevel": item.level }}; this._client.api(graphUrl).post(body, (error, response: any) => { resolve(); }); }); } Creating Data
  • 31. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Deleting the specified item form the specified list public deleteItem(id: number): Promise<void> { let graphUrl: string = `https://graph.microsoft.com/v1.0` + `/sites/${this.getCurrentSiteCollectionGraphId()}` + `/lists/${this._listId}` + `/items/${id}`; return new Promise<void>((resolve, reject) => { this._client.api(graphUrl).delete((error, response: any) => { resolve(); }); }); } Deleting Data
  • 32. Custom APIs • Using the built-in AadGraphClient class that takes care of the entire authentication flow and token management for you • Using a custom implementation using ADAL or MSAL • You can use user impersonation (or not) to query SharePoint content based on user permissions
  • 33. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Getting all the sessions of the specified list using the AAD Client public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> { return new Promise<IHelpDeskItem[]>((resolve, reject) => { let apiUrl: string = "<url>/api/GetHelpDeskItems"; this._client .get(apiUrl, AadHttpClient.configurations.v1) .then((res: HttpClientResponse): Promise<any> => { return res.json(); }).then((res: any): void => { let helpDeskItems:IHelpDeskItem[] = []; for(let helpDeskListItem of res) { helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem)); } resolve(helpDeskItems); }); }); } } Retrieving Data
  • 35. What is PnP JS Core? PnPJS is a fluent JavaScript API for consuming SharePoint and Office 365 REST APIs in a type-safe way.You can use it with SharePoint Framework, Nodejs, or JavaScript projects.This an open source initiative that complements existing SDKs provided by Microsoft offering developers another way to consume information from SharePoint and Office 365. https://github.com/pnp/pnpjs
  • 36. Benefits of PnP JS Core • Type safe so you get your errors while you code and not when you execute and test • Works on all versions of SharePoint (On-Premises, Online, etc.) • Offers built-in caching mechanisms • Heavily used in the SharePoint Development Community
  • 37. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import { sp } from "@pnp/sp"; // ... public onInit(): Promise<void> { return super.onInit().then(_ => { // other init code may be present sp.setup({ spfxContext: this.context }); }); } // ... Sample – Setup PnP JS for SharePoint
  • 38. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Getting all the sessions of the specified list using PnP JS Core public getItems(context: WebPartContext): Promise<IHelpDeskItem[]> { return new Promise<IHelpDeskItem[]>((resolve, reject) => { sp.web.lists.getById(this._listId).items .select("*", "HelpDeskAssignedTo/Title") .expand("HelpDeskAssignedTo").getAll().then((sessionItems: any[]) => { let helpDeskItems:IHelpDeskItem[] = []; for(let helpDeskListItem of sessionItems) { helpDeskItems.push(this.buildHelpDeskItem(helpDeskListItem)); } resolve(helpDeskItems); }); }); } Retrieving Data
  • 41. Share your experience • Use hashtags to share your experience • #Office365Dev • #MicrosoftGraph • #SPFx • Log issues & questions to the GitHub Repositories
  • 42. Thanks! @sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at