Extending Teams & Groups
1 like257 views
This document summarizes a presentation about extending teams and groups in Microsoft Teams. The presentation covers developing tabs, connectors, bots and compose extensions for Teams. It discusses the development process which includes defining the app manifest, implementing code, testing by packaging and sideloading, and distributing by uploading and enabling in Teams. The presentation demonstrates creating connectors that post to webhooks and use the Outlook connector API. It also demonstrates creating tabs and bots in Teams using the Yo Teams generator. The presentation concludes by discussing opportunities for developer and providing feedback to Microsoft.
![SharePoint Saturday Belgium 2017 • October 21 • Brussels
Architecture
{
"$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json",
"manifestVersion": "1.0",
"id": "99ec2ead-3c37-6ae2-e4bb-bd3955a4ffab",
"version": "0.0.1",
"developer": {
"name": "Albert-Jan Schot",
"websiteUrl": "https://spsbe2017.azurewebsites.net",
},
"tabs": [],
"bots": [],
"connectors": [],
"validDomains": ["spsbe2017.azurewebsites.net"],
"name": { "short": "Sample App", "full": "Sample App" }, "accentColor": "#FFFFFF", "needsIdentity": "true"
}](https://image.slidesharecdn.com/albertjanschot-171026075101/85/Extending-Teams-Groups-10-320.jpg)
![SharePoint Saturday Belgium 2017 • October 21 • Brussels
Custom Connectors
1. Post some JSON to a endpoint
https://outlook.office.com/webhook/abbce809-e8a9-465e-b5e3-
fe49204e0e64@2ca3eaa5-140f-4175-9563-
1172edf9f339/IncomingWebhook/2ff9cc6a4c32458f8303850c2a78da5
f/88e85b64-e687-4e0b-bbf4-f42f5f8e674g
{
"text": " Make sure to present!",
"title": "Awesome Demo!",
"themeColor": "5500B3",
"potentialAction": [
{
"@context": "http://schema.org",
"@type": "ViewAction",
"name": "View on SPSBE",
"target": ["http://www.spsevents.org/city/Brussels/Brussels2017"]
}
]
}](https://image.slidesharecdn.com/albertjanschot-171026075101/85/Extending-Teams-Groups-14-320.jpg)
![SharePoint Saturday Belgium 2016 • October 15 • Brussels
Manifest
{
"$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json",
"manifestVersion": "1.0",
"id": "99ec2ead-3c37-6ae2-e4bb-bd3955a4ffab",
"version": "0.0.1",
"developer": {
"name": "Albert-Jan Schot",
"websiteUrl": "https://mavention.nl",
},
"connectors": [ { "connectorId": " a3c4ef20-68aa-42e1-b037-f75624dacf21", "scopes": [ "team" ] } ],
"name": { "short": "Sample App", "full": "Sample App" }, "accentColor": "#FFFFFF", "needsIdentity": "true"
}](https://image.slidesharecdn.com/albertjanschot-171026075101/85/Extending-Teams-Groups-18-320.jpg)
Extending Teams & Groups
- 1. SharePoint Saturday Belgium 2017 • October 21 • Brussels Track: Developer | Level: 300 Extending teams & groups Albert-Jan Schot - @appieschot
- 3. Office 365 Groups Outer LoopInner Loop Files Sites Content SharePoint
- 4. Office 365 Groups Cross application group membership Outer LoopInner Loop Files Sites Content SharePoint
- 5. SharePoint Saturday Belgium 2017 • October 21 • Brussels Extending groups and teams
- 6. SharePoint Saturday Belgium 2017 • October 21 • Brussels Before you start
- 7. SharePoint Saturday Belgium 2017 • October 21 • Brussels 1 2 4 3
- 8. SharePoint Saturday Belgium 2017 • October 21 • Brussels
- 9. SharePoint Saturday Belgium 2017 • October 21 • Brussels Packaging Microsoft Teams App manifest.json Icon-20x20.png Icon-96x96.png Microsoft Azure Web App Express web server (node.js) /index.html /tou.html /privacy.html /igniteTab.html /igniteConfig.html /igniteRemove.html /aboutIgniteBot.html /igniteAlertsConnector.html /api/messages /api/connector/connect /api/connector/ping /api/sessions
- 10. SharePoint Saturday Belgium 2017 • October 21 • Brussels Architecture { "$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json", "manifestVersion": "1.0", "id": "99ec2ead-3c37-6ae2-e4bb-bd3955a4ffab", "version": "0.0.1", "developer": { "name": "Albert-Jan Schot", "websiteUrl": "https://spsbe2017.azurewebsites.net", }, "tabs": [], "bots": [], "connectors": [], "validDomains": ["spsbe2017.azurewebsites.net"], "name": { "short": "Sample App", "full": "Sample App" }, "accentColor": "#FFFFFF", "needsIdentity": "true" }
- 11. SharePoint Saturday Belgium 2017 • October 21 • Brussels Development process Define • Create manifest Implement • Code Test • Package & sideload Distribute • Upload & enable
- 12. SharePoint Saturday Belgium 2017 • October 21 • Brussels Connectors
- 13. SharePoint Saturday Belgium 2017 • October 21 • Brussels Connectors
- 14. SharePoint Saturday Belgium 2017 • October 21 • Brussels Custom Connectors 1. Post some JSON to a endpoint https://outlook.office.com/webhook/abbce809-e8a9-465e-b5e3- fe49204e0e64@2ca3eaa5-140f-4175-9563- 1172edf9f339/IncomingWebhook/2ff9cc6a4c32458f8303850c2a78da5 f/88e85b64-e687-4e0b-bbf4-f42f5f8e674g { "text": " Make sure to present!", "title": "Awesome Demo!", "themeColor": "5500B3", "potentialAction": [ { "@context": "http://schema.org", "@type": "ViewAction", "name": "View on SPSBE", "target": ["http://www.spsevents.org/city/Brussels/Brussels2017"] } ] }
- 15. SharePoint Saturday Belgium 2017 • October 21 • Brussels Connectors with Flow Webhook Flow
- 16. SharePoint Saturday Belgium 2017 • October 21 • Brussels Connectors – Demo
- 17. SharePoint Saturday Belgium 2016 • October 15 • Brussels Connect Button https://docs.microsoft.com/en-us/outlook/actionable-messages/connectors- dev-dashboard <a href="https://outlook.office.com/connectors/Connect?state=myAppsState&app _id=a3c4ef20-68aa-42e1-b037- f75624dacf21&callback_url=http://localhost:3000/callback"> <img src="https://o365connectors.blob.core.windows.net/images/ConnectToO365Button.p ng" alt="Connect to Office 365"></img> </a>
- 18. SharePoint Saturday Belgium 2016 • October 15 • Brussels Manifest { "$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json", "manifestVersion": "1.0", "id": "99ec2ead-3c37-6ae2-e4bb-bd3955a4ffab", "version": "0.0.1", "developer": { "name": "Albert-Jan Schot", "websiteUrl": "https://mavention.nl", }, "connectors": [ { "connectorId": " a3c4ef20-68aa-42e1-b037-f75624dacf21", "scopes": [ "team" ] } ], "name": { "short": "Sample App", "full": "Sample App" }, "accentColor": "#FFFFFF", "needsIdentity": "true" }
- 19. SharePoint Saturday Belgium 2017 • October 21 • Brussels Yo Teams Node with NPm https://nodejs.org/en/ https://github.com/OfficeDev/generator-teams 1. npm install yo -global 2. npm install generator-teams –global 3. npm install generator-teams@preview -global 4. npm install webpack -global 5. yo teams 6. npm install 7. gulp build
- 20. SharePoint Saturday Belgium 2017 • October 21 • Brussels Yo Teams – Demo
- 21. SharePoint Saturday Belgium 2017 • October 21 • Brussels Tabs – Demo
- 22. SharePoint Saturday Belgium 2017 • October 21 • Brussels Bots
- 23. SharePoint Saturday Belgium 2017 • October 21 • Brussels Compose extensions
- 24. SharePoint Saturday Belgium 2017 • October 21 • Brussels Compose extensions
- 25. SharePoint Saturday Belgium 2017 • October 21 • Brussels Compose extensions
- 26. SharePoint Saturday Belgium 2017 • October 21 • Brussels MSGraph – Demo
- 27. SharePoint Saturday Belgium 2017 • October 21 • Brussels But… “What if I have developed an app and I do not want it to be available for everyone?” You can: 1. Enable all apps except for a disallowed set 2. Disable all apps except for an allowed set
- 28. SharePoint Saturday Belgium 2017 • October 21 • Brussels What’s next? 1. Developer opportunities https://developer.microsoft.com/microsoft-teams & http://graph.microsoft.io 2. Download Teams Generator at https://github.com/OfficeDev/generator-teams 3. Start coding 4. Provide feedback: https://microsoftteams.uservoice.com/
- 29. SharePoint Saturday Belgium 2017 • October 21 • Brussels Thank You!