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 MicrosoftTeams with SPFx webparts
Level: 200 ||Teams / Dev
Who wouldn't want to just develop once and then run t...
Extending MicrosoftTeams with SPFx
webparts
Diamond
Platinum
Gold
Silver
Who’s speaking?
• Antti K. Koskela, Escalation Engineer forValo
Solutions
• From Finland -> 2017 USA -> 2018 Montréal
• A ...
Jyväskylä
Montréal
Charlotte
Session
The session will include a quick overview and a few demos of
the capabilities of:
• Overview ofTeams & its extensi...
Session: Structure
1. A quick look intoTeams (5 mins)
2. An overview ofTeams extensibility (5 mins)
3. A quick look into S...
Session: Goals
• The attendees (that’s you!) are familiar with:
1. Teams extensibility and SPFx
2. The basics of developin...
Your turn!
@koskila | https://www.koskila.net
Are/were you …
A developer?
An IT Pro?
A power user?
UsingTeams?
Familiar with SPFx?
Familiar withTeams extensions?
@koski...
Teams – why should I care?
@koskila | https://www.koskila.net
“To empower every person and every organization on the
planet to achieve more.”
Microsoft’s mission statement.
https://www...
@koskila | https://www.koskila.nethttps://slideplayer.com/slide/13397477/
@koskila | https://www.koskila.net
https://techcommunity.microsoft.com/t5/Microsoft-Teams/NEW-Teams-IT-architecture-posters-published/td-p/480928
Teams Extensibility
@koskila | https://www.koskila.net
Teams Extensibility
Tabs (Team and Personal)
Bots
Connectors
Messaging extensions
Activity feed integrations
Outgoing web ...
Teams Extensibility
• Using SPFx is not necessarily – it’s just one scenario!
• Citizen Developer scenarios:
• ExtendTeams...
SPFx
A new thing, again?
@koskila | https://www.koskila.net
SPFx vs “Traditional” SharePoint
SharePoint Framework
• Client-side execution model
• Rendered & executed in page
context
...
SPFx vs “classic” client-side options
• Script EditorWebParts
• Obvious choice of developers for customizing DOM on classi...
Teams + SPFx
@koskila | https://www.koskila.net
@koskila | https://www.koskila.net
SharePoint as the hosting platform for your MicrosoftTeams solutions
SharePoint
Online
...
ExtendingTeams in practice
@koskila | https://www.koskila.net
Business value
• The demos show how to
develop or reuse your SPFx
webparts inTeams
• Single effort -> multiple
channels
@k...
DEMO 1
How to create a new extension
using SPFx?
@koskila | https://www.koskila.net
DEMO 1 - How
Following these steps:
https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/web-parts/get-
started/using-web...
@koskila | https://www.koskila.net
DEMO 1 - How
DEMO 1
• Essentially:
npm install yo -g
npm install @microsoft/generator-sharepoint -g
yo
And then follow instructions!
DEMO 1
• Then:
code .
gulp bundle --ship
gulp package-solution --ship
gulp serve
DEMO 1
• Finally:
Upload the app
Enter a webpart page
Add this to the URL:
?loadSPFX=true&debugManifestsFile=https%3A%2F%2...
DEMO 2
How to modernize an existing
SPFx webpart to work in
Teams?
@koskila | https://www.koskila.net
DEMO 2
• Surface the same webpart in both Teams
and SharePoint Online
• Update the webpart to actually function
withTeams!...
DEMO 2 – How?
• Reupload a dev version of the SPFx
package
• Verify it’s now loaded from localhost
• Add aTeams manifest
•...
DEMO 2
• We already have a Modern Calendar SPFx webpart running in an
environment
• We also have the source available (the...
DEMO 2
• Upload the dev version running from localhost
• gulp serve
• Access a Modern page and add this to your url:
?load...
DEMO 2
• Adding theTeams manifest
• You need to change the following values:
• id: Needs to be unique)
• configurableTabs ...
DEMO 2
• Update the SPFx webpart to 1.8 (or newer)
• npm outdated
• npm install @microsoft/sp-core-library@latest --save
•...
DEMO 2 - Code
• Add code to recognize theTeams context
• Grab theTeams theme from the context to make our
webpart’s theme ...
DEMO 2 - Caveats
• So, first step ofTeamsifying an SPFx webpart is easy
• You might run into issues with authentication, p...
Last points
Using App Studio to create manifests
Conclusions & Final words
@koskila | https://www.koskila.net
Conclusions
• Teams:
• Microsoft’s Hub for collaboration
• SPFx:
• Client-side framework for building SharePoint extension...
@koskila | https://www.koskila.net
Discussion
Resources & Further reading
• Code samples:
• https://github.com/koskila/sp-dev-fx-
webparts/commits/moderncalendarteamsde...
Speaker Survey
and Raffle
• This year we are replacing the paper version
of Speaker Survey with Microsoft Forms.
• Scan th...
SharePint Happy Hour event held after
SPSCLT19 at Duckworth’s Grill and
Taphouse Uptown.
Walking distance from UNC Charlot...
Feedback, Ideas,
Questions? Let’s connect!
• antti@valointranet.com
• @koskila
• www.koskila.net
• https://github.com/kosk...
Extending Microsoft Teams with SPFx webparts
Extending Microsoft Teams with SPFx webparts
Extending Microsoft Teams with SPFx webparts
Upcoming SlideShare
Loading in …5
×

Extending Microsoft Teams with SPFx webparts

52 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.

All of the code included in the demo will be available on GitHub after the session.

See the whole session descriptions here:
https://www.koskila.net/speaking-at-sps-charlotte-8-10-2019/
https://www.koskila.net/how-to-update-your-spfx-webpart-to-a-new-version-of-sharepoint-framework/

Published in: Technology
  • 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: 200 ||Teams / Dev 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 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. Diamond Platinum Gold Silver
  4. 4. Who’s speaking? • Antti K. Koskela, Escalation Engineer forValo 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 Charlotte
  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? 2 demos: 1. How to create a new SPFx webpart to be used withTeams 2. How to modernize a webpart you already have running in your environment. @koskila | https://www.koskila.net
  7. 7. Session: Structure 1. A quick look intoTeams (5 mins) 2. An overview ofTeams extensibility (5 mins) 3. A quick look into SFPx (5 mins) 4. SPFx +Teams (5 mins) 5. Demos (30 mins) 6. Discussion (5 mins) @koskila | https://www.koskila.net
  8. 8. Session: Goals • The attendees (that’s you!) are familiar with: 1. Teams extensibility and SPFx 2. The basics of developing SPFx webparts to be used both in SharePoint andTeams 3. 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? @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. https://techcommunity.microsoft.com/t5/Microsoft-Teams/NEW-Teams-IT-architecture-posters-published/td-p/480928
  16. 16. Teams Extensibility @koskila | https://www.koskila.net
  17. 17. Teams Extensibility Tabs (Team and Personal) Bots Connectors Messaging extensions Activity feed integrations Outgoing web hooks
  18. 18. 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
  19. 19. SPFx A new thing, again? @koskila | https://www.koskila.net
  20. 20. 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-sideAPI • Only supported in on-premises environments • Built withVisual Studio on Windows • Scoped to farm • Build web parts, timer jobs, event receivers, feature receivers, etc.
  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 • SPFx WebParts • 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 + SPFx @koskila | https://www.koskila.net
  23. 23. @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 deployedto 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 publishedto 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
  24. 24. ExtendingTeams in practice @koskila | https://www.koskila.net
  25. 25. Business value • The demos show how to develop or reuse your SPFx webparts inTeams • Single effort -> multiple channels @koskila | https://www.koskila.net
  26. 26. DEMO 1 How to create a new extension using SPFx? @koskila | https://www.koskila.net
  27. 27. DEMO 1 - How Following these steps: https://docs.microsoft.com/en- us/sharepoint/dev/spfx/web-parts/get- started/using-web-part-as-ms-teams-tab
  28. 28. @koskila | https://www.koskila.net DEMO 1 - How
  29. 29. DEMO 1 • Essentially: npm install yo -g npm install @microsoft/generator-sharepoint -g yo And then follow instructions!
  30. 30. DEMO 1 • Then: code . gulp bundle --ship gulp package-solution --ship gulp serve
  31. 31. DEMO 1 • Finally: Upload the app Enter a webpart page Add this to the URL: ?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js
  32. 32. DEMO 2 How to modernize an existing SPFx webpart to work in Teams? @koskila | https://www.koskila.net
  33. 33. DEMO 2 • Surface the same webpart in both Teams and SharePoint Online • Update the webpart to actually function withTeams! • The process is outlined in this blog post: https://www.koskila.net/how-to-teamsify- an-spfx-solution?/
  34. 34. DEMO 2 – How? • Reupload a dev version of the SPFx package • Verify it’s now loaded from localhost • Add aTeams manifest • Load the manifest inTeams • Update to SPFx 1.8 (or later) • Grab the context if it exists • Adjust the styles • Reload in browser and enjoy
  35. 35. DEMO 2 • We already have a Modern Calendar SPFx webpart running in an environment • We also have the source available (the beauty of Open Source!) • (https://github.com/koskila/sp-dev-fx- webparts/tree/master/samples/js-modern-calendar)
  36. 36. DEMO 2 • Upload the dev version running from localhost • gulp serve • Access a Modern page and add this to your url: ?loadSPFX=true&debugManifestsFile=https%3A%2F %2Flocalhost%3A4321%2Ftemp%2Fmanifests.js
  37. 37. DEMO 2 • Adding theTeams manifest • You need to change the following values: • id: Needs to be unique) • configurableTabs > configurationUrl: Needs to contain the id of the SPFx component • configurableTabs > scopes: Needs to include “team” • Add thumbnail pictures • Package as a zip • Upload
  38. 38. DEMO 2 • Update the SPFx webpart to 1.8 (or newer) • npm outdated • npm install @microsoft/sp-core-library@latest --save • npm install @microsoft/sp-module-interfaces@latest --save • npm install @microsoft/sp-webpart-base@latest --save • npm install @microsoft/sp-webpart-workbench@latest --save • gulp –update • npm update –save • An example of this process outlined here: • https://www.koskila.net/how-to-update-your-spfx-webpart- to-a-new-version-of-sharepoint-framework/
  39. 39. DEMO 2 - Code • Add code to recognize theTeams context • Grab theTeams theme from the context to make our webpart’s theme kind of compatible • See all the code changes here: • https://github.com/SharePoint/sp-dev-fx- webparts/compare/master...koskila:moderncalendart eamsdemo_v2
  40. 40. DEMO 2 - Caveats • 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
  41. 41. Last points
  42. 42. Using App Studio to create manifests
  43. 43. Conclusions & Final words @koskila | https://www.koskila.net
  44. 44. 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 existing SPFx webpart inTeams @koskila | https://www.koskila.net
  45. 45. @koskila | https://www.koskila.net Discussion
  46. 46. 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
  47. 47. Speaker Survey and Raffle • This year we are replacing the paper version of Speaker Survey with Microsoft Forms. • Scan the QR code for each session to access and submit your survey. • QR codes can be found in the program guide or on the room sign located by the door. • You will receive ONE raffle ticket for each session survey you complete. • The raffle ticket volunteer will validate your First and Last name before providing your ticket(s) • Drawing will be held this afternoon 4:30- 5:00 pm. • Must be present to win. You can download and use the QR Reader app available for both iOS and Android
  48. 48. SharePint Happy Hour event held after SPSCLT19 at Duckworth’s Grill and Taphouse Uptown. Walking distance from UNC Charlotte Center City campus and the 7th street light rail stop.
  49. 49. 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

×