Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extending Microsoft Teams with SPFx webparts

58 views

Published on

Who wouldn't want to just develop once and then run their code everywhere? Now with SPFx (SharePoint Framework) 1.8 being out, we're getting one step closer to that, as we're given an elegant way to bridge the gap between your portals built on SharePoint, and Microsoft Teams where most of the collaboration happens. Teams is just getting more and more powerful - and you can make it even more powerful by extending it.

This session contains an overview of Teams extensibility scenarios, what SPFx is, and a closer look on how they work together. We're taking a closer look (with demos!) at two different scenarios: how to create a new SPFx webpart to be used with Teams, and how to modernize a webpart you already have running in your environment.

After this session, you're familiar with the basics of developing SPFx webparts to be used both in SharePoint and Teams, as well as how to modify your existing webparts to surface them in Teams.

This is the version of this session from SharePoint Saturday Nashville 2019. This version unfortunately is missing the videos - they'll be available on my blog article about the session right here:
https://www.koskila.net/?p=4278

Published in: Software
  • Be the first to comment

  • Be the first to like this

Extending Microsoft Teams with SPFx webparts

  1. 1. Extending MicrosoftTeams with SPFx webparts Level: 100-200 ||Teams track Who wouldn't want to just develop once and then run their code everywhere? Now with SPFx (SharePoint Framework) 1.8 being out, we're getting one step closer to that, as we're given an elegant way to bridge the gap between your portals built on SharePoint, and MicrosoftTeams where most of the collaboration happens.Teams is just getting more and more powerful - and you can make it even more powerful by extending it. This session contains an overview ofTeams extensibility scenarios, what SPFx is, and a closer look on how they work together.We're taking a closer look (with demos!) at two different scenarios: how to create a new SPFx webpart to be used withTeams, and how to modernize a webpart you already have running in your environment. After this session, you're familiar with the basics of developing SPFx webparts to be used both in SharePoint and Teams, as well as how to modify your existing webparts to surface them inTeams. All of the code included in the demo will be available on GitHub after the session. @koskila | https://www.koskila.net
  2. 2. Extending MicrosoftTeams with SPFx webparts
  3. 3. Platinum Sponsors Gold Sponsors Silver Sponsors Thank You for being a part of Office 365 & SharePoint Saturday Nashville! Office 365 & SharePoint Users Group
  4. 4. Who’s speaking? • Antti K. Koskela, Escalation Engineer for Valo Solutions • From Finland, 2017 USA, 2018 Montréal • A dev since 2004 (an accountant before that, started with PHP, then Java, eventually C#) • Bending and twisting SharePoint into different shapes since MOSS • Blogging at https://www.koskila.net and https://www.valointranet.com ! @koskila | https://www.koskila.net
  5. 5. Jyväskylä Montréal Nashville
  6. 6. Session The session will include a quick overview and a few demos of the capabilities of: Overview ofTeams & its extensibility scenarios What is SPFx ? How do they work together? 3 demos: How to create a new SPFx webpart to be used withTeams How to import a previously existing webpart toTeams How to modernize a webpart you already have running in your environment. @koskila | https://www.koskila.net
  7. 7. Session: Structure A quick look intoTeams (5 mins) A quick look into SFPx (5 mins) An overview ofTeams extensibility (5 mins) SPFx +Teams (5 mins) Demos (30 mins) Discussion (5 mins) @koskila | https://www.koskila.net
  8. 8. Session: Goals The attendees (that’s you!) are familiar with: Teams extensibility and SPFx The basics of developing SPFx webparts to be used both in SharePoint andTeams How to modify your existing webparts to surface them in Teams. @koskila | https://www.koskila.net
  9. 9. Your turn! @koskila | https://www.koskila.net
  10. 10. Are/were you … A developer? An IT Pro? A power user? UsingTeams? Familiar with SPFx? Familiar withTeams extensions? Here last year? @koskila | https://www.koskila.net
  11. 11. Teams – why should I care? @koskila | https://www.koskila.net
  12. 12. “To empower every person and every organization on the planet to achieve more.” Microsoft’s mission statement. https://www.microsoft.com/en-us/about Teams (both free and enterprise version) possess a huge role in this. @koskila | https://www.koskila.net
  13. 13. @koskila | https://www.koskila.nethttps://slideplayer.com/slide/13397477/
  14. 14. @koskila | https://www.koskila.net
  15. 15. Teams adoption is huge and growing 91 of Fortune100 useTeam @koskila | https://www.koskila.net https://www.microsoft.com/en-us/microsoft-365/blog/2019/03/19/microsoft-teams-experiences-intelligent-workplace/ https://office365itpros.com/2019/01/31/teams-growth-accelerating/
  16. 16. Adoption in IT companies @koskila | https://www.koskila.net Spiceworks’ business chat app report November 2018 https://www.spiceworks.com/press/releases/spiceworks-study-reveals-adoption-of-microsoft-teams-accelerating-in-the-workplace/
  17. 17. https://techcommunity.microsoft.com/t5/Microsoft-Teams/NEW-Teams-IT-architecture-posters-published/td-p/480928
  18. 18. SPFx A new thing, again? @koskila | https://www.koskila.net
  19. 19. SPFx vs “Traditional” SharePoint SharePoint Framework Client-side execution model Rendered & executed in page context Only way to customize modern pages Open source cross-platform tooling Responsive, accessible & mobile friendly Scoped to tenant or site Limited to creating client-side web parts & UI extensions Farm solutions • Full server-side API • Only supported in on-premises environments • Built withVisual Studio on Windows • Scoped to farm • Build web parts, timer jobs, event receivers, feature receivers, etc.
  20. 20. https://www.linkedin.com/pulse/what-sharepoint-framework-spfx-mark-kashman/
  21. 21. SPFx vs “classic” client-side options • Script EditorWebParts • Obvious choice of developers for customizing DOM on classic SharePoint sites. • Script can be edited by any user with permissions • Cannot be added to “NoScript” sites • App Parts • Developed using Add-in model (iframe) • Cannot access DOM of SharePoint page • Development and deployment is complicated, performance is questionable • SPFxWebParts • Client side web parts, leverages modern JavaScript frameworks • Can be used with classic or modern SharePoint pages • Development can be complicated, but at least the community is good and possible side effects are limited
  22. 22. Teams Extensibility @koskila | https://www.koskila.net
  23. 23. Teams Extensibility Tabs (Team and Personal) Bots Connectors Messaging extensions Activity feed integrations Outgoing web hooks
  24. 24. Teams Extensibility Using SPFx is not necessarily – it’s just one scenario! Citizen Developer scenarios: ExtendTeams with Flow (https://flow.microsoft.com/en- us/blog/introducing-the-flow-tab-in-teams-and-new-teams-triggers/ ) QnA Maker & Bot Framework enable no-code bots forTeams (and other channels): https://thomy.tech/how-to-create-your-own-qa- bot-for-microsoft-teams-with-no-code/ @koskila | https://www.koskila.net
  25. 25. Teams + SPFx @koskila | https://www.koskila.net
  26. 26. @koskila | https://www.koskila.net SharePoint as the hosting platform for your MicrosoftTeams solutions SharePoint Online js JavaScript Library js JavaScript Library Office 365 public CDN js SPFxTeams solutions are deployed to Office 365 tenants using tenant app catalog-Typical options for the sppkg file packaging and hosting available. SPFxTeams Application SPFxTeams application exposed in the MicrosoftTeams as a tab (IFrame).Assets are hosted in SharePoint and published to Teams using standardTeams model. All typical configuration available as for any SPFx solution – like asset packaging, CDN configuration, asset provisioning etc. 1 2 3 Objective:Simplifydeploymentand hostingfordevelopers.Remove requirementsforAzureADspecificappsor configurationsthroughAzureAdminUI
  27. 27. ExtendingTeams in practice @koskila | https://www.koskila.net
  28. 28. Business value • The demos show how to develop or reuse your SPFx webparts inTeams • Single effort -> multiple channels @koskila | https://www.koskila.net
  29. 29. DEMO 1 How to create a new extension using SPFx? @koskila | https://www.koskila.net
  30. 30. How Following these steps: https://docs.microsoft.com/en- us/sharepoint/dev/spfx/web-parts/get- started/using-web-part-as-ms-teams-tab
  31. 31. @koskila | https://www.koskila.net
  32. 32. DEMO 1 -Video
  33. 33. DEMO 2 How to modernize an existing SPFx webpart to work in Teams? @koskila | https://www.koskila.net
  34. 34. DEMO 2 • AddTeams manifest • Surface same webpart in bothTeams and SharePointOnline
  35. 35. DEMO 2 – video
  36. 36. What’s next? • So, first step ofTeamsifying an SPFx webpart is easy • You might run into issues with authentication, pop-ups, style inconsistencies or your webpart trying to navigate elsewhere • Most of the stuff probably works in browser, desktop could cause issues • Improvement: • RecognizeTeams context and make styles compatible
  37. 37. DEMO 3 Update the webpart to actually function withTeams. @koskila | https://www.koskila.net
  38. 38. DEMO 3 1. Reupload a dev version of the package 2. Verify it’s now loaded from localhost 3. Update to SFPx 1.8 4. Grab the context if it exists 5. Adjust the styles 6. Reload in browser and enjoy
  39. 39. DEMO 3 - video
  40. 40. Using App Studio to create manifests
  41. 41. Conclusions & Final words @koskila | https://www.koskila.net
  42. 42. Conclusions • Teams: • Microsoft’s Hub for collaboration • SPFx: • Client-side framework for building SharePoint extensions • Teams + SPFx: • Develop with SPFx = works inTeams and SharePoint • Demo 1: • Creating a new SPFx webpart that’s compatible from the get-go • Demo 2: • Surfacing your SPFx webpart inTeams • Demo 3: • Modifying your existing SPFx webparts to be compatible withTeams @koskila | https://www.koskila.net
  43. 43. @koskila | https://www.koskila.net Discussion
  44. 44. Resources & Further reading • Code samples: • https://github.com/koskila/sp-dev-fx- webparts/commits/moderncalendarteamsdemo_v2/samples/js-modern-calendar • Microsoft’s guides etc: • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using- web-part-as-ms-teams-tab • My blog post containing slides, code, etc: • Will be published at https://www.koskila.net/?p=4278 @koskila | https://www.koskila.net
  45. 45. #SharePint 4:30PM 51 North Taproom 704 51st Ave N, Nashville, TN Giveaways 3:30PM Room MPR2 Must be present to win!
  46. 46. Feedback, Ideas, Questions? Let’s connect! • antti@valointranet.com • @koskila • www.koskila.net • https://github.com/koskila • https://www.linkedin.com/in/koski la/ @koskila | https://www.koskila.net

×