Building SharePoint framework Web Parts using the Microsoft Graph
- 1. Building SharePoint Framework Web Parts using the Microsoft Graph Shawn Fagan Marathon Consulting
- 2. www.marathonus.com | 757.427.6999 2 SharePoint Saturday Virginia Beach 2020 | Thank our sponsors! Platinum Sponsors Gold Sponsors Silver Sponsors #SPSVB20
- 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
- 6. www.marathonus.com | 757.427.6999 6 About Me | Star Wars: Galaxy's Edge (Orlando, FL)
- 7. www.marathonus.com | 757.427.6999 7 Getting Started with SharePoint Framework
- 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?
- 10. www.marathonus.com | 757.427.6999 10 • NodeJS - Install NodeJS LTS version 10 • Code Editor • Visual Studio Code • Atom • Webstorm • Yeoman - Scaffolding Tool • Gulp – Task automation Tool • Yeoman SharePoint generator • Optional tools • Fiddler • Postman SPFx | Development Environment
- 11. www.marathonus.com | 757.427.6999 11 What the Microsoft Graph?
- 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
- 13. www.marathonus.com | 757.427.6999 13 MS Graph | Graph Relationships
- 14. www.marathonus.com | 757.427.6999 14 MS Graph | Supported Platforms
- 15. www.marathonus.com | 757.427.6999 15 Graph Explorer Demo Time https://developer.microsoft.com/en-us/graph/graph-explorer
- 16. www.marathonus.com | 757.427.6999 16 SharePoint Framework + 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!
- 18. www.marathonus.com | 757.427.6999 18 SPFx + Graph | How does it all work?
- 19. www.marathonus.com | 757.427.6999 19 Demo Time
- 20. www.marathonus.com | 757.427.6999 20 Resources
- 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
- 22. www.marathonus.com | 757.427.6999 22 Questions
- 23. www.marathonus.com | 757.427.6999 23 Speaker Survey | Let me know what you think!
- 24. Thank You
Editor's Notes
- #9: 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.
- #13: 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
- #15: 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
- #18: 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.