1 / 23

Build end-to-end solutions using SharePoint Framework in Microsoft Teams

Learn how to develop comprehensive solutions using SharePoint Framework within Microsoft Teams. This educational series by Bob German, Partner Technical Architect, covers architecture review, integrating Graph API, posting to web services, and more.

phelps
Download Presentation

Build end-to-end solutions using SharePoint Framework in Microsoft Teams

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Build end-to-end solutions usingSharePoint Framework inMicrosoft Teams Microsoft Teams Development Education Series Bob German Partner Technical Architect One Commercial Partner Program, Microsoft

  2. Agenda Architecture review Teams Client SDK Graph API,SharePoint API,Custom web services Posting and deep linking Resources and Community

  3. App runs on your web serveranywhere you want withany application stack Apps for Microsoft Teams Tabs (Team and Personal) Bots Connectors Messaging extensions Task Modules Activity feed integrations Outgoing web hooks .zip manifest.json App Packagedefines the app Uploadto Teams orPublish on App Source https://bit.ly/Apps4Teams

  4. Apps for Microsoft Teams • Teams App (.zip) • Contains Teams manifest and icons • Upload to Teams or Store Tabs (Team and Personal) Any web server SharePoint Framework • SPFx Solution (.sppkg) • Contains SPFx manifest and optional JavaScript bundle(s) • Upload to SharePoint App Catalog, site, or Store Web Part YOUR WEB PAGE HERE JS Bundle(s) TeamsHostedApp.aspx Modern Team Site(part of O365 Group) Best when you have an existing web experience and hosting Best when you need a new web experience and hosting – esp. enterprise

  5. Sample Web Part in Teams and SharePoint demo

  6. Top 10 reasons SPFx in Teams rocks 10 No need to host a web site or page Reuse code in Teams and SharePoint Azure AD single sign-on built in

  7. Microsoft Teams Teams Client SDK TeamsHostedApp.aspx(IFrame) SharePoint Framework handlesauthentication SDK is still useful to: • Get context (channel, entityId*, subEntityId*, groupId, isFullScreen, locale, teamId, teamName, more • Get deep link parameters (subEntityId, subEntityLabel, subEntityWebUrl) • Get tab instances owned by the app • Handle messages JS Connectors JS Lib https://sharepoint.microsoft.com/ … https://teams.microsoft.com/ ... * Used by a Teams app to maintain its state SharePoint uses the entity ID for the web part stateYou can use the subEntity ID for within your web part

  8. Code walk-through Accessing the Teams Client SDKin an SPFx web part code

  9. Top 10 reasons SPFx in Teams rocks 10 No need to host a web site or page Reuse code in Teams and SharePoint Azure AD single sign-on built in SharePoint handles the configuration page You know what Team and Channel you’re in with the Teams SDK

  10. Office 365 Groups Microsoft Graph API Office 365 Groups Every Team has an Office 365 Group • A great place to store your application’s data: • Easy to find because it’s part of the group • Access from Graph API • Group members generally will have permission • Backed up and managed by O365 • Native app UI use saves coding • Many of these apps support information protection and compliance features

  11. Authentication Challenges

  12. Code walk-through External web service Accessing the SharePoint native API Accessing the Graph API Accessing other Azure AD web services code

  13. Top 10 reasons SPFx in Teams rocks 10 No need to host a web site or page Reuse code in Teams and SharePoint Azure AD single sign-on built in SharePoint handles the configuration page You know what Team and Channel you’re in with the Teams SDK Easy access to Microsoft Graph, SharePoint APIs Store data in the Office 365 group Manage apps centrally in SharePoint Admin Center

  14. Connecting with the Conversation • Add to the conversation via • Graph API • Bots • Connectors • Maintain context using deep links

  15. Code walk-through Posting via the Graph API Constructing a deep link code

  16. Top 10 reasons SPFx in Teams rocks 10 No need to host a web site or page Reuse code in Teams and SharePoint Azure AD single sign-on built in SharePoint handles the configuration page You know what Team and Channel you’re in with the Teams SDK Easy access to Microsoft Graph, SharePoint APIs Store data in the Office 365 group Manage apps centrally in SharePoint Admin Center Deep linking allows passing context

  17. Top 10 reasons SPFx in Teams rocks 10 No need to host a web site or page Reuse code in Teams and SharePoint Azure AD single sign-on built in SharePoint handles the configuration page You know what Team and Channel you’re in with the Teams SDK Easy access to Microsoft Graph, SharePoint APIs Store data in the Office 365 group Manage apps centrally in SharePoint Admin Center Deep linking allows passing context SharePoint Community

  18. Tooling Up Tutorials

  19. Get startedStart using Microsoft Teamstoday Get technical with Microsoft Teams Development Education series Play with hands-on-labs Join the Teamwork Solution Accelerator for Partners Access resources & supportGet Teams deployment & adoption support from FastTrack https://aka.ms/SuccessWithTeams Resources Next steps Teams Dev center: https://aka.ms/TeamsDeveloper Developer support: https://aka.ms/TeamsDevSupport Teams Dev docs: https://aka.ms/TeamsDevDocs

More Related