Apr 06, 2021 Teams architecture Teams is built on Microsoft 365 groups, Microsoft Graph, and the same enterprise-level security, compliance, and manageability as the rest of Microsoft 365 and Office 365. Teams leverages identities stored in Azure Active Directory (Azure AD). Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and remote co-workers to work together in real and near-real time. It is fully integrated with Office 365 as well as native Microsoft Office applications. For Teams web app, the browser is unsupported on Teams meetings. Such as Explorer 11, Firefox, etc. If you use supported browsers, then you would experience some limitations. If you'd like to know more information, you can refer to the article about Microsoft Teams meetings on unsupported browsers.
-->Here is the official statement of the support (so its no issue): - Hello Stefan, I discussed this issue with the internal team and they informed that the app should log the user out after some period of inactivity, not several minutes, I tested it on my test site and I can confirm that I am able to use MS teams after 30 min inactivity, it. WOW, my first post on Microsoft Teams. I have been using and training participants in Microsoft Teams for approx 12 months now and must say I'm a big fan. There is SO much amazing content online to assist with using Microsoft Teams and so to date, I have not worried about including Teams on this website. But I think the time has come.
Microsoft Teams apps bring key information, common tools, and trusted processes to where people increasingly gather, learn, and work.
Apps are how you extend Teams to fit your needs. Create something brand new for Teams or integrate an existing app.
What are Teams apps?
Teams apps are a combination of capabilities and entry points. For example, people can chat with your app's bot (capability) in a channel (entry point).
Some apps are simple (send notifications), while others are complex (manage patient records). When planning your app, remember that Teams is a collaboration hub. The best Teams apps help people express themselves and work better together.
Tabs
Get information more conveniently: Sometimes you just need to make things easier to find. Display an important webpage in a tab, which provides a full-screen web experience for static and dynamic content in Teams.
Bots
Turn words into actions: Conversations often result in the need to do something (generate an order, review my code, check ticket status, etc.). A bot can kick off these kinds of workflows right inside Teams.
Messaging extensions
Make it easier to multitask: With messaging extensions, you can quickly share external information in a conversation. You also can act on a message, such as creating a help ticket based on the content of a channel post.
Webhooks
Communicate with external apps: Incoming webhooks are a simple way to automatically send notifications from another app to a Teams channel. With outgoing webhooks, message your web service with an @mention.
Microsoft Graph for Teams
Utilize Teams data: The Microsoft Graph API for Teams provides access to information about teams, channels, users, and messages that can help you create or enhance features for your app.
Start building
Quickly familiarize yourself with building for Teams by setting up your environment and creating a simple app.
Integrate with Teams
Blend the features users love about an existing web app, service, or system with the collaborative features of Teams.
A little code goes a long way
You don't need to be an expert programmer to build a great Teams app. Try one of several low-code solutions.
Get ideas for your app
Looking for app development inspiration? Browse our list of real-world scenarios and industry solutions with high fidelity concept mocks to understand the various ways Teams apps can help your users.
See also
- Bot Framework SDK for JavaScript and .NET
Note
- Only the desktop versions of Edge and Chrome are supported.
- Use of Freemium or guest accounts is not supported.
Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages which will launch the Share to Teams experience in a popup window when clicked. This will allow you to share a link directly to any person or Microsoft Teams channel without switching context.
How to embed a Share to Teams button
First, you'll need to add the launcher.js script on your webpage.
Next, add an HTML element on your webpage with the teams-share-button class attribute and the link to share in the data-href attribute.
This will add the Microsoft Teams icon to your website.
Optionally, if you want a different icon size for the Share to Teams button, use the data-icon-px-size attribute.
If you know that the URL preview from your link to be shared won't render well in Teams (for example the link would require user authentication) you can disable the URL preview by adding the data-preview attribute set to false.
If your page dynamically renders content, you can use the the shareToMicrosoftTeams.renderButtons() method to force the Share button to render at the appropriate place in the pipeline.
Crafting your website preview
When your website is shared to Teams, the card that is inserted into the selected channel will contain a preview of your website. You can control the behavior of this preview by ensuring the appropriate meta-data is added to the website being shared (the data-href URL). The table below outlines the necessary tags. You can use either the html default versions, or the Open Graph version.
In order for the preview to be displayed you must:
- Include either a Thumbnail image, or both a Title and Description (for best results, include all three).
- The URL being shared cannot require authentication. If it does you can still share it, but the preview will not be created.
| Value | Meta tag | Open Graph |
|---|---|---|
| Title | | |
| Description | | |
| Thumbnail Image | none | |
Share to Teams for Education
For teachers using the Share to Teams button you'll be given an additional option to Create an Assignment. This enables you to quickly create an assignment in the chosen Team based on the shared link.
Full launcher.js definition
Ms Teams Online Website
| Property | HTML attribute | Type | Default | Description |
|---|---|---|---|---|
| href | data-href | string | n/a | The href of the content to share. |
| preview | data-preview | boolean (as a string) | true | Whether or not to show a preview of the content to share. |
| iconPxSize | data-icon-px-size | number (as a string) | 32 | The size in pixels of the Share-to-Teams button to render. |
| msgText | data-msg-text | string | n/a | Default Text to be inserted before the link in the message compose box (200 character limit) |
| assignInstr | data-assign-instr | string | n/a | Default Text to be inserted in the assignments 'Instructions' field (200 character limit) |
| assignTitle | data-assign-title | string | n/a | Default Text to be inserted in the assignments 'Title' field (50 character limit) |
Methods
shareToMicrosoftTeams.renderButtons(options)
options (optional): { elements?: HTMLElement[] }
Renders all share buttons currently on the page. If an optional options object is supplied with a list of elements, those elements will be rendered into share buttons.
| Value | Meta tag | Open Graph |
|---|---|---|
| Title | | |
| Description | | |
| Thumbnail Image | none | |
Share to Teams for Education
For teachers using the Share to Teams button you'll be given an additional option to Create an Assignment. This enables you to quickly create an assignment in the chosen Team based on the shared link.
Full launcher.js definition
Ms Teams Online Website
| Property | HTML attribute | Type | Default | Description |
|---|---|---|---|---|
| href | data-href | string | n/a | The href of the content to share. |
| preview | data-preview | boolean (as a string) | true | Whether or not to show a preview of the content to share. |
| iconPxSize | data-icon-px-size | number (as a string) | 32 | The size in pixels of the Share-to-Teams button to render. |
| msgText | data-msg-text | string | n/a | Default Text to be inserted before the link in the message compose box (200 character limit) |
| assignInstr | data-assign-instr | string | n/a | Default Text to be inserted in the assignments 'Instructions' field (200 character limit) |
| assignTitle | data-assign-title | string | n/a | Default Text to be inserted in the assignments 'Title' field (50 character limit) |
Methods
shareToMicrosoftTeams.renderButtons(options)
options (optional): { elements?: HTMLElement[] }
Renders all share buttons currently on the page. If an optional options object is supplied with a list of elements, those elements will be rendered into share buttons.
Ms Teams Website Http
Setting default form values
Optionally, you can choose to set default values for the following fields on the Share to Teams form:
- Say something about this (
msgText) - Assignment Instructions (
assignInstr) - Assignment Title (
assignTitle)
Ms Teams Website Einbinden
Example: Default form values
