SharePoint Saturday Virginia Beach 2020 sessions on Building share point framework web parts using the Microsoft Graph. The session took a look at how you can build your own SharePoint Framework Web Parts & Extensions to leverage the Microsoft Graph to create a personalized the users experience.
3. www.marathonus.com | 757.427.6999 3
SharePoint Saturday Virginia Beach 2020 | SharePint!
ATC
Ynot Pizza, Address
3276 Princess Anne Rd, Virginia Beach, VA 23456
in Landstown Commons shopping center
Following SPSVB Closing (5:30)
Some appetizers will be provided, drinks are on
your own
4. www.marathonus.com | 757.427.6999 4
• About Me
• Getting Started with SharePoint Framework
• What the Microsoft Graph?
• Graph Explorer Demo Time
• SharePoint Framework + Microsoft Graph
• SPFx Demo Time
• Resources
• Questions
Overview
5. www.marathonus.com | 757.427.6999 5
• Senior Information Technology Consultant / Team Lead at Marathon Consulting focus on
SharePoint, Office 365 and Azure
• Father of energetic two boys
4 year old & 15 month old
• Over 18 years of IT and Development experience
• Over 14 years experience with SharePoint for
as an Administrator and Developer
• SharePoint experience with Farm Configuration,
Branding, Web Part Development (including SPFx)
and Workflow (OOB & 3rd Party Tools)
• Not much free time lately, but I play Kickball,
Softball and love coding code!
About Me | Shawn Fagan
@FaganSC https://github.com/FaganSC
8. www.marathonus.com | 757.427.6999 8
• SharePoint Framework (SPFx) is a page and web part model that provides full support
for client-side SharePoint development, easy integration with SharePoint data, and support
for open source tooling. With the SharePoint Framework, you can use modern web
technologies and tools in your preferred development environment to build productive
experiences and apps that are responsive and mobile-ready from day one. The SharePoint
Framework works for SharePoint Online and also for on-premises (SharePoint 2016
Feature Pack 2 and SharePoint 2019).
• Client-side web parts using modern script development tools and the SharePoint
workbench (a development test surface), and you can deploy your client-side web parts to
modern pages and classic web part pages in Office 365 tenants
• Web Parts are controls that appear inside a SharePoint page but run locally in the
browser. They're the building blocks of pages that appear on a SharePoint site
• Extensions enable you to extend the SharePoint user experience within modern pages
and document libraries
• Library Components are shared code, which multiple SharePoint Framework can easily
share in the context of the SharePoint or Microsoft Teams..
SPFx | What is SharePoint Framework?
9. www.marathonus.com | 757.427.6999 9
• Office 365 Tenant
• You’ll need an Office 365 tenant
• Office 365 Developer Program
• https://developer.microsoft.com/en-us/office/dev-program
• App Catalog Site
• Should have this already setup in your SP Tenant
• Site Collection
• Any site Collection if using Development Tenant
• Developer Site Collection if it’s your production Tenant
• SharePoint Workbench
• Built-in Tool for SPFx
SPFx | What do you need for SPFx?
12. www.marathonus.com | 757.427.6999 12
• Microsoft Graph is the gateway to data and intelligence in Microsoft 365
• It provides a unified programmability model that you can use to access the tremendous
amount of data in Office 365, Windows 10, and Enterprise Mobility + Security.
• Single API Endpoint to provide access to people-centric data within Microsoft 365
services
• REST APIs or SDKs to access the endpoint and build apps that support scenarios
spanning across productivity, collaboration, education, security, identity, access, device
management, and much more.
• REST APIs and client libraries to access data on the following Microsoft 365 services:
• Office 365 services
• Enterprise Mobility and Security services
• Windows 10 services: activities, devices, notifications
• Dynamics 365 Business Central
MS Graph | Overview of Microsoft Graph
17. www.marathonus.com | 757.427.6999 17
• SharePoint Framework solutions with Microsoft Graph can easily connect by using the
MSGraphClient.
• MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0
• Replaces the need to use AadHttpClient
• It simplifies connecting to the Microsoft Graph inside SharePoint Framework
• Uses existing Microsoft Graph JavaScript Client Library
• Directly handles authenticating
• REST APIs and client libraries to access data on the following Microsoft 365 services:
• Office 365 services
• Enterprise Mobility and Security services
• Windows 10 services: activities, devices, notifications
• Dynamics 365 Business Central
SPFx + Graph | Working together!
21. www.marathonus.com | 757.427.6999 21
• Graph Explorer - https://developer.microsoft.com/en-us/graph/graph-explorer
• Overview of the SharePoint Framework - https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/sharepoint-framework-overview
• Overview of Microsoft Graph - https://docs.microsoft.com/en-us/graph/overview
• SPFx & MS Graph Training Module - https://github.com/microsoftgraph/msgraph-training-spfx
• MS Graph Github - https://github.com/microsoftgraph
• SPFx Webpart Github - https://github.com/SharePoint/sp-dev-fx-webparts
• SPFx Extensions Github - https://github.com/SharePoint/sp-dev-fx-extensions
Resources | Links to help you out
Extensions
Application Customizers. Adds scripts to the page, and accesses well-known HTML element placeholders and extends them with custom renderings.
Field Customizers. Provides modified views to data for fields within a list.
Command Sets. Extends the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement behaviors.
Office 365 services: Delve, Excel, Microsoft Bookings, Microsoft Teams, OneDrive, OneNote, Outlook/Exchange, Planner, and SharePoint
Enterprise Mobility and Security services: Advanced Threat Analytics, Advanced Threat Protection, Azure Active Directory, Identity Manager, and Intune
Windows 10 services: activities, devices, notifications
Dynamics 365 Business Central
HTTP Request Action – Rest API Endpoint
SharePoint List – Custom SharePoint List
Approval Process – Built-In Approval Action
Ability to setup Guest Access – REST API to invoke Action (MS Graph)
Ability to setup SP Permissions – SharePoint REST API to invoke Action
End User Notification – Office 365 Outlook Send Email Action
The MSGraphClient is available only in projects built using SharePoint Framework v1.6.0 and later. While the MSGraphClient is explained in this article by using a client-side web part, you can also use it in SharePoint Framework Extensions.
The single sign-on for the MSGraphClient is only available in SharePoint Online today. You can leverage the client for on premises developments but your users will be requested to sign in again within the webpart.