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.

Bring together SPFx Solutions in SharePoint and MS Teams​


Published on

SPS Chennai 2019

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bring together SPFx Solutions in SharePoint and MS Teams​

  1. 1. Bring together SPFx Solutions in SharePoint and MS Teams
  2. 2. Hi! I am Jenkins NS  SharePoint & Office 365 Solution Architect  @Cognizant  International Speaker and Blogger   @jenkinsns  Blog :  Facebook Page :  Github :
  3. 3. SPS Chennai 2019 Single platform for hosted experiences 1 Overview of Teams and SPFx 2 3 AGENDA 4
  4. 4. SPS Chennai 2019 Microsoft Teams Communicate through chat, meetings & calls Collaborate with deeply integrated Office 365 apps Customize& extend with 3rd party apps, processes, and devices Work with confidence enterprise level security, compliance, and manageability
  5. 5. SPS Chennai 2019 SharePoint Extensibility Build modern SP solutions • Full-trust JavaScript based framework running in the main app • Use modern auth to integrate with Graph SP add-ins • Provider-hosted based via iframes • Low-trust, end user acquisition model • Distribute via Office Store Teams Platform Build apps to custom tailor your teams • Modern embedding via tabs • Enhance integrations via bots, messaging extensions, Adaptive cards, and Graph • Add communication services, e.g. programmable voice and video Current State of SharePoint and Teams
  6. 6. SPS Chennai 2019 Our Expectations Information the team cares about should be available regardless of the tool / workload Make it possible to bridge team collaboration and external communication End user Reduce the number of places and ways to manage and deploy solutions to end usersIT admin Reach multiple workloads with a single solution Reduce number of developer concepts and experiences Developer  Enable users to collaborate around the same content in SharePoint and Teams  Centralized Admin experience and tools, including LOB app distribution  Common developer framework for building solutions targeting both SharePoint and Teams experiences
  7. 7. SPS Chennai 2019 Single platform for hosted experiences Rich canvases Provider-hosted appsO365-hosted apps (“SPFx solutions”) Microsoft Graph Common platform and runtime Future Build your solution to run across Teams, SharePoint, and (eventually) all of Office
  8. 8. SPS Chennai 2019 Surfacing SPFx in Teams  This features available from 1.7 plus beta version. i.e, yo @microsoft/sharepoint –plusbeta  Not yet ready for production usage
  9. 9. SPS Chennai 2019 Instructions for enabling side loading As part of the Developer Preview of SharePoint Framework Teams Tabs, you will need to explicitly deploy the Microsoft Teams app to a Team in Microsoft Team. Your tenant will also need to support Side loading of external apps for the Microsoft Teams, so that you can deploy the app to a specific Team and use it 1. Go to ns 2. Log on with your tenant admin credentials 3. Settings  Services & add-Ins 4. Click on Microsoft Teams > Apps 5. Turn on “Enable sideloading of external apps” 6. Scroll to the bottom and press “Save”
  10. 10. SPS Chennai 2019 Bring SPFx Solutions into Teams Tab
  11. 11. SPS Chennai 2019 SPFx Targeting Teams Tabs • SPFX as the standard way for Enterprise Devs and SIs to Develop “O365- hosted” solutions across SharePoint and Teams • Developers will be able to “target” the environments in the manifest.json • Single point of governance in the App Catalog • Standard “features” of SPFx • Toolchain • Authentication • SP, Graph and WebAPI Access • CDN hosting • Config experience • Solution hosting • Component is able to get the right application context
  12. 12. SPS Chennai 2019 SharePoint Online Microsoft Teams Bring SPFx Solutions into Teams Tab js SPFx Teams solutions are deployed to Office 365 tenants using tenant app catalog 1 zip Teams manifest file is created and deployed in Teams LoB Catalog 2 User selects the SPFx application like any other tab in MS Teams “Add a tab” experience 3 Configuration panel is displayed and, once saved, information are stored in the SPO site connected to the group 4
  13. 13. SPS Chennai 2019 SharePoint Online Microsoft Teams Bring SPFx Solutions into Teams Tab SPFx component renders in a dedicated _layout page which is iframed in Teams 5 Teams and SharePoint site context are available to developer 6 Code is loaded from SharePoint asset library where it was deployed at time of package upload 7 Alternatively, code can also run in different CDN location 7 SPFx Application js js js js
  14. 14. SPS Chennai 2019 Authentication  Silent authentication between Teams rich client and SPO • Teams provides the token client side to SharePoint • It convert it to cookie server side • The _layout system page that hosts the SPFx solution renders: no additional auth required • Full access to SharePoint REST APIs  When / if the component requires to access Graph / Web APIs: • We get the auth token from the client: no permissions there, we use it as bootstrap token • SPFx client libraries understand that the call is coming from a Teams rich client environment*  Bootstrap token is sent to AAD using the “on behalf of” flow to obtain an access token for the requested resource in exchange for the bootstrap token  AAD returns the access token to SPO. The component can now execute the Web API call.
  15. 15. SPS Chennai 2019
  16. 16. SPS Chennai 2019
  17. 17. SPS Chennai 2019 Demo
  18. 18. SPS Chennai 2019 Deploy your existing provider-hosted tab app into SharePoint
  19. 19. SPS Chennai 2019 SharePoint app catalogSharePoint Online Surfacing Teams tabs in SharePoint js Developer hosts application in provider of choice, e.g. Azure 1 zip Teams tab embeds web application and its related configuration experience 2 App is packaged in a Teams app manifest and published to SharePoint app catalog 3 End user configures the tab when creating a page, just like any other web part 4 Hosting providerhtml
  20. 20. SPS Chennai 2019 SharePoint Online Surfacing Teams tabs in SharePoint Web part “shim” layer provides the host for the tab app 5 Provides the same SDK functionality as the Teams client and bridges to the native SharePoint client 6 Tab host (web part)
  21. 21. SPS Chennai 2019 Upload the Teams app to SharePoint • Upload the zip package directly to SP • Manage alongside other custom apps • Make the app available as a web part for all users in the tenant
  22. 22. SPS Chennai 2019 Reuse your configuration experience • SP will launch tab configuration experience in modal dialog • Maintains form factor of the original configuration page
  23. 23. SPS Chennai 2019 23
  24. 24. SPS Chennai 2019 24
  25. 25. SPS Chennai 2019 Demo
  26. 26. Questions Thanks
  27. 27. SPS Chennai 2019 References  started/using-web-part-as-ms-teams-tab 
  28. 28. Thank you #SPSChennai