Updates from: 08/03/2021 03:10:03
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
The following code provides an example of meeting start event payload:
"value": { "MeetingType": "Scheduled", "Title": "Meeting Start/End Event",
- "Id":"meeting id",
+ "Id": "meeting id",
"JoinUrl": "url" "StartTime": "2021-04-29T16:17:17.4388966Z" },
The following code provides an example of meeting end event payload:
Your bot receives the event through the `OnEventActivityAsync` handler.
-To deserialize the json payload, a model object is introduced to get the metadata of a meeting. The metadata of a meeting resides in the `value` property in the event payload. The `MeetingStartEndEventvalue` model object is created, whose member variables correspond to the keys under the `value` property in the event payload.
+To deserialize the json payload, a model object is introduced to get the metadata of a meeting. The metadata of a meeting resides in the `value` property in the event payload. The `MeetingStartEndEventvalue` model object is created, whose member variables correspond to the keys under the `value` property in the event payload.
+
+> [!NOTE]
+> * Get meeting ID from `turnContext.ChannelData`.
+> * Do not use conversation ID as meeting ID.
+> * Do not use meeting ID from meeting events payload `turncontext.activity.value`.
+
The following code shows how to capture the metadata of a meeting that is `MeetingType`, `Title`, `Id`, `JoinUrl`, `StartTime`, and `EndTime` from a meeting start and end event:
platform Enable And Configure Your App For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md
In a meeting chat, enter the **@** key and select **Get bots**.
During a meeting, you can use the meetingSidePanel or the in-meeting dialog box to build unique experiences for your apps.
-#### meetingSidePanel
+#### Meeting Sidepanel
With the meetingSidePanel, you can customize experiences in a meeting that enable organizers and presenters to have different set of views and actions. In your app manifest, you must add meetingSidePanel to the context array. In the meeting and in all scenarios, the app is rendered in an in-meeting tab that is 320 pixels in width. For more information, see [FrameContext interface](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true).
platform Meeting App Extensibility https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md
TeamsΓÇÖ meeting app extensibility is based on the following concepts:
-* Meeting lifecycle has different stages such as pre-meeting, in-meeting, and post-meeting.
+* A meeting lifecycle has various stages, such as pre-meeting, in-meeting, and post-meeting.
* There are three distinct participant roles in a meeting: organizer, presenter, and attendee. For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019). * There are various [user types](/microsoftteams/non-standard-users#:~:text=An%20anonymous%20user%20is%20a,their%20Microsoft%20or%20organization's%20account.) in a meeting: in-tenant, [guest](/microsoftteams/guest-access), [federated](/microsoftteams/manage-external-access), and anonymous users.
-This article covers information about meeting lifecycle and how to integrate tabs, bots, and messaging extensions in the meeting. It provides information to identify different participant roles and different user types to perform tasks.
+This article covers information about the meeting lifecycle and how to integrate tabs, bots, and messaging extensions in a meeting. It provides information to identify various participant roles and user types to perform tasks.
## Meeting lifecycle
-Meeting lifecycle consists of pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and messaging extensions in each stage of the meeting lifecycle.
+A meeting lifecycle consists of pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and messaging extensions in each stage of the meeting lifecycle.
### Integrate tabs into the meeting lifecycle
-Tabs allow team members to access services and content in a specific space within a meeting. The team works directly with tabs and has conversations about the tools and data available within tabs. In Teams meeting, users can add a tab by selecting <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>, and choosing the app that they want to install.
+Tabs allow team members to access services and content in a specific space within a meeting. The team works directly with tabs and has conversations about the tools and data available within tabs. In a Teams meeting, users can add a tab by selecting <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>, and choosing the app that they want to install.
> [!IMPORTANT] > If you have integrated a tab with your meeting, then your app must follow the Teams [single sign-on (SSO) authentication flow for tabs](../tabs/how-to/authentication/auth-aad-sso.md). > [!NOTE]
-> Apps are supported in private scheduled meetings only.
+> Apps are supported only in private scheduled meetings.
#### Pre-meeting app experience
With the pre-meeting app experience, you can find and add meeting apps and perfo
1. In the tab gallery, select the app that you want to add and follow the steps as required. The app is installed as a tab. > [!NOTE]
- > * You can also add a tab using the meeting **Chat** tab in an existing meeting.
- > * Tab layout must be in an organized state, if there are more than ten polls or surveys.
+ > * You can also add a tab to an existing meeting using the meeting **Chat** tab.
+ > * Tab layout must be in an organized state, if there are more than 10 polls or surveys.
# [Desktop](#tab/desktop)
After the tabs are added to an existing meeting on desktop or web, you can see t
#### In-meeting app experience
-With the in-meeting app experience, you can engage participants during the meeting by using apps and the in-meeting dialog box. Meeting apps are hosted in the top upper bar of the meeting window as an in-meeting tab. Use the in-meeting dialog box to showcase actionable content for meeting participants. For more information, see [create apps for Teams meetings](create-apps-for-teams-meetings.md).
+With the in-meeting app experience, you can engage participants during the meeting by using apps and the in-meeting dialog box. Meeting apps are hosted on the toolbar of the meeting window as an in-meeting tab. Use the in-meeting dialog box to showcase actionable content for meeting participants. For more information, see [create apps for Teams meetings](create-apps-for-teams-meetings.md).
For mobile, meeting apps are available from **Apps** > ellipses &#x25CF;&#x25CF;&#x25CF; in the meeting. Select **Apps** to view all the apps available in the meeting. **To use tabs during a meeting** 1. Go to Teams.
-1. In your calendar, select a meeting where you want to use a tab.
-1. After entering the meeting, from the top upper bar of the chat window, select the required app.
+1. In your calendar, select a meeting in which you want to use a tab.
+1. After entering the meeting, from the toolbar of the chat window, select the required app.
An app is visible in a Teams meeting in the side panel or the in-meeting dialog box. 1. In the in-meeting dialog box, enter your response as a feedback.
The in-meeting dialog box is displayed where you can enter your response as a fe
> [!NOTE] > * Apps can leverage the Teams Client SDK to access the `meetingId`, `userMri`, and `frameContext` to render the experience appropriately. > * If the in-meeting dialog box is rendered successfully, you will get a notification that the results are successfully downloaded.
-> * Your app manifest specifies the places that you want them to appear. The context field is used for this purpose. It is also the part of a share-tray experience, subject to specified design guidelines.
+> * Your app manifest specifies the places in which you want the apps to appear. The context field is used for this purpose. It is also the part of a share-tray experience, subject to specified design guidelines.
The following image illustrates the in-meeting side panel:
The following table describes the behavior of app when it is approved and not ap
#### Post-meeting app experience
-With post-meeting app experience, you can view the results of the meeting, such as poll survey results or feedback. Select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/> to add a tab, get meeting notes, and results on which organizers and attendees must take action.
+With post-meeting app experience, you can view the results of the meeting, such as poll survey results or feedback. Select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/> to add a tab, get meeting notes, and see the results on which organizers and attendees must take action.
The following image displays the **Contoso** tab with results of poll and feedback received from meeting attendees:
After you design your app based on participant roles in a meeting, you can ident
User types, such as, organizer, presenter, or attendee in a meeting can perform one of the [participant roles in a meeting](#participant-roles-in-a-meeting).
-The following list details the different user types along with their accessibility and performance:
+The following list details the various user types along with their accessibility and performance:
* **In-tenant**: In-tenant users belong to the organization and have credentials in Azure Active Directory (AAD) for the tenant. They are usually full-time, onsite, or remote employees. An in-tenant user can be an organizer, presenter, or attendee. * **Guest**: A guest is a participant from another organization invited to access Teams or other resources in the organization's tenant. Guests are added to the organizationΓÇÖs AAD and have same Teams capabilities as a native team member with access to team chats, meetings, and files. A guest user can be an organizer, presenter, or attendee. For more information, see [guest access in Teams](/microsoftteams/guest-access).
The following table provides the user types and what features each user can acce
## Next step > [!div class="nextstepaction"]
-> [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
+> [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
platform Authentication https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/authentication/authentication.md
provides Bot authentication v3 SDK sample.
| **Sample name** | **Description** | **.NET** | **Node.js** | **Python** | ||||-|| | Bot authentication | This sample shows how to get started with authentication in a bot for Microsoft Teams. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/46.teams-auth) |
-| Tab, Bot and Messaging Extension (ME) SSO | This sample shows SSO for Tab, Bot and ME - search, action, linkunfurl. | Not available | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | Not available |
+| Tab, Bot and Messaging Extension (ME) SSO | This sample shows SSO for Tab, Bot and ME - search, action, linkunfurl. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | Not available |
## Configure the identity provider
platform Device Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/device-capabilities-overview.md
After getting access to device capabilities, use Teams media capability APIs to
* Share location using [location picker](location-capability.md). Also, you can integrate the Teams native [people picker control](people-picker-capability.md) that allows users to search and select people in the web app experience.+
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
Device permissions are stored for every login session. It means that if you sign
> [!NOTE] > When you consent to the native device permissions, it is valid only for your _current_ login session.
+## Code sample
+
+| **Sample Name** | **Description** | **Node.js** |
+||--|--|
+|Device permissions | Use Microsoft Teams tab sample app to demonstrate device permissions | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-device-permissions/nodejs) |
+ ## Next steps > [!div class="nextstepaction"]
platform Feedback https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/feedback.md
Microsoft Teams community of developers use Stack Overflow to connect with other
| **Bot and Messaging Extension SDK issues or suggestions** | Submit issues and feature requests to the SDK repository for your bot's language ([C#](https://github.com/Microsoft/botbuilder-dotnet/), [Javascript](https://github.com/Microsoft/botbuilder-js), or [Python](https://github.com/Microsoft/botbuilder-python)). Post How-to questions at [Stack Overflow](https://stackoverflow.com/questions/tagged/botframework%20microsoft-teams) using the `botframework & microsoft-teams` tag. | | **Community chat group** | Select **SIGN IN TO START TALKING** to join the informal community chat room for [Microsoft Teams app developers](https://gitter.im/OfficeDev/MicrosoftTeamsAppDev), if you are signing in for the first time. Select **JOIN ROOM** if you are already logged in. | | **Community support** | <ul><li> [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams): Use the `botframework & microsoft-teams` tag to post the questions. You must follow the Stack Overflow guidelines, such as provide a descriptive title, a complete and concise problem statement, along with sufficient detail to reproduce your issue. Feature requests or broad questions are off-topic. If you are a new user, for more information, see Stack Overflow Help Center. </li> <li> [Microsoft Q&A](/answers/topics/office-teams-app-dev.html): Use the `office-teams-app-dev` tag to post questions. We love Stack Overflow and our extensive support is assured for customers who ask questions there. However, Stack Overflow has specific criteria about questions that are appropriate for the community and [Microsoft Q&A](/answers/topics/office-teams-app-dev.html) has an open policy regarding this. </li> </ul> |
+| **Teams Toolkit or TeamsFx SDK and CLI issues** | <ul><li> [Github Issues](https://github.com/OfficeDev/TeamsFx/issues) Create new issues on the [TeamsFx (Microsoft Teams Framework) GitHub repository](https://github.com/OfficeDev/TeamsFx) to report issues or raise feature request. We recommend to use Github Issues for queries and to receive support. <li> [Stack Overflow](https://stackoverflow.com/questions/tagged/teams-toolkit): Use the `teams-toolkit` tag to post questions. You can follow the Stack Overflow guidelines, such as provide a descriptive title, a complete and concise problem statement, along with sufficient detail to reproduce your issue. Feature requests or broad questions are off-topic. </li> </ul> |
| **Documentation issues** | Select `This page` in the **Submit and view feedback** section available at the footer of the documentation, to open an [issue](https://github.com/MicrosoftDocs/msteams-docs/issues) on the Microsoft Teams documentation GitHub repository. | | **Documentation updates** | Select **Edit** in the article you want to update, and submit a pull request to the [Microsoft Teams documentation GitHub](https://github.com/MicrosoftDocs/msteams-docs) repository. | | **Features suggestions** | Post feature suggestions on [Microsoft Teams feedback portal on UserVoice](https://microsoftteams.uservoice.com/forums/555103-public-preview/category/182881-developer-platform). |
platform Graph Proactive Bots And Messages https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md
You can retrieve the `teamsAppId` in the following ways:
**HTTP GET** request: ```http
- GET https://graph.microsoft.com/v1.0/appCatalogs/teamsApps?$filter=externalId eq '{IdFromManifest}'
+ GET https://graph.microsoft.com/v1.0/appCatalogs/teamsApps?$filter=externalId eq '{IdFromManifest}'
``` The request must return a `teamsApp` object `id`, which is the app's catalog generated app ID. This is different from the ID that you provided in your Teams app manifest:
platform Link Unfurling https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/link-unfurling.md
The following card types are supported:
* [Office 365 Connector card](~/task-modules-and-cards/cards/cards-reference.md#office-365-connector-card) * [Adaptive Card](~/task-modules-and-cards/cards/cards-reference.md#adaptive-card)
+You can display a preview of an Adaptive Card or Office 365 Connector card in the result list using its preview property. The preview property is not necessary if the results are already Hero or Thumbnail cards. If you use the preview attachment, it must be either a Hero or Thumbnail card. If no preview property is specified, the preview of the card fails and nothing is displayed.
+ ### Example # [C#/.NET](#tab/dotnet)
platform Build Adaptive Card Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/build-adaptive-card-tabs.md
> * This feature is in [Public Developer Preview](~/resources/dev-preview/developer-preview-intro.md) and is supported in desktop and mobile. Support in the web browser is coming soon. > * Tabs with Adaptive Cards are currently only supported as personal apps.
-When developing a tab using the traditional method, you might run into these issues, such as HTML and CSS considerations, slow load times, iFrame constraints, and server maintenance and costs. Adaptive Card tabs is a new way to build tabs in Teams. Instead of embedding web content in an IFrame, you can render Adaptive Cards to a tab. While the front-end is rendered with Adaptive Cards, the backend is powered by a bot. The bot is responsible for accepting requests and responding appropriately with the Adaptive Card that is rendered.
+When developing a tab using the traditional method, you might run into these issues:
-You can build your tabs with ready-made user interface (UI) building blocks that look and feel native on desktop, web, and mobile. This article helps you understand the changes required to be made to the app manifest, how the invoke activity requests and sends information in tab with Adaptive Cards, and the impact on the task module workflow.
+* HTML and CSS considerations
+* Slow load times
+* iFrame constraints
+* Server maintenance and costs
-The following image depicts build tabs with Adaptive Cards in desktop and mobile:
+Adaptive Card tabs are a new way to build tabs in Teams. Instead of embedding web content in an IFrame, you can render Adaptive Cards to a tab. While the front end is rendered with Adaptive Cards, the backend is powered by a bot. The bot is responsible for accepting requests and responding appropriately with the Adaptive Card that is rendered.
+
+You can build your tabs with ready-made user interface (UI) building blocks native on desktop, web, and mobile. This article helps you understand the changes required to be made to the app manifest. The article also identifies how the invoke activity requests and sends information in tab with Adaptive Cards, and its effect on the task module workflow.
+
+The following image shows build tabs with Adaptive Cards in desktop and mobile:
:::image type="content" source="../../assets/images/tabs/adaptive-cards-rendered-in-tabs.jpg" alt-text="Example of Adaptive Card rendered in tabs." border="false":::
The following code provides examples of `tab/fetch` request and response:
### Handle submits from Adaptive Card
-After an Adaptive Card is rendered in the tab, it must be able to respond to user interactions. This response is handled by the `tab/submit` invoke request.
+After an Adaptive Card is rendered in the tab, it can respond to user interactions. This response is handled by the `tab/submit` invoke request.
When a user selects a button on the Adaptive Card tab, the `tab/submit` request is triggered to your bot with the corresponding data through the `Action.Submit` function of Adaptive Card. The Adaptive Card data is available through the data property of the `tab/submit` request. You receive either of the following responses to your request:
The following code provides examples of `tab/submit` request and response:
The task module also uses Adaptive Card to invoke `task/fetch` and `task/submit` requests and responses. For more information, see [using Task Modules in Microsoft Teams bots](../../task-modules-and-cards/task-modules/task-modules-bots.md).
-With the introduction of Adaptive Card tab, there is a change in how the bot responds to a `task/submit` request. If you are using an Adaptive Card tab, the bot responds to the `task/submit` invoke request with the standard tab **continue** response, and closes the task module. The Adaptive Card tab is updated by rendering the new list of cards provided in the tab **continue** response body.
+With the introduction of Adaptive Card tab, there's a change in how the bot responds to a `task/submit` request. If you're using an Adaptive Card tab, the bot responds to the `task/submit` invoke request with the standard tab **continue** response, and closes the task module. The Adaptive Card tab is updated by rendering the new list of cards provided in the tab **continue** response body.
### Invoke `task/fetch`
The following code provides examples of `task/submit` request and response:
## Authentication
-In the previous sections of this article, you have seen that most of the development paradigms can be extended from the task module requests and responses into tab requests and responses. When it comes to handling authentication, the workflow for Adaptive Card tab follows the authentication pattern for messaging extensions. For more information, see [add authentication](../../messaging-extensions/how-to/add-authentication.md).
+In the previous sections, you've seen that most of the development paradigms can be extended from the task module requests and responses into tab requests and responses. When it comes to handling authentication, the workflow for Adaptive Card tab follows the authentication pattern for messaging extensions. For more information, see [add authentication](../../messaging-extensions/how-to/add-authentication.md).
-`tab/fetch` requests can have either a **continue** or an **auth** response. When a `tab/fetch` request is triggered and receives a tab **auth** response, the sign-in page is shown to the user.
+`tab/fetch` requests can have either a **continue** or an **auth** response. When a `tab/fetch` request is triggered and receives a tab **auth** response, the sign in page is shown to the user.
**To get an authentication code through `tab/fetch` invoke**
In the previous sections of this article, you have seen that most of the develop
> [!NOTE] > The app logo is provided through the `icon` property defined in the app manifest. The title appearing after the logo is defined in the `title` property returned in the tab **auth** response body.
-1. Select **Sign in**. You are redirected to the authentication URL provided in the `value` property of the **auth** response body.
+1. Select **Sign in**. You're redirected to the authentication URL provided in the `value` property of the **auth** response body.
1. A pop-up window appears. This pop-up window hosts your web page using the authentication URL. 1. After you sign in, close the window. An **authentication code** is sent to the Teams client. 1. The Teams client then reissues the `tab/fetch` request to your service, which includes the authentication code provided by your hosted web page.
The following code shows a reissued request example:
} ```
+## Code sample
+
+|**Sample name** | **Description** |**.NET** | **Node.js** |
+|-|--|--|--|
+| Show Adaptive Cards in Teams tab | Microsoft Teams tab sample code, which demonstrates how to show Adaptive Cards in Teams. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/csharp)| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/nodejs) |
+ ## See also * [Adaptive Card](../../task-modules-and-cards/what-are-cards.md#adaptive-cards)
platform Content Page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/content-page.md
The following code provides an example of how your page and the Teams client com
<html> <head> ...
- <script src= 'https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js'></script>
+ <script src= 'https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js'></script>
... </head>
platform Tab Requirements https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/tab-requirements.md
Teams tabs must adhere to the following prerequisites:
* MS Teams tab does not support the ability to load intranet websites that use self-signed certificates.
+## Tools you can use to build tabs
+* [Teams Toolkit for Visual Studio Code](../../toolkit/visual-studio-code-overview.md)
+* [Teams Toolkit for Visual Studio](../../toolkit/visual-studio-overview.md)
+ ## See also * [Teams tabs](~/tabs/what-are-tabs.md)
-* [Create a channel or group tab](~/tabs/how-to/create-channel-group-tab.md)
+* [Build your first app using React](../../get-started/first-app-react.md)
+* [Build your first app using Blazor](../../get-started/first-app-blazor.md)
+* [Build your first app using SPFx](../../get-started/first-app-spfx.md)
+* [Build your first conversational bot](../../get-started/first-app-bot.md)
+* [Build your first message extension](../../get-started/first-message-extension.md)
* [Tabs on mobile](~/tabs/design/tabs-mobile.md) ## Next step
platform Tabs In Sharepoint https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/tabs-in-sharepoint.md
With the November release of Teams and SharePoint Framework v.1.7, developers ha
</div> <div class="cardText"> <h3>Teams Tabs in SharePoint</h3>
- <p>Create rich app experiences in SharePoint by bringing your Teams app into Sharepoint (this article).</p>
+ <p>Create rich app experiences in SharePoint by bringing your Teams app into SharePoint (this article).</p>
</div> </div> </div>
The sample app that is being used is a Talent Management application. It manages
* Reach SharePoint users with your existing Teams tab. * Upload your app manifest directly to your SharePoint app catalog. [Teams application packages](~/concepts/build-and-test/apps-package.md) are now supported by SharePoint. * The users configure the tab on a page just like any other SharePoint web part.
-* Your tab can access its [context](~/tabs/how-to/access-teams-context.md) sameas it can, when running inside Teams.
+* Your tab can access its [context](~/tabs/how-to/access-teams-context.md) same as it can, when running inside Teams.
**To add Teams tab to SharePoint**
The following image displays the corresponding screen:
1. You can see the SharePoint pages authoring experience. Name your page as **My Teams Tab**.
-1. Open the web part toolbox by pressing the `+` button, and select your Teams Tab, named **Contoso HR**. Web parts are sorted alphabetically. If it is a long list, you can use the search bar to find it. This creates a web part in the canvas that contains your Teams tab. The following image displays the tab view:
+1. Open the web part toolbox by selecting the `+` button, and select your Teams Tab, named **Contoso HR**. Web parts are sorted alphabetically. If it is a long list, you can use the search bar to find it. This creates a web part in the canvas that contains your Teams tab. The following image displays the tab view:
![Tab view](~/assets/images/tabs/tabs-in-sharepoint/image071.png)
-1. Press the **Publish** button after you finish editing.
+1. Select the **Publish** button after you finish editing.
1. Select **Add page to navigation** to have a quick reference to your page in the left navigation bar. The following image displays the tab in Sharepoint:
The following image displays the tab in Sharepoint:
After your page is published, you can explore [turning your Teams app into a more complete experience inside SharePoint](/sharepoint/dev/spfx/web-parts/single-part-app-pages). This converts the current page into an App Page, showing the normal SharePoint page layout with a full page experience for the Teams tab.
-The following image displays the complete experience of Teams app in Sharepoint:
+The following image displays the complete experience of Teams app in SharePoint:
![Image of Tabs in Sharepoint](~/assets/images/tabs/tabs-in-sharepoint/image085.png) ## Code sample
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/what-are-tabs.md
For channel or group tabs, you can also create an additional configuration page.
You can have multiple channels or group tabs, and up to 16 personal tabs per app.
+### Tools you can use to build tabs
+* [Teams Toolkit for Visual Stuido Code](../toolkit/visual-studio-code-overview.md)
+* [Teams Toolkit for Visual Stuido](../toolkit/visual-studio-overview.md)
+ ## See also * [Request device permissions](../concepts/device-capabilities/native-device-permissions.md)