1. Office 365 Groups provide a unified identity for collaboration across Office 365 applications like SharePoint, Exchange, and Teams. 2. When a new group is created in any Office 365 application, related group experiences are automatically populated in other connected applications using the shared Azure Active Directory identity. 3. Developers can extend Office 365 Groups and Teams capabilities by building apps, tabs, bots, connectors and other extensions that integrate with the Teams platform.

2. Groups, Teams & Planner for Developers
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. Office 365 Groups– The Microsoft definition
User creates new
group for collaboration
Office 365 Application
Group experience
populated in app of choice
Office 365 Application
One Identity
Azure Active Directory (AAD) is the
master for group identity and membership
across Office 365 (Exchange, SharePoint,
etc.)
Federated Resources
O365 services extend with their
data (e.g. Group messaging,
SharePoint TeamSite, OneNote,
Planner)
Loose coupling
Services notify each other of
changes to a group (e.g., creation,
deletion, updates).
Group identity
created
Azure Active Directory
Identity, Resource
URLs, Owners,
Members

6. Self service ‘group’ creation
“Team”
“Group”
“Group”
Connected

7. Extending groups and teams
TABS COMPOSE
EXTENSIONS
CONNECTORS BOTS GRAPH

8. 1
2
4
3

10. Team App Package
1. Package
2. Your solution
(Azure App Service)
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

11. {
"$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" }
Package.json

12. Connectors

14. Custom Connectors
1. Post some JSON to an endpoint
https://outlook.office.com/webhook/abbce809-e8a9-465e-b5e3-
fe49204e0e64@2ca3eaa5-140f-4175-9563-
1172edf9f339/IncomingWebhook/2ff9cc6a4c32458f8303850c2a78da5f/88e85b64-
e687-4e0b-bbf4-f42f5f8e674g
{
"text": " Some Awesome Demo!!",
"title": "Make sure to present...",
"themeColor": "5500B3",
"potentialAction": [
{
"@context": "http://schema.org", "@type": "ViewAction",
"name": "View on SharePoint Unite", "target": ["https://sharepointunite.com/sessions/"]
} ]
}

15. Connectors with Flow
Webhook Flow

16. Demo - Connectors

17. https://docs.microsoft.com/en-us/outlook/actionable-messages/connectors-dev-
dashboard
<a
href="https://outlook.office.com/connectors/Connect?state=myA
ppsState&app_id=a3c4ef20-68aa-42e1-b037-
f75624dacf21&callback_url=http://localhost:3000/callback">
<img
src="https://o365connectors.blob.core.windows.net/images/ConnectTo
O365Button.png" alt="Connect to Office 365"></img>
</a>
Connect Button

18. {
"$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"
}
Manifest

19. 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@preview -global
3. npm install webpack -global
4. yo teams ..
5. npm install
6. gulp build

20. Demo - Yo! Teams

21. Demo - Tabs

22. Demo - Bots

23. Compose Extensions

24. Compose extensions

25. Compose extensions

26. Demo - MSGraph

27. “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. 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/