This document discusses how to start developing Teams tabs and SharePoint webparts using the SharePoint Framework (SPFx). SPFx allows building custom user interface elements using open-source tools like React. It covers how to get a developer tenant, set up the development environment, build a basic webpart, and leverage the Microsoft Graph API from within SPFx. The presentation includes demos of a webpart in Teams and SharePoint, using the Graph API to access OneNote notebooks, and best practices for SPFx development.

2. START DEVELOPING TEAMS TABS
AND SHAREPOINT WEBPARTS
WITH SHAREPOINT FRAMEWORK
OFFICE 365 & SHAREPOINT CONNECT 2019

3. OLLI JÄÄSKELÄINEN
• Lead architect, Collaboration & AI
at Sulava - Finland
• Microsoft MVP, MCM
• Office 365 & SharePoint User
Group Finland organizer
• Twitter: @_opax

4. GETTING STARTED WITH
SHAREPOINT FRAMEWORK
START DEVELOPING TEAMS TABS AND SHAREPOINT WEBPARTS WITH SHAREPOINT FRAMEWORK

5. WHAT IS SHAREPOINT FRAMEWORK?
• Modern way to customize user interface
• Builds on open-source development tools
• You can use React and other JavaScript
libraries and frameworks
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

6. WHAT YOU CAN DO WITH SHAREPOINT FRAMEWORK?
• SharePoint webparts that can be tabs
in Microsoft Teams
• SharePoint extensions
Application customizers, field customizers, and
command sets
• Single part app pages
• Library components
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

7. DEMO
• SharePoint Framework webpart in both SharePoint and Teams
• SharePoint Framework extension, application customizer custom footer

8. WHAT DO I NEED TO LEARN?
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

9. IN REAL LIFE, IT IS NOT THAT DIFFICULT!
• gulp serve
Run locally
• gulp build
• gulp bundle
• gulp package-solution
• gulp serve
Debug in
SharePoint • gulp build
• gulp bundle --ship
• gulp package-solution
--ship
Ship to
production
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

10. GETTING STARTED
STEP 1: GET DEVELOPER TENANT
https://developer.microsoft.com/en-us/office/dev-program
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

11. GETTING STARTED
STEP 2: SET UP YOUR DEV ENVIRONMENT
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

12. GETTING STARTED
STEP 3: BUILD YOUR FIRST WEB PART
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

13. BEST PRACTICES FOR NEW SHAREPOINT FRAMEWORK
DEVELOPERS
Start developing Teams tabs and SharePoint webparts with SharePoint Framework
Use
TypeScript
1) You can use other JavaScript libraries or frameworks if you really want.
Use
Office UI
Fabric
Use
PnP SPFx
controls
Use
React1)

14. WHY REACT?
There are dozens of other JavaScript libraries and frameworks for building
user interface, so why should I learn React?
1. Used by Microsoft in Office 365
2. Reusable components
3. Best samples and documentation
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

15. DEMO
• Open Teams Chat – React / SharePoint Framework

16. USING
MICROSOFT GRAPH API
START DEVELOPING TEAMS TABS AND SHAREPOINT
WEBPARTS WITH SHAREPOINT FRAMEWORK

17. UNDERSTANDING MICROSOFT GRAPH API
• The one unified API gives you access to all Microsoft 365 services
• Graph Explorer
https://developer.microsoft.com/en-us/graph/graph-explorer
• Documentation
https://docs.microsoft.com/en-us/graph/
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

18. DEMO
• Microsoft Graph Explorer
• Microsoft Graph Documentation

19. USING MICROSOFT GRAPH API FROM
SHAREPOINT FRAMEWORK
• Key to Graph API: this.context.msGraphClientFactory
• Use getClient() to access Graph Client
• Use get(), post(), patch(), put(), delete() to make requests
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

20. DEMO
• Listing the current user’s OneNote notebooks in a web part

21. KEY TAKEAWAYS
START DEVELOPING TEAMS TABS AND SHAREPOINT
WEBPARTS WITH SHAREPOINT FRAMEWORK

22. KEY TAKEAWAYS
• SharePoint Framework is the best way to customize user interface in
SharePoint
• SharePoint Framework webparts can be configured to work as Teams tabs
• There is a lot to learn, but we have the best documentation ever in the
history of SharePoint development
• Microsoft Graph API is your key to Microsoft 365 services
Start developing Teams tabs and SharePoint webparts with SharePoint Framework

23. THANK YOU!