Extending Microsoft Teams for Higher Performing Teams

Explore the process of extending Microsoft Teams to enhance team collaboration and productivity. Learn how to prepare the development environment, utilize tabs, work with connectors, develop bots, and more, to create a chat-based workspace within Office 365. Understand the differences between Teams and SharePoint sites, and discover the required steps to get started, such as getting an Office 365 account and enabling apps for Microsoft Teams.

• Microsoft Teams
• Collaboration
• Office 365
• Development Environment
• Team Communication

jdreg Follow

Uploaded on Sep 12, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

2. Extending Microsoft Teams Scot Hillier scot@scothillier.net

3. Agenda Overview Preparing the development environment Utilizing Tabs Working with Connectors Developing Bots Coming Soon

4. Overview

5. Office 365 Groups Azure AD Office 365 Groups Apps Dynamics OneDrive OneNote Calendar Yammer Outlook Planner Teams Skype Delve

6. Chat-based workspace in Office 365 Extensible platform Build apps with a rich set of capabilities to enable these higher-performing teams

7. Microsoft Teams v SharePoint Sites Teams are less structured, less governed than sites Teams are more urgent than sites Teams are more targeted than sites Team communication is task-focused and informal

8. Preparing the development environment

9. Required steps Get an Office 365 account Turn on Microsoft Teams Enable apps for Microsoft Teams Install Visual Studio 2017/Code Install App Studio

10. Get an Office 365 account Use an existing tenancy Business Essentials Business Premium Enterprise E1, E3, and E5 Developer Education, Education Plus, and Education E5 Join the Office 365 Developer Program https://developer.microsoft.com/en-us/office/dev-program

11. Turn on Microsoft Teams Office 365 Administration Settings >> Services & add-ins >>Microsoft Teams Install Microsoft Teams app https://teams.microsoft.com/downloads

12. Enable apps for Microsoft Teams Enable apps Enable sideloading

13. Install Visual Studio 2017/Code Install ASP .NET web application components Install the Bot Templates http://aka.ms/bf-bc-vstemplate http://aka.ms/bf-bc-vscontrollertemplate http://aka.ms/bf-bc-vsdialogtemplate Install Bot Builder npm install g yo npm install g generator-botbuilder

14. Install App Studio App Studio is a Teams app Locate and install App Studio from the Teams store

15. DEMO A quick tour of the development environment

16. Utilizing Tabs

17. Understanding Tabs Tabs are a blank palette for displaying web content Channels support configurable Tabs A configuration page presents options for the content to display A content page is the hosted web content for the tab Chats support static Tabs A tab is declared with a unique identity A content page is associated with the declared tab Manifest defines endpoints, etc

18. Tab restrictions Pages must be on an HTTPS endpoint Pages must be viewable in an IFRAME Initialize communication with Teams when loaded Login must work within Teams framework Cross-domain calls must work within Teams framework Style the app to work well with Team themes

19. IFRAME support Content-Security-Policy header frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com IE 11 support X-Content-Security-Policy

20. Initialize communication Reference the SDK <script src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js" /> Initialize communication microsoftTeams.initialize()

21. Logging in Initialize SDK microsoftTeams.initialize(); window.authConfig = { tenant: '<tenant>.onmicrosoft.com', clientId: '<appId>', redirectUri: 'https://', postLogoutRedirectUri: 'https://', endpoints: { graph: 'https://graph.microsoft.com }, displayCall: authenticate, cacheLocation: 'localStorage' }; Authentication Function window.authContext = new AuthenticationContext(window.authConfig); Pop-up Login function authenticate(url) { microsoftTeams.authentication.authenticate({ url: url, width: 500, height: 700, successCallback: authenticateSucceeded, failureCallback: authenticateFailed }); }

22. Manifest Schema Key id packageName name description configurationUrl contentUrl permissions validDomains Description The unique Microsoft-generated identifier for this app A unique identifier for this app The name of the app A description of the app Page used to configure configurable tabs Page The permission requests for the app Domains from which the app will load content

23. DEMO T abs

24. Working with Connectors

25. Understanding Connectors A Connector is a Webhook Connectors can be outgoing or incoming Teams can use existing Office 365 Connectors Teams can have their own Connectors

26. Incoming webhooks Utilize existing webhooks Create your own incoming web hook

27. Calling an incoming webhook curl -H "Content-Type: application/json" -d "{\"text\": \"Hello, webhook!\"}" --insecure https://outlook.office.com/webhook/.../ IncomingWebhook/.../ efd4ec57-be1d-4d4b-a8e5-359c65bf2085

28. Actionable Messages Webhook messages are simple JSON objects Messages can define UI elements for input Buttons, Text, Date, Choice Messages can contain buttons for actions Open a page, POST data, Ask for more input, Invoke an Outlook add-in

29. Outgoing webhooks Specify an endpoint to receive messages Add an outgoing webhook to a channel Messages are sent when the webhook is @ mentioned

30. DEMO Connectors

31. Developing Bots

32. Understanding bots Bots are apps that interact in conversational ways A special type of web application Azure Bot Service provides the framework Create and monitor All Azure bots can work with Teams Requires an app package with a manifest and images Create bot applications with favorite tools Azure, Visual Studio 2017, Visual Studio Code

33. Create a bot in Azure

34. Create a bot in Visual Studio

35. Create a bot in Visual Studio Code npm install g generator-botbuilder

36. Add the Teams channel

37. Create a manifest

38. Add bot to Teams

39. Programming the bot

40. DEMO Bots

41. Coming Soon SPFX web parts as Tabs in Microsoft Teams Support for Adaptive Cards Teams API support in Microsoft Graph Lots of improvements!

42. Summary Overview Preparing the development environment Utilizing Tabs Working with Connectors Developing Bots Coming Soon