| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | API References | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/API-references.md | To identify and retrieve contextual information for your tab content, see [get c ## Get participant API > [!NOTE]+> > * Do not cache participant roles since the meeting organizer can change the roles any time. > * Currently, the `GetParticipant` API is only supported for distributions lists or rosters with less than 350 participants. The following table provides the response codes: All users in a meeting receive the notifications sent through in-meeting notification payload. In-meeting notification payload triggers an in-meeting notification and enables you to provide meeting signals that are delivered using the existing conversation notification API for user-bot chat. You can send an in-meeting notification based on user action. The payload is available through Bot Services. > [!NOTE]+> > * When an in-meeting notification is invoked, the content is presented as a chat message. > * Currently, sending targeted notifications and support for webapp are not supported. > * You must invoke the [submitTask()](../task-modules-and-cards/task-modules/task-modules-bots.md#submit-the-result-of-a-task-module) function to dismiss automatically after a user takes an action in the web view. This is a requirement for app submission. For more information, see [Teams SDK task module](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest#submittask-stringobject--stringstring&preserve-view=true). > * If you want your app to support anonymous users, initial invoke request payload must rely on `from.id` request metadata in `from` object, not `from.aadObjectId` request metadata. `from.id` is the user ID and `from.aadObjectId` is the Microsoft Azure Active Directory (Azure AD) ID of the user. For more information, see [using task modules in tabs](../task-modules-and-cards/task-modules/task-modules-tabs.md) and [create and send the task module](../messaging-extensions/how-to/action-commands/create-task-module.md?tabs=dotnet#the-initial-invoke-request).-+> ### Query parameter The following table includes the query parameters: The following table includes the query parameters: The `Bot ID` is declared in the manifest and the bot receives a result object. > [!NOTE]+> > * The `completionBotId` parameter of the `externalResourceUrl` is optional in the requested payload example. > * The `externalResourceUrl` width and height parameters must be in pixels. For more information, see [design guidelines](design/designing-apps-in-meetings.md). > * The URL is the page, which loads as `<iframe>` in the in-meeting notification. The domain must be in the apps' `validDomains` array in your app manifest. Use the following example to configure your app manifest's `webApplicationInfo` > [!NOTE] > The bot can receive meeting start or end events automatically from all the meetings created in all the channels by adding `ChannelMeeting.ReadBasic.Group` to manifest for RSC permission.- + ### Query parameter The following table lists the query parameter: microsoftTeams.meeting.getAppContentStageSharingState((err, result) => { // Indicates app has permission to share contents to meeting stage. } });-``` +``` The JSON response body for the `getAppContentStageSharingState` API is: microsoftTeams.meeting.getAppContentStageSharingCapabilities((err, result) => { // Indicates app has permission to share contents to meeting stage. } });-``` +``` The JSON response body for `getAppContentStageSharingCapabilities` API is: Your app manifest must have the `webApplicationInfo` property to receive the mee The bot receives 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 is 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 bot receives event through the `OnEventActivityAsync` handler. To deserializ 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/end event: Meeting Start Event+ ```csharp protected override async Task OnTeamsMeetingStartAsync(MeetingStartEventDetails meeting, ITurnContext<IEventActivity> turnContext, CancellationToken cancellationToken) { protected override async Task OnTeamsMeetingStartAsync(MeetingStartEventDetails ``` Meeting End Event+ ```csharp protected override async Task OnTeamsMeetingEndAsync(MeetingEndEventDetails meeting, ITurnContext<IEventActivity> turnContext, CancellationToken cancellationToken) { |
| platform | Enable And Configure Your App For Teams Meetings | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md | To enable your app for Teams meetings, update your app manifest and use the cont The meetings app capabilities are declared in your app manifest using the `configurableTabs`, `scopes`, and `context` arrays. The scope defines who can access and the context defines where your app is available. > [!NOTE]+> > * You must update your app manifest with the [manifest schema](../resources/schem). > * Apps in meetings require `groupchat` scope. The `team` scope works for tabs in channels only. Teams meetings provide a collaborative experience for your organization. Configu Before a meeting, users can add tabs, bots, and messaging extensions. Users with organizer and presenter roles can add tabs to a meeting. -**To add a tab to a meeting** +To add a tab to a meeting: 1. In your calendar, select a meeting to which you want to add a tab. 1. Select the **Details** tab and select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>. Before a meeting, users can add tabs, bots, and messaging extensions. Users with 1. In the tab gallery that appears, select the app that you want to add and follow the steps as required. The app is installed as a tab. -**To add a messaging extension to a meeting** +To add a messaging extension to a meeting: 1. Select the ellipses ●●● located in the compose message area in the chat. 1. Select the app that you want to add and follow the steps as required. The app is installed as a messaging extension. -**To add a bot to a meeting** +To add a bot to a meeting: In a meeting chat, enter the **@** key and select **Get bots**. > [!NOTE]+> > * The content bubble posts an Adaptive Card or a card simultaneously in the meeting chat that users can access. This helps the users when the meeting or the Teams app is minimized. > * The user identity must be confirmed using [Tabs SSO](../tabs/how-to/authentication/auth-aad-sso.md). After authentication, the app can retrieve the user role using the `GetParticipant` API. > * Based on the user role, the app has the capability to provide role specific experiences. For example, a polling app allows only organizers and presenters to create a new poll. To share the entire app to stage, in the app manifest you must configure `meetin ] ``` -For more information, see [app manifest](../resources/schem#configurabletabs). +For more information, see [app manifest](../resources/schem#configurabletabs). ##### Share specific parts of the app to stage |
| platform | Meeting App Extensibility | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md | Tabs allow the team members to access services and content in a specific space w > 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]+> > * The private scheduled meetings only support apps. > * Add app option for Teams meeting extension tab app is not supported in Teams web client. Tabs allow the team members to access services and content in a specific space w With the pre-meeting app experience, you can find and add meeting apps. You can also do pre-meeting tasks, such as developing a poll to survey the meeting participants. -**To add tabs to an existing meeting** +To add tabs to an existing meeting: 1. In your calendar, select a meeting to which you want to add a tab. 1. Select the **Details** tab and select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>. The tab gallery appears. With the pre-meeting app experience, you can find and add meeting apps. You can 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 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. With the in-meeting app experience, you can engage participants during the meeti For mobile, meeting apps are available from **Apps** > ellipses ●●● in the meeting. Select **Apps** to view all the apps available in the meeting. -**To use tabs during a meeting** +To use tabs during a meeting: 1. Go to Teams. 1. In your calendar, select a meeting in which you want to use a tab. The in-meeting dialog box is displayed where you can enter your response as feed > [!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, it sends a notification that the results are successfully downloaded. > * Your app manifest specifies the places in which you want the apps to appear. This can be done by specifying context field in manifest. It is also the part of a share meeting stage experience, subject to specified [design guidelines](~\apps-in-teams-meetings\design\designing-apps-in-meetings.md). |
| platform | Bot Basics | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/bot-basics.md | protected override Task OnTeamsChannelDeletedAsync(ChannelInfo channelInfo, Team ```csharp protected override Task OnTeamsChannelRenamedAsync(ChannelInfo channelInfo, TeamInfo teamInfo, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)- { - // Code logic here - } + { + // Code logic here + } ``` `OnTeamsTeamRenamedAsync` protected override Task OnTeamsChannelRenamedAsync(ChannelInfo channelInfo, Team ```csharp protected override Task OnTeamsTeamRenamedAsync(TeamInfo teamInfo, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)- { - // Code logic here - } + { + // Code logic here + } ``` `OnTeamsMembersAddedAsync` protected override Task OnTeamsTeamRenamedAsync(TeamInfo teamInfo, ITurnContext< ```csharp protected override Task OnTeamsMembersAddedAsync(IList<TeamsChannelAccount> teamsMembersAdded, TeamInfo teamInfo, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)- { - // Code logic here - } + { + // Code logic here + } ``` `OnTeamsMembersRemovedAsync` protected override Task OnTeamsMembersAddedAsync(IList<TeamsChannelAccount> team ```csharp protected override Task OnTeamsMembersRemovedAsync(IList<TeamsChannelAccount> teamsMembersRemoved, TeamInfo teamInfo, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken);- { - // Code logic here - } + { + // Code logic here + } ``` # [JavaScript](#tab/javascript) onTeamsTeamRenamedAsync(async (teamInfo, context, next) => { onTeamsMembersAdded(async (membersAdded, teamInfo, context, next) => { // code for handling- await next(); + await next(); }); ``` onTeamsMembersAdded(async (membersAdded, teamInfo, context, next) => { onTeamsMembersRemoved(async (membersRemoved, teamInfo, context, next) => { // code for handling- await next(); + await next(); }); ``` The invoke activities listed in this section are for conversational bots in Team -* * * + Now that you have familiarized yourself with bot activity handlers, let us see how bots behave differently depending on the conversation and the messages it receives or sends. |
| platform | Bot Features | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/bot-features.md | In the cases where bots work better in a channel also work better in a group cha ### In a one-to-one chat One-to-one chat is a traditional way for a conversational bot to interact with a user. A few examples of one-to-one conversational bots are:+ * Q&A bots-* bots that initiate workflows in other systems +* bots that initiate workflows in other systems * bots that tell jokes * bots that take notes Before creating one-to-one chatbots, consider whether a conversation-based interface is the best way to present your functionality. protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivi { turnContext.Activity.RemoveRecipientMention(); var text = turnContext.Activity.Text.Trim().ToLower();- await turnContext.SendActivityAsync(MessageFactory.Text($"Your message is {text}."), cancellationToken); + await turnContext.SendActivityAsync(MessageFactory.Text($"Your message is {text}."), cancellationToken); } ``` |
| platform | Calls Meetings Bots Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/calls-and-meetings/calls-meetings-bots-overview.md | Real-time media refers to scenarios where media must be processed in real-time, * **Service-hosted media**: Bots focus on managing application workflow, such as routing calls and offload audio processing to the Microsoft Real-time Media Platform. With service-hosted media, you have several options to implement and host your bot. A service-hosted media bot can be implemented as a stateless service as it does not process media locally. Service-hosted media bots can use the following APIs: - * `PlayPrompt` for playing an audio clip. - * `Record` for recording audio clips. - * `SubscribeToTone` for subscribing to dual tone multiple frequency (DTMF) tones. + * `PlayPrompt` for playing an audio clip. + * `Record` for recording audio clips. + * `SubscribeToTone` for subscribing to dual tone multiple frequency (DTMF) tones. For example, knowing when a user has pressed **0** to reach the operator. Real-time media refers to scenarios where media must be processed in real-time, ## See also -- [Graph API reference](/graph/api/resources/communications-api-overview?view=graph-rest-beta&preserve-view=true)-- [Sample apps](https://github.com/microsoftgraph/microsoft-graph-comms-samples)-- [Registering a bot that supports calls and online meetings](./registering-calling-bot.md)-- [Graph permissions for calls and online meetings bots](./registering-calling-bot.md#add-graph-permissions)-- [How to develop calling and online meeting bots on your computer](./debugging-local-testing-calling-meeting-bots.md)-- [Requirements and considerations for application-hosted media bots](./requirements-considerations-application-hosted-media-bots.md)-- [Technical information on handling incoming call notifications](./call-notifications.md)+* [Graph API reference](/graph/api/resources/communications-api-overview?view=graph-rest-beta&preserve-view=true) +* [Sample apps](https://github.com/microsoftgraph/microsoft-graph-comms-samples) +* [Registering a bot that supports calls and online meetings](./registering-calling-bot.md) +* [Graph permissions for calls and online meetings bots](./registering-calling-bot.md#add-graph-permissions) +* [How to develop calling and online meeting bots on your computer](./debugging-local-testing-calling-meeting-bots.md) +* [Requirements and considerations for application-hosted media bots](./requirements-considerations-application-hosted-media-bots.md) +* [Technical information on handling incoming call notifications](./call-notifications.md) |
| platform | Registering Calling Bot | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/calls-and-meetings/registering-calling-bot.md | keywords: calling bot audio/video audio video media A bot that participates in audio or video calls and online meetings is a regular Microsoft Teams bot with the following extra features used to register the bot: -* There is a new version of the Teams app manifest with two additional settings, `supportsCalling` and `supportsVideo`. These settings are included in the [ Manifest schema for Microsoft Teams](../../resources/schem). +* There is a new version of the Teams app manifest with two additional settings, `supportsCalling` and `supportsVideo`. These settings are included in the [Manifest schema for Microsoft Teams](../../resources/schem). * [Microsoft Graph permissions](./registering-calling-bot.md#add-graph-permissions) must be configured for your bot's Microsoft App ID. * The Graph calls and online meetings APIs permissions require tenant admin consent. The next section enables you to create a new bot or add calling capabilities to For information on creating bots, see [create a bot for Teams](../how-to/create-a-bot-for-teams.md). -**To create a new bot for Teams** +To create a new bot for Teams: 1. Use this link to create a new bot, `https://dev.botframework.com/bots/new`. Alternately, if you select the **Create a bot** button in the Bot Framework portal, you create your bot in Microsoft Azure, for which you must have an Azure account. 1. Add the Teams channel. |
| platform | Add Power Virtual Agents Bot To Teams | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/add-power-virtual-agents-bot-to-teams.md | ms.localizationpriority: medium -# Add Power Virtual Agents chatbot +# Add Power Virtual Agents chatbot -Power Virtual Agents is a no-code, guided graphical interface solution that empowers every member of your team to create rich, conversational chatbots that easily integrate with the Teams platform. All content authored in Power Virtual Agents renders naturally in Teams. Power Virtual Agents bots engage with users in the Teams native chat canvas. The IT administrators, business analysts, domain specialists, and skilled app developers can design, develop, and publish intelligent virtual agents for Teams without having to setup a development environment. They can create a web service, or directly register with the Bot Framework. +Power Virtual Agents is a no-code, guided graphical interface solution that empowers every member of your team to create rich, conversational chatbots that easily integrate with the Teams platform. All content authored in Power Virtual Agents renders naturally in Teams. Power Virtual Agents bots engage with users in the Teams native chat canvas. The IT administrators, business analysts, domain specialists, and skilled app developers can design, develop, and publish intelligent virtual agents for Teams without having to setup a development environment. They can create a web service, or directly register with the Bot Framework. -This document guides you on how to make your chatbot available in Teams through the Power Virtual Agents portal, and add your bot to Teams using App Studio. +This document guides you on how to make your chatbot available in Teams through the Power Virtual Agents portal, and add your bot to Teams using App Studio. Power Virtual Agents lets you create powerful chatbots that can answer questions posed by your customers, other employees, or visitors to your website or service. These bots can be created easily without the need for data scientists or develop To make your chatbot available in Teams through the Power Virtual Agents portal, you must perform the following process steps: -**To make the chatbot available in Teams** +To make the chatbot available in Teams: 1. **Publish the latest bot content** After creating a chatbot in the Power Virtual Agents portal, you must publish your bot before Teams users can interact with it. For more information, see [Publish the latest bot content](/power-virtual-agents/publication-fundamentals-publish-channels#publish-the-latest-bot-content). After adding the Teams channel to your chatbot, an **App ID** is generated in th If [uploading custom apps is enabled](/microsoftteams/admin-settings) in your Teams instance, you can use Teams App Studio to directly upload your chatbot and start using it immediately. To share your chatbot, you can request your admin to make your bot available in the tenant app catalog or you can send your app package to others and ask them to upload it independently. 1. **Install App Studio in Teams** -App Studio is a Teams app. Install App Studio from the Teams store that simplifies the process of bot creation and registration in Teams: +App Studio is a Teams app. Install App Studio from the Teams store that simplifies the process of bot creation and registration in Teams: 1. Select the app store icon from Teams instance, and search for **App Studio**. -    <img width="450px" alt="Finding App Studio in the Store" src="../../assets/images/get-started/app-studio-store.png"/> +    <img width="450px" alt="Finding App Studio in the Store" src="../../assets/images/get-started/app-studio-store.png"/> 1. Select the **App Studio** tile and select **Install** in the pop-up dialog box. Complete all the required fields. For a full description of each field see [mani  -1. **Set up your bot** -To set-up the bot, perform the following steps: - 1. Open the **Bots** tab. +1. **Set up your bot** +To set-up the bot, perform the following steps: + 1. Open the **Bots** tab. 1. Select **Setup** > **Existing bot** and enter the name of your bot. -  +  - The following image depicts how to set-up an existing bot: + The following image depicts how to set-up an existing bot: - + 1. **Add your App ID** To add your App ID, perform the following steps: - 1. Select **Connect to a different bot id** and paste the **App Id** you copied earlier. + 1. Select **Connect to a different bot id** and paste the **App Id** you copied earlier. 1. Select **Scope** > **Personal** > **Save**.  This step is only required if your bot requires the user to sign in. Select **Do 1. **Test and distribute your bot** Open **Test and distribute** tab and select **Install** to add your bot directly to your Teams instance. Alternately, you can download the completed app package to share with Teams users or provide it to your admin to make your bot available in the tenant app catalog. -1. **Start a chat** +1. **Start a chat** The set-up process for adding your Power Virtual Agents chat bot to Teams is complete. You can now start a conversation with your bot in a personal chat. ## Next step The set-up process for adding your Power Virtual Agents chat bot to Teams is com ## See also * [Power Virtual Agents](/power-virtual-agents/fundamentals-what-is-power-virtual-agents) -* [Create a chatbot for Teams with Microsoft Power Virtual Agents](../bot-features.md#bots-with-power-virtual-agents) +* [Create a chatbot for Teams with Microsoft Power Virtual Agents](../bot-features.md#bots-with-power-virtual-agents) * [Power Virtual Agents portal](https://powervirtualagents.microsoft.com) * [Publish your Power Virtual Agents bot](/power-virtual-agents/publication-fundamentals-publish-channels) * [Security and compliance in Microsoft Teams](/MicrosoftTeams/security-compliance-overview)-- |
| platform | Add Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/add-authentication.md | The Azure Bot resource registration registers your web service as a bot with the  Now your Azure bot is created.- +  -**To create client secret** +To create client secret: 1. In **Settings**, select **Configuration**. Save the **Microsoft App ID** (client ID) for future reference. The Azure Bot resource registration registers your web service as a bot with the  1. Enter **Description** and select **Add**.- +  1. In the **Value** column, select **Copy to clipboard** and save the client secret ID for future reference. - -**To add the Microsoft Teams channel** ++To add the Microsoft Teams channel: 1. Go to **Home**. In this procedure you'll use an Azure AD provider; other Azure AD supported iden 1. Add a description to identify this secret from others you might need to create for this app, such as *Bot identity app in Teams*. 1. Set **Expires** to your selection. 1. Select **Add**.- 1. Before leaving this page, **record the secret**. You'll use this value later as the _Client secret_ when you register your Azure AD application with your bot. + 1. Before leaving this page, **record the secret**. You'll use this value later as the *Client secret* when you register your Azure AD application with your bot. ### Configure the identity provider connection and register it with the bot -Note-there are two options for Service Providers here-Microsoft Azure Active Directory (Azure AD) V1 and Microsoft Azure Active Directory (Azure AD) V2. The differences between the two providers are summarized [here](/azure/active-directory/azuread-dev/azure-ad-endpoint-comparison), but in general, V2 provides more flexibility with respect to changing bot permissions. Graph API permissions are listed in the scopes field, and as new ones are added, bots will allow users to consent to the new permissions on the next sign in. For V1, the bot consent must be deleted by the user for new permissions to be prompted in the OAuth dialog. +Note-there are two options for Service Providers here-Microsoft Azure Active Directory (Azure AD) V1 and Microsoft Azure Active Directory (Azure AD) V2. The differences between the two providers are summarized [here](/azure/active-directory/azuread-dev/azure-ad-endpoint-comparison), but in general, V2 provides more flexibility with respect to changing bot permissions. Graph API permissions are listed in the scopes field, and as new ones are added, bots will allow users to consent to the new permissions on the next sign in. For V1, the bot consent must be deleted by the user for new permissions to be prompted in the OAuth dialog. #### Microsoft Azure Active Directory (Azure AD) V1 1. In the [**Azure portal**][azure-portal], select your resource group from the dashboard. 1. Select your bot registration link.-1. Open the resource page and select **Configuration** under **Settings**. -1. Select **Add OAuth Connection Settings**. +1. Open the resource page and select **Configuration** under **Settings**. +1. Select **Add OAuth Connection Settings**. The following image displays the corresponding selection in the resource page:  1. Complete the form as follows: The following image displays the corresponding selection in the resource page: #### Microsoft Azure Active Directory (Azure AD) V2 1. In the [**Azure portal**][azure-portal], select your Azure Bot from the dashboard.-1. In the resource page, select **Configuration** under **Settings**. +1. In the resource page, select **Configuration** under **Settings**. 1. Select **Add OAuth Connection Settings**. -The following image displays the corresponding selection in the resource page: - +The following image displays the corresponding selection in the resource page: + 1. Complete the form as follows: The following image displays the corresponding selection in the resource page: - If you selected *Accounts in any organizational directory (Any Microsoft Azure Active Directory (Azure AD) - Multi tenant and personal Microsoft accounts e.g. Skype, Xbox, Outlook)* enter the word **common** instead of a tenant ID. Otherwise, the Microsoft Azure Active Directory (Azure AD) app will verify through the tenant whose ID was selected and exclude personal Microsoft accounts. - 1. For **Scopes**, enter a space-delimited list of graph permissions this application requires e.g.: User.Read User.ReadBasic.All Mail.Read + 1. For **Scopes**, enter a space-delimited list of graph permissions this application requires e.g.: User.Read User.ReadBasic.All Mail.Read 1. Select **Save**. This launches ngrok to listen on the port you specify. In return, it gives you a > [!NOTE] > If you stop and restart ngrok, the URL changes. To use ngrok in your project, and depending on the capabilities you're using, you must update all URL references.- ## Additional information |
| platform | Auth Aad Sso Bots | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md | The following steps help you with authentication and bot application tokens: > * The bot token is received from every active user endpoint. > * The app must be installed in personal scope for SSO support. - 1. If the current user is using your bot application for the first time, a request prompt appears to the user to do one of the following actions: * Provide consent, if necessary. * Handle step-up authentication, such as two-factor authentication. The steps to register your app through the Azure AD portal are similar to the [t > To update your app manifest later, save the **Application (client) ID** value. > [!IMPORTANT]+ > > * If you are building a standalone bot, enter the Application ID URI as `api://botid-{YourBotId}`. Here *YourBotId* is your Azure AD application ID. > * If you are building an app with a bot and a tab, enter the Application ID URI as `api://fully-qualified-domain-name.com/botid-{YourBotId}`. The steps to register your app through the Azure AD portal are similar to the [t 1. The following steps will help you to enable implicit grant: * Select **Authentication** from the left pane. * Select the **Access tokens** and **ID tokens** checkboxes.- + - + * Select **Save** to save the changes. 1. Add necessary **API Permissions**. The following steps will guide you to update the bot manifest in Azure portal:  - >[!NOTE] > If you are already in testing your bot in Teams, you must sign out from this app and sign out from Teams. Then sign in again to see this change. The following steps will guide you to update the Azure portal with the OAuth con * Add all the **Scopes** configured when specifying permissions to downstream APIs for your Azure AD application. With the Client ID and Client secret provided, the token store exchanges the token for a graph token with defined permissions. * Select **Save**. * Select **Apply**.- +  ### Update your Teams application manifest for your bot If the application contains a standalone bot, then use the following code to add "resource": "api://botid-00000000-0000-0000-0000-000000000000" } ```+ If the application contains a bot and a tab, then use the following code to add new properties to the Teams application manifest: ```json When the user selects **Continue**, the following events occur: #### Receive the bot token -The response with the token is sent through an invoke activity with the same schema as other invoke activities that the bots receive today. The only difference is the invoke name, +The response with the token is sent through an invoke activity with the same schema as other invoke activities that the bots receive today. The only difference is the invoke name, **sign in/tokenExchange**, and the **value** field. The **value** field contains the **Id**, a string of the initial request to get the token and the **token** field, a string value including the token. >[!NOTE] To understand what the bot does when the token exchange fails to trigger a conse 6. If the `TokenExchangeInvokeResponse` has a `status` of `200`, then the client doesn't show the OAuth card. See the [normal flow image](/azure/bot-service/bot-builder-concept-sso?view=azure-bot-service-4.0#sso-components-interaction&preserve-view=true). For any other `status` or if the `TokenExchangeInvokeResponse` isn't received, then the client shows the OAuth card to the user. See the [fallback flow image](/azure/bot-service/bot-builder-concept-sso?view=azure-bot-service-4.0#sso-components-interaction&preserve-view=true). If there are any errors or unmet dependencies like user consent, this activity ensures that the SSO flow falls back to normal OAuthCard flow. - ### Update the auth sample Open [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth) and then complete the following steps to update it: Open [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/ma 4. Zip the manifest with the profile images and install it in Teams. ## Code sample-|**Sample name** | **Description** |**.NET** | ++|**Sample name** | **Description** |**.NET** | |-|--|--| |Bot framework SDK | Sample for using the bot framework SDK. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/46.teams-auth)| |
| platform | Conversation Messages | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/conversations/conversation-messages.md | Form completion message appears in Adaptive Cards while sending a response to th  -You can select **Close** or switch chat to dismiss the message. +You can select **Close** or switch chat to dismiss the message. **Response on mobile**: |
| platform | Get Teams Context | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/get-teams-context.md | After you get details of the team, you can get the list of channels in a team. C Your bot can query the list of channels in a team. > [!NOTE]+> > * The name of the default General channel is returned as `null` to allow for localization. > * The channel ID for the General channel always matches the team ID. |
| platform | App Fundamentals Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/app-fundamentals-overview.md | At its heart, Teams is a collaboration platform. It's also a social platform, is In this section, learn how to: +* Identify and map use cases to Teams features. +* Use planning checklist. +* Plan beyond app deployment. ## Plan with Teams Teams as a platform offers you toolkits, libraries, and apps at every stage of a :::image type="content" source="../assets/images/app-fundamentals/plan-app.png" alt-text="Illustration shows planning your app" border="true"::: -- [Before you build](#before-you-build)-- [During build](#during-build)-- [Post-build](#post-build)-- [Planning checklist](../concepts/design/planning-checklist.md)+* [Before you build](#before-you-build) +* [During build](#during-build) +* [Post-build](#post-build) +* [Planning checklist](../concepts/design/planning-checklist.md) ### Before you build Understanding the user and their concern are the first indicators of how a Teams app can help. Build your use case around the problem, determine how an app can solve it, and draw a solution. -- **Understand your use case and Teams App Features**: Understand your user's requirement and you can identify the right features.+* **Understand your use case and Teams App Features**: Understand your user's requirement and you can identify the right features. -- **Map your use cases**: Map common use cases to Teams features based on requirements, such as sharing, collaborating, workflows, relevant social platforms, and more.+* **Map your use cases**: Map common use cases to Teams features based on requirements, such as sharing, collaborating, workflows, relevant social platforms, and more. -- **Plan responsive tabs for Teams mobile**: It covers common scenarios and helps with planning apps for Teams mobile.+* **Plan responsive tabs for Teams mobile**: It covers common scenarios and helps with planning apps for Teams mobile. ### During build -- **Create and Build app project**: With Teams, you can choose the build environment that best suits your app requirement. Use Teams Toolkit or other SDKs, such as C#, Blazor, Node.js, and more to get started.+* **Create and Build app project**: With Teams, you can choose the build environment that best suits your app requirement. Use Teams Toolkit or other SDKs, such as C#, Blazor, Node.js, and more to get started. -- **Design your app UI**: Use Teams UI Toolkit and UI Library to design your app's layout.+* **Design your app UI**: Use Teams UI Toolkit and UI Library to design your app's layout. -- **Use Teams as a platform**: Teams platform helps you build a single- or multi-capability app. Your Teams app is backed by the integrated products and services that strengthen the app experience.+* **Use Teams as a platform**: Teams platform helps you build a single- or multi-capability app. Your Teams app is backed by the integrated products and services that strengthen the app experience. :::image type="content" source="../assets/images/overview/teams-solution.png" alt-text="Conceptual representation of the Teams solution." border="true"::: Understanding the user and their concern are the first indicators of how a Teams Together, these capabilities bring your app solution to life. -- **Integrate device capabilities**: You can integrate the native device capabilities in your app, such as camera, QR or barcode scanner, photo gallery, microphone, and location.+* **Integrate device capabilities**: You can integrate the native device capabilities in your app, such as camera, QR or barcode scanner, photo gallery, microphone, and location. ### Post-build -- Integrate your app with Teams and other apps, such as Microsoft 365, Microsoft Graph, and more.-- Use Developer Portal to configure, manage, and deploy your app.+* Integrate your app with Teams and other apps, such as Microsoft 365, Microsoft Graph, and more. +* Use Developer Portal to configure, manage, and deploy your app. <details> <summary><b>Learn about Government Community Cloud (GCC)</b></summary> The following table includes Teams features and availability for GCC, GCC-High, The following list helps to identify the availability of GCC, GCC-High, and DOD for the features: -- For third-party apps, see [web apps](../samples/integrating-web-apps.md) and [meeting app extensibility](../apps-in-teams-meetings/meeting-app-extensibility.md).-- For bots, see [build your first conversational bot for Teams](../get-started/first-app-bot.md), [designing your Teams bot](../bots/design/bots.md), [add bots to Microsoft Teams apps](../resources/bot-v3/bots-overview.md), and [bots in Teams](../bots/what-are-bots.md).-- For sideloading apps, see [enable your Teams app to be customized](../concepts/design/enable-app-customization.md), [distribute your Microsoft Teams app](../concepts/deploy-and-publish/apps-publish-overview.md), and [Upload your app in Teams](../concepts/deploy-and-publish/apps-upload.md).-- For custom connectors, see [create Office 365 connectors for Teams](../webhooks-and-connectors/how-to/connectors-creating.md).+* For third-party apps, see [web apps](../samples/integrating-web-apps.md) and [meeting app extensibility](../apps-in-teams-meetings/meeting-app-extensibility.md). +* For bots, see [build your first conversational bot for Teams](../get-started/first-app-bot.md), [designing your Teams bot](../bots/design/bots.md), [add bots to Microsoft Teams apps](../resources/bot-v3/bots-overview.md), and [bots in Teams](../bots/what-are-bots.md). +* For sideloading apps, see [enable your Teams app to be customized](../concepts/design/enable-app-customization.md), [distribute your Microsoft Teams app](../concepts/deploy-and-publish/apps-publish-overview.md), and [Upload your app in Teams](../concepts/deploy-and-publish/apps-upload.md). +* For custom connectors, see [create Office 365 connectors for Teams](../webhooks-and-connectors/how-to/connectors-creating.md). </details> The following list helps to identify the availability of GCC, GCC-High, and DOD ## See also -- [Planning checklist](../concepts/design/planning-checklist.md)-- [Considerations for Teams integration](../samples/integrating-web-apps.md)-- [Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md)+* [Planning checklist](../concepts/design/planning-checklist.md) +* [Considerations for Teams integration](../samples/integrating-web-apps.md) +* [Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md) |
| platform | Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/authentication/authentication.md | provides Bot authentication v3 SDK sample. | 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. | [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 -Regardless of the app's authentication flow, configure the identity provider to communicate with the Teams app. Most samples and walk throughs primarily deal with using Azure AD as the identity provider. The concepts however, apply regardless of the identity provider. +Regardless of the app's authentication flow, configure the identity provider to communicate with the Teams app. Most samples and walk throughs primarily deal with using Azure AD as the identity provider. The concepts however, apply regardless of the identity provider. For more information, see [configuring an identity provider](~/concepts/authentication/configure-identity-provider.md). After the iOS 14 update, Apple has blocked the [third-party cookie](https://webk * [Microsoft Teams authentication flow for tabs](~/tabs/how-to/authentication/auth-flow-tab.md) * [Single sign-on support for bots](~/bots/how-to/authentication/auth-aad-sso-bots.md)-* [Add authentication to your messaging extension](~/messaging-extensions/how-to/add-authentication.md) +* [Add authentication to your messaging extension](~/messaging-extensions/how-to/add-authentication.md) |
| platform | App Studio Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/app-studio-overview.md | Each command requires a title and an ID. The command can optionally contain a de Once you have finished defining your application, the Test and Distribute section allows you export your appΓÇÖs definition as a zip file which then can be shared and uploaded into the Teams client for testing. Clicking export downloads the zip file as *appname.zip* in your default download directory. ##### Publish your app to Teams+ On your project home page, you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users. Your IT admin will review these submissions. You can return to the *Publish* page to check on your submission status and learn if your app was approved or rejected by your IT admin. This is also where you'll come to submit updates to your app or cancel any currently active submissions. ### Card Editor -A card is a container for short or related pieces of information. Microsoft Teams supports cards, which can have multiple properties and attachments. Cards are a key way that bots and connectors relay actionable information to users. +A card is a container for short or related pieces of information. Microsoft Teams supports cards, which can have multiple properties and attachments. Cards are a key way that bots and connectors relay actionable information to users. To make this process easier and less error-prone, the Card Editor tab lets you build Hero Cards or Thumbnail Cards using a form and verify and test the resulting card (exactly as a user would see it) through a bot. It also provides the corresponding JSON, C#, or Node.js code for the card that you can copy/paste into your app's source code. Controls include: ## See also -[Manage your apps with the Developer Portal for Microsoft Teams](~/concepts/build-and-test/teams-developer-portal.md) +[Manage your apps with the Developer Portal for Microsoft Teams](~/concepts/build-and-test/teams-developer-portal.md) |
| platform | Deep Links | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-links.md | Provide the following fields: ### Generate a deep link to your tab > [!NOTE]-> Personal tabs have a `personal` scope, while channel and group tabs use `team` or `group` scopes. The two tab types have a slightly different syntax since only the configurable tab has a `channel` property associated with its context object. See the [manifest](~/resources/schem) reference for more information on tab scopes. --> [!NOTE] -> Deep links work properly only if the tab was configured using the v0.4 or later library and because of that has an entity ID. Deep links to tabs without entity IDs still navigate to the tab but cannot provide the sub entity ID to the tab. +> +> * Personal tabs have a `personal` scope, while channel and group tabs use `team` or `group` scopes. The two tab types have a slightly different syntax since only the configurable tab has a `channel` property associated with its context object. See the [manifest](~/resources/schem) reference for more information on tab scopes. +> * Deep links work properly only if the tab was configured using the v0.4 or later library and because of that has an entity ID. Deep links to tabs without entity IDs still navigate to the tab but cannot provide the sub entity ID to the tab. Use the following format for a deep link that you can use in a bot, connector, or messaging extension card: The query parameters are: > [!IMPORTANT] > Ensure that all query parameters are properly URI encoded. You must follow the preceeding examples using the last example:-+> > ```javascript > var encodedWebUrl = encodeURI('https://tasklist.example.com/123/456&label=Task 456'); > var encodedContext = encodeURI('{"subEntityId": "task456"}'); The following example format illustrates the deeplink to files: ### Serialization of this object -``` +```javascript { fileId: "5E0154FC-F2B4-4DA5-8CDA-F096E72C0A80", tenantId: "0d9b645f-597b-41f0-a2a3-ef103fbd91bb", |
| platform | Prepare Your O365 Tenant | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/prepare-your-o365-tenant.md | Microsoft 365 subscribers can develop apps for Microsoft Teams with one of the f * Education, Education Plus, and Education E5 > [!NOTE]+> > * For more information on Microsoft 365 subscriptions, see [plans](https://products.office.com/business/compare-more-office-365-for-business-plans). > * Teams is also available to customers who subscribed to E4 prior to its [retirement](https://support.office.com//article/important-information-for-office-365-enterprise-e4-customers-f9572348-43a2-43fa-a3d8-3b6c9c042147). Enable Teams for your organization and for more information, see [enabling Teams ## Enable custom Teams apps and turn on custom app uploading -**To turn on the custom app uploading or sideloading for your developer tenant** +To turn on the custom app uploading or sideloading for your developer tenant: 1. Sign in to [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials. For complete information on how these settings interact, see [manage custom app ## Next step -> [!div class="nextstepaction"] +> [!div class="nextstepaction"] > [Choose a test setup](~/concepts/build-and-test/debug.md) ## See also |
| platform | Share To Teams | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/share-to-teams.md | keywords: Share Teams Share-to-Teams Third-party websites can use the launcher script to embed Share-to-Teams buttons on their webpages. When you select, it launches the Share-to-Teams experience in a pop-up window. This allows you to share a link directly to any person or Microsoft Teams channel without switching the context. This document guides you on how to create and embed a Share-to-Teams button for your website, craft your website preview, and extend Share-to-Teams for Education. > [!NOTE]+> > * Only the desktop versions of Microsoft Edge and Google Chrome are supported. > * Use of Freemium or guest accounts is not supported. The following image displays the Share-to-Teams pop-up experience: data-icon-px-size="64"> </div> ```+ 1. If the shared link requires user authentication, and the URL preview from your link to be shared does not render well in Teams, then you can disable the URL preview by adding the `data-preview` attribute set to `false`. ```html The following image displays the Share-to-Teams pop-up experience: When your website is shared to Teams, the card that is inserted into the selected channel contains 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, such as the `data-href` URL. -**To display the preview** +To display the preview: * You must include either a **Thumbnail image**, or both a **Title** and **Description**. For best results, include all three. * The shared URL does not require authentication. If it requires authentication, you can share it, but the preview is not created. You can use either the HTML default versions or the Open Graph version. ## Share to Teams for Education -For teachers using the Share to Teams button, there is an additional option to `Create an Assignment`. This enables you to quickly create an assignment in the chosen Team, based on the shared link. The following image displays Share-to-Teams for education: +For teachers using the Share to Teams button, there is an additional option to `Create an Assignment`. This enables you to quickly create an assignment in the chosen Team, based on the shared link. The following image displays Share-to-Teams for education:  |
| platform | Teams Developer Portal | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/teams-developer-portal.md | The <a href="https://dev.teams.microsoft.com" target="_blank">Developer Portal f :::image type="content" source="../../assets/images/tdp/tdp_home_1.png" alt-text="Screenshot showing the home page of the Developer Portal for Teams."::: -> [!NOTE] +> [!NOTE] > Currently, Developer Portal is not available for Government Community Cloud (GCC), GCC-High, or Department of Defense (DOD) tenants. ## Register an app The Developer Portal provides a couple ways to register a Teams app: You can configure environments and global variables to help transition your app from your local runtime to production. Global variables are used across all environments. -**To set up an environment** +To set up an environment: 1. In the Developer Portal, select the app you're working on. 2. Go to the **Environments** page and select **+ Add an environment**. 3. Select **+ Add a variable** to create configuration variables for your environment. -**To use variables** +To use variables: Use the variable names instead of hard-coded values to set your app configurations. 1. Enter `{{` in any field in the Developer Portal. A dropdown with all the variables you've created for the chosen environment along with the global variables appears. -1. Before downloading your app package (for example, when getting ready to publish to the Teams store), select the environment you want to use. Your app configurations update automatically based on the environment. +1. Before downloading your app package (for example, when getting ready to publish to the Teams store), select the environment you want to use. Your app configurations update automatically based on the environment. ## Identify app owners |
| platform | Capabilities Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/capabilities-overview.md | - Title: Understand app features- -description: Description of Teams app capabilities, such as Tabs, Bots, Messaging extensions, and Webhooks and connectors; app scope, such as personal and shared apps -- Previously updated : 09/22/2020-keywords: tabs bots messaging extensions webhooks connectors ---# Understand Microsoft Teams app features --There are multiple ways to extend Teams, so every app is unique. A Teams app can manifest itself to a user in different ways. An Teams app features include: --- App capabilities-- App scope--For example, a user can interact with an app on a canvas tab to do an activity or might choose to do the same using a conversational bot. You can only one capability, such as a webhook, while others have more than one feature to give users various options. --These capabilities can exist across different scopes. For example, your app can display data in a central shared location, that is, the tab and present that same information through a personal conversational interface, that is, the bot. --## App capabilities --To be able to extend your app, you must understand all the core capabilities and the entry points that work in a collaborative space. You can experiment with the extension points for building your apps. Important app project components help you to correctly configure your app page. --Your Teams apps have one or all of the following core capabilities: -- :::column span=""::: -### Personal apps --A [personal app](../concepts/design/personal-apps.md) is a dedicated space or bot to help users focus on their own tasks or view activities important to them. -- :::column-end::: -- :::column span=""::: --- :::column-end::: --- :::column span=""::: --### Tabs --Display your web-based content in a [tab](../tabs/what-are-tabs.md) where people can discuss and work on it together. -- :::column-end::: -- :::column span=""::: --- :::column-end::: --- :::column span=""::: --### Bots --Conversations often result in the need to do something (generate an order, review my code, check ticket status, and so on). A [bot](../bots/what-are-bots.md) can kick off these kinds of workflows right inside Teams. -- :::column-end::: -- :::column span=""::: --- :::column-end::: ---- :::column span=""::: --### Messaging extensions --With [messaging extensions](../messaging-extensions/what-are-messaging-extensions.md), 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. -- :::column-end::: -- :::column span=""::: --- :::column-end::: --- :::column span=""::: --### Meeting extensions --There are a few options for [incorporating your app into the Teams calling experience](../apps-in-teams-meetings/design/designing-apps-in-meetings.md). -- :::column-end::: -- :::column span=""::: --- :::column-end::: --- :::column span=""::: --### Webhooks and connectors --[Incoming webhooks](../webhooks-and-connectors/what-are-webhooks-and-connectors.md#incoming-webhooks) are a simple way to automatically send notifications from another app to a Teams channel. With [outgoing webhooks](../webhooks-and-connectors/what-are-webhooks-and-connectors.md#outgoing-webhooks), message your web service with an @mention. -- :::column-end::: -- :::column span=""::: --- :::column-end::: --- :::column span=""::: --### Microsoft Graph for Teams --The [Microsoft Graph API for Teams](/graph/teams-concept-overview) provides access to information about teams, channels, users, and messages that can help you create or enhance features for your app (such as rich notifications). -- :::column-end::: -- :::column span=""::: --- :::column-end::: --> [!NOTE] -> Teams store has evolved: -> Previously, the LOB apps were updated by selecting the ellipses on the tile. With the updated Teams store experience, you can now update the LOB apps by logging in to the [Teams Admin Centre](https://admin.teams.microsoft.com). --## Choose the correct scope for your app --You can choose app scope from the following: --- Personal app experience: A personal app is a dedicated space or bot to help users focus on their own tasks or view activities important to them.-- Shared app experience: Team, channel, and chat are collaboration spaces. Apps in these contexts are available to everyone in that space. Collaboration spaces typically focus on workflows for your app's interactions or unlocking new social interactions.--## See also --* [Build apps for Teams](../overview.md) -* [Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md) |
| platform | Submission Checklist | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md | Before you submit your app to [Partner Center](/office/dev/store/use-partner-cen While your app may be working in a test environment, you should check your app package to avoid running into issues during the submission process. > [!NOTE]-> App Studio will soon be deprecated. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/) +> App Studio will soon be deprecated. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/) The Microsoft Teams app validation tool helps you identify and fix issues before submitting to Partner Center. The tool automatically checks your app's configurations against the same test cases used during store validation. The Microsoft Teams app validation tool helps you identify and fix issues before ## Compile testing instructions Provide instructions and resources to help the reviewers test your app, including:+ * Test accounts * Credentials * License keys |
| platform | Teams Store Validation Guidelines | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md | ms.localizationpriority: medium Following these guidelines increases the chances of your app to pass the Microsoft Teams store submission process. The Teams-specific guidelines complement the Microsoft [commercial marketplace certification policies](/legal/marketplace/certification-policies) and are updated frequently to reflect new capabilities, user feedback, and business rule changes. > [!NOTE]+> > * Some guidelines may not be applicable to your app. For example, if your app doesn't include a bot, you can ignore bot-related guidelines. > * We've cross-referenced these guidelines to the Microsoft commercial certification policies and added Do’s and Don’ts with examples from pass or fail scenarios encountered in our validation process.-> * Certain guidelines are marked as *Mandatory Fix*. If your app submission doesn't meet these mandatory guidelines, you'll receive a failure report from us with steps to mitigate. Your app submission will pass Microsoft Teams store Validation only after you have fixed the issues. -> * Other guidelines are marked as *Suggested Fix*. For an ideal user experience, we suggest that you fix the issues, however, your app submission will not be blocked from publishing on the Teams store, if you choose not to fix the issues. -+> * Certain guidelines are marked as *Mandatory Fix*. If your app submission doesn't meet these mandatory guidelines, you'll receive a failure report from us with steps to mitigate. Your app submission will pass Microsoft Teams store Validation only after you have fixed the issues. +> * Other guidelines are marked as *Suggested Fix*. For an ideal user experience, we suggest that you fix the issues, however, your app submission will not be blocked from publishing on the Teams store, if you choose not to fix the issues. ## Value proposition+ > [!NOTE] > This section is inline with [Microsoft commercial certification policy number 1140.1](/legal/marketplace/certification-policies#11401-value-proposition-and-offer-requirements) and provides additional guidance to developers of Microsoft Teams apps on their offer’s value proposition. For more information on how to implement app authentication, see [authentication * **Content sharing experiences**: Apps that require authentication with an external service to share content in Teams channels must clearly state in the help documentation (or similar resources) on how to disconnect or unshare content if that feature is supported on the external service. This doesn't mean the ability to un share content must be present in your Teams app. ## Security+ > [!NOTE] > This section is inline with [Microsoft commercial certification policy number 1140.3](/legal/marketplace/certification-policies#11403-security). For more information on how to implement app authentication, see [authentication > This section is inline with [Microsoft commercial certification policy number 1140.3.1](/legal/marketplace/certification-policies#114031-financial-transactions) and provides guidance on transmission of financial information within the Teams interface and notifies developers of restricted payment scenarios on the mobile (Android and iOS) version of their Teams app. Apps must not ask users to make payments within the Teams interface and transmit financial information to users through a bot interface. - - :::row::: :::column span=""::: Don't facilitate payments through an app for goods or services prohibited by [Ge Apps running on the iOS or Android version of Teams must adhere to the following guidelines: -* Apps must not include in-app purchases, trial offers, or UI that aims to upsell users to paid versions or online stores to purchase other content, apps, or add-ins. - +* Apps must not include in-app purchases, trial offers, or UI that aims to upsell users to paid versions or online stores to purchase other content, apps, or add-ins. + :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: * If your app requires an account, users can sign up for an account at no charge. The use of the term **free** or **free account** is prohibited. * You can determine whether an account is active indefinitely or for a limited time. When the account expires the app must not show UI, text, or links indicating the need to pay. Apps running on the iOS or Android version of Teams must adhere to the following For apps that use the Microsoft Azure Bot Service (such as bots and messaging extensions), you must follow all requirements defined in the Microsoft [Online Services Terms](https://www.microsoftvolumelicensing.com/DocumentSearch.aspx?Mode=3&DocumentTypeId=46). Bots must always ask permission to upload a file and display a confirmation message.- + :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- ### External domains Bots must always ask permission to upload a file and display a confirmation mess Don't include domains outside of your organization's control (including wildcards) and tunneling services in your app's domain configurations. The following exceptions include: - * If your app uses the Azure Bot Service's OAuthCard, you must include `token.botframework.com` as a valid domain or the **Sign in** button won't work. - * If your app relies on SharePoint, you can include the associated root SharePoint site as a valid domain using the `{teamSiteDomain}` context property. +* If your app uses the Azure Bot Service's OAuthCard, you must include `token.botframework.com` as a valid domain or the **Sign in** button won't work. +* If your app relies on SharePoint, you can include the associated root SharePoint site as a valid domain using the `{teamSiteDomain}` context property. #### Government Community Cloud listings App packages must be correctly formatted and include all required information an > [!TIP] > You must include the following detailed testing instructions for validating your app submission:+> > * **Steps to configure the app test accounts** in case app depends on external accounts for authentication. > * Summary of **expected app behavior** for the core workflows within Teams. > * **Clearly describe Limitations**, conditions, or exceptions to the functionality, features, and deliverables in the app long description and related materials. The privacy policy can be specific to your Teams app or an overall policy for al [*Mandatory Fix*] Use the following guidelines to write the Terms of use:- * Must be specific and applicable to your offering. - * Must be hosted on your own domain. - * Must have a secure (HTTPS) link. - * Access to Terms of use must not require authentication. ++* Must be specific and applicable to your offering. +* Must be hosted on your own domain. +* Must have a secure (HTTPS) link. +* Access to Terms of use must not require authentication. ### Support links -Your app's support URLs must not require authentication. For example, users must not login to contact you. +Your app's support URLs must not require authentication. For example, users must not login to contact you. Support URLs must include your contact details or a way forward for users to raise a support ticket. For example, if your support URL is hosted on GitHub, the GitHub page must be under your ownership and must include your contact details or a way forward for users to raise a support ticket. [*Mandatory Fix*] If your app supports localization, your app package must include a file with lan ## Apps linked to SaaS offer -* ISVs must support the ability for multiple users (Subscribers) in the same tenant to manage their own subscription and assign licenses to users in the tenant. -* The offer must meet all the [technical requirements](/microsoftteams/platform/concepts/deploy-and-publish/appsource/prepare/include-saas-offer?branch=pr-en-us-2759) for Teams apps linked to a SaaS offer. -* The Teams apps linked to SaaS offer must meet all the requirements defined in [1000 Software as a Service (SaaS)](/legal/marketplace/certification-policies#1000-software-as-a-service-saas). -* `subscriptionOffer` details mentioned in the manifest file must be correct. In your app manifest, add or update node `subscriptionOffer` with value `publisherId.offerId`. For example, if your publisher ID is `contoso1234` and your offer ID is `offer01`, the value that you specify in your app manifest must be `contoso1234.offer01`. +* ISVs must support the ability for multiple users (Subscribers) in the same tenant to manage their own subscription and assign licenses to users in the tenant. +* The offer must meet all the [technical requirements](/microsoftteams/platform/concepts/deploy-and-publish/appsource/prepare/include-saas-offer?branch=pr-en-us-2759) for Teams apps linked to a SaaS offer. +* The Teams apps linked to SaaS offer must meet all the requirements defined in [1000 Software as a Service (SaaS)](/legal/marketplace/certification-policies#1000-software-as-a-service-saas). +* `subscriptionOffer` details mentioned in the manifest file must be correct. In your app manifest, add or update node `subscriptionOffer` with value `publisherId.offerId`. For example, if your publisher ID is `contoso1234` and your offer ID is `offer01`, the value that you specify in your app manifest must be `contoso1234.offer01`. * Linked SaaS offer to the Teams app must be live in AppSource and preview offers aren't accepted for store approval. -### Offer metadata +### Offer metadata * Offer metadata must match across the Teams manifest, the Teams app listing in AppSource, and the SaaS offer in AppSource.-* Teams app and SaaS offer must be from the same publisher or developer. The SaaS offer referenced in the App manifest must belong to the same publisher as the Teams app is submitted to the commercial marketplace. -* As your submitted offer is a Teams app linked to SaaS offer, you must select **Additional purchases** as **Yes, my product requires purchase of a service or offers additional in-app purchases​** in Partner Center product set-up section of your offer listing. -* Plan descriptions and pricing details must provide enough information for users to clearly understand the offer listings. -* Any limitations, dependencies on additional services and exceptions to features offered must be accurately called out in plan descriptions. +* Teams app and SaaS offer must be from the same publisher or developer. The SaaS offer referenced in the App manifest must belong to the same publisher as the Teams app is submitted to the commercial marketplace. +* As your submitted offer is a Teams app linked to SaaS offer, you must select **Additional purchases** as **Yes, my product requires purchase of a service or offers additional in-app purchases​** in Partner Center product set-up section of your offer listing. +* Plan descriptions and pricing details must provide enough information for users to clearly understand the offer listings. +* Any limitations, dependencies on additional services and exceptions to features offered must be accurately called out in plan descriptions. * The Teams apps linked to SaaS offer are designed to support licenses assigned on a named, per-user basis. Sometimes, the SaaS offer is built with other method or has specialized purchase flows. You must clearly mention in the app metadata and subscription plan details about the method and purchase flows. * SaaS offer must provide messages and guidance to all users in all applicable states of purchase flow. ### SaaS offer home page and license management -* Provide introduction to subscribers on how to use the product. -* Allow the subscriber to assign licenses. -* Provide different ways to engage with support for issues, such as FAQ, knowledgebase, and email address. -* Validate users to ensure that they don’t already have license assigned through another user. -* Notify users after license assignment. -* Guide users through Teams chat bot or email, on how to add the app to Teams and get started. +* Provide introduction to subscribers on how to use the product. +* Allow the subscriber to assign licenses. +* Provide different ways to engage with support for issues, such as FAQ, knowledgebase, and email address. +* Validate users to ensure that they don’t already have license assigned through another user. +* Notify users after license assignment. +* Guide users through Teams chat bot or email, on how to add the app to Teams and get started. ### Usability and functionality * After successful purchase and assignment of licenses, you must provide the following:- * Access to users for subscribed plan features. - * Value addition and significant benefits of subscription plan to users. -* From your Teams app, provide link to the SaaS application home page for subscribers to manage the licenses in the future. + * Access to users for subscribed plan features. + * Value addition and significant benefits of subscription plan to users. +* From your Teams app, provide link to the SaaS application home page for subscribers to manage the licenses in the future. ### Configure and test SaaS application -If setup of your app for testing purposes is complex, provide an end-to-end functional document, linked SaaS offer configuration steps, and instructions for license and user management as part of your "Notes for Certification". +If setup of your app for testing purposes is complex, provide an end-to-end functional document, linked SaaS offer configuration steps, and instructions for license and user management as part of your "Notes for Certification". > [!TIP] -> You can add a video on how your app and license management works to assist the team for testing. +> You can add a video on how your app and license management works to assist the team for testing. ## Tabs+ > [!NOTE] > This section is inline with [Microsoft commercial marketplace policy number 1140.4.2](/legal/marketplace/certification-policies#114042-tabs). If your app includes a tab, ensure it adheres to these guidelines.- > [!TIP] > For more information on creating a high-quality app experience, see [Teams tab design guidelines](~/tabs/design/tabs.md). If your app includes a tab, ensure it adheres to these guidelines. :::column-end::: :::column span=""::: :::column-end::: :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: * For the best first run experience, authenticate your users during the tab setup and not after. Authentication can happen outside the tab configuration window. [*Suggested Fix*] If your app includes a tab, ensure it adheres to these guidelines. :::column-end::: :::column span=""::: :::column-end:::- * Tab configuration screen must not embed an entire website. Keep your configuration experience focused. For example, if you're building a project management app that lets users configure a project in a channel, keep the tab configuration screen focused on allowing the user to select a project from your app to configure in the channel. [*Mandatory Fix*] If your app includes a tab, ensure it adheres to these guidelines. :::column span=""::: :::column-end::: :::row-end:::- * Tab configuration screen must not ask users to embed a URL. Asking users to configure a URL during tab setup is a broken UX, user leaves tab configuration screen, acquires URL, returns to the configuration screen and inputs the URL. A preexisting Teams feature already allows users to pin a website link in the channel. If your app asks user to embed a website URL during tab configuration and the app is limited to display the entire website content in the channel tab, your app doesn't offer significant value to the user. [*Mandatory Fix*]- + :::row::: :::column span=""::: :::column-end::: If your app includes a tab, ensure it adheres to these guidelines. :::column span=""::: :::column-end::: :::row-end:::- + :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::-- ### Views * The sign in screen area must not use large logos. [*Mandatory Fix*]- + :::row::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: If your app includes a tab, ensure it adheres to these guidelines. * Tabs shouldn't have a duplicate header. Remove the duplicate logo from the iframe since the tab framework already displays the app icon and name. [*Suggested Fix*] - :::row::: + :::row::: :::column span=""::: :::column-end::: :::column span="3"::: The following are the navigation guidelines: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-components.md) and [advanced](~\concepts\design\design-teams-app-advanced-ui-components.md) Fluent UI components. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: - - :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: - + :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::column span=""::: :::column-end::: * Tabs with toolbar in left rail must leave 20px spacing from Teams left navigation. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column span=""::: :::column-end::: :::row-end::: - * The secondary and third pages in a tab must be opened in a level two (L2) and level three (L3) view in the main tab area, which is navigated via breadcrumbs or left navigation. You can also include the following components to aid tab navigation: [*Mandatory Fix*]- * Back buttons - * Page headers - * Hamburger menus + * Back buttons + * Page headers + * Hamburger menus * Tab must not have a horizontal scroll. Whiteboarding apps and other apps that require a larger canvas to allow users to collaborate without a perceived broken app experience, can use horizontal scroll depending on their business need. [*Suggested Fix*] * Deep links in tabs must not link to an external webpage but within Teams. For example, task modules or other tabs. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column span=""::: :::column-end::: :::row-end:::- * Tabs must not allow users to navigate outside Teams for the core app experience. Tabs can redirect outside Teams for non-core workflows. For example, to raise a support ticket. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::column span=""::: :::column-end:::-- ### Usability * Tabs must provide value beyond hosting an existing website. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column span=""::: :::column-end::: :::row-end:::- + :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::column span=""::: :::column-end::: * Content must not truncate or overlap within the tab.- + :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column-end::: :::row-end::: - * Users must be able to undo their last action in the tab. * Tabs in a personal context may aggregate content from shared instances of the app. For example, a project management app with a configurable tab that lets channel members comment on the project on Kanban cards, must aggregate this content and display in the personal app. [*Suggested Fix*] * Tabs must be responsive to Teams themes. When a user changes the theme, the app's theme must reflect the selection. :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column span=""::: :::column-end::: :::row-end:::- + :::column span=""::: :::column-end::: :::column span="3"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone :::column span=""::: :::column-end::: :::row-end:::- * Tabs must use Teams-styled components such as, Teams fonts, type ramps, color palettes, grid system, motion, tone of voice, and so on, whenever possible. For more information, see [tab design guidelines](/microsoftteams/platform/tabs/design/tabs). [*Suggested Fix*] :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: * If your app functionality requires changes in settings, include a **Settings** tab. [*Suggested Fix*] * Tabs must follow Teams interaction design such as, in-page navigation, position and use of dialogs, information hierarchies, and so on. For more information, see [Microsoft Teams Fluent UI kit](~/concepts/design/design-teams-app-basic-ui-components.md) Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone * If your app requires provision of a personal scope view for the user to enhance efficiency or workplace productivity, use filtered views, deep links to personal apps, or navigate to L2 or L3 views within the configurable tab and keep the landing page contextually the same for all the users. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: - * Configurable tabs must have focused functionality. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end:::- * Tab experiences must be fully responsive on mobile (Android and iOS). > [!TIP]+> > * Include a personal bot alongside a personal tab. > * Allow users to share content from their personal tab. Analyzing user input and predicting user intent is difficult. Bot commands provi * Listing supported bot commands in your app configurations is highly recommended. These commands display in the compose box when a user tries to message your bot. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- * All commands that your bot supports must work correctly, including generic commands such as **Hi**, **Hello**, and **Help**. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- * Bot commands must not lead a user to a dead end, the commands must always provide a way forward. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- > [!TIP] > For personal bots, include a **Help** tab that further describes what your bot can do. ### Bot welcome messages - * If the app has a complex configuration flow (requires an enterprise license or lacks an intuitive sign up flow), then bots in such apps must always send a welcome message during the first run. For best experience, the welcome message must include the value offered by the bot to users, who installed the bot in channel, how to configure the bot and briefly describe all supported bot commands. You can display the welcome message using an Adaptive Card with buttons for better usability. For more information, see [how to trigger a bot welcome message](~/bots/how-to/conversations/send-proactive-messages.md). For apps without a complex configuration flow, you can choose to trigger a welcome message during the bot first run experience. However, if a welcome message is triggered, it must follow the welcome message guidelines. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::-- * Bot welcome messages in channels and chats are optional during first run, especially if the bot is available for personal use and performs similar actions. Your bot must not send welcome messages to users individually (it's considered [spamming](#bot-message-spamming)). The message must also mention the person who added the bot. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- > [!TIP] > In welcome messages to individual users, a carousel tour can provide an effective overview of your bot and any other app features to encourage users to try bot commands. For example, **Create a task**. Bots must not spam users by sending multiple messages in short duration. * **Bot messages in channels and chats**: Don't spam users by creating separate posts. Create a single post with replies in the same thread. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end:::- --* **Bot messages in personal apps**: - * Don't send multiple messages in quick duration. - * Send one message with complete information. +* **Bot messages in personal apps**: + * Don't send multiple messages in quick duration. + * Send one message with complete information. * Avoid multi-turn conversations to complete a single repetitive workflow.- * Use a form (or task module) to collect all inputs from a user at one time. + * Use a form (or task module) to collect all inputs from a user at one time. * NLP based conversational chatbots can use multi turn conversation to make the discussion more engaging and complete a workflow. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end:::- + :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: Bots must not spam users by sending multiple messages in short duration. Bot notifications must include content relevant for the scope you define for the bot (team, chat, or personal). :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::-- ### Bots and Adaptive Cards For more information about cards, see: Bot experience must be fully responsive on mobile. Bot responses must provide a way forward where applicable. Bot musts be responsive and fail with a graceful error message for failures. Bot messages sent in the personal scope to user's base on triggers in a collaborative scope must provide contextual information (including the message’s origin). -### Notification only Bots +### Notification only Bots Apps that consist of notification only bots provide user value by triggering user notifications based on certain triggers or events in the core app or backend. For example, a new sales lead or prospect is added for the sales team to follow up on. A notification provides value in Teams if:-1. Posted card or text provides adequate details requiring no further user action. -1. Posted card or text provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams. ++1. Posted card or text provides adequate details requiring no further user action. +1. Posted card or text provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams. Apps that provide only notifications with content such as **You have a new notification, click to view**, and require user to navigate outside of Teams for everything else don't provide significant value within Teams. :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: :::column span=""::: :::column-end::: :::column span="3":::-  +  :::column-end::: :::column span=""::: :::column-end:::-- > [!TIP] > Preview information and provide basic inline user actions in the posted card so that the user is not required to navigate outside Teams for all actions (irrespective of complexity).- + ## Messaging extensions > [!NOTE] Action-based messaging extensions must do the following: * Allow users to trigger actions on a message without completing intermediate steps, such as sign in. :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column-end::: :::column span=""::: :::column-end::: - * Pass the message context to the next work state. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column span=""::: :::column-end::: :::row-end:::- * Incorporate the host app name instead of a generic verb for action commands triggered from a chat message, channel post, or call to action within apps. For example, use **Start a Skype Meeting** for **Start Meeting**, **Upload file to DocuSign** for **Upload file**, and so on. [*Suggested Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column-end::: :::row-end::: :::column span=""::: :::column-end::: :::column span="3"::: Action-based messaging extensions must do the following: :::column-end::: :::column span=""::: :::column-end:::-- ### Preview links (link unfurling) Messaging extensions must preview recognized links in the Teams compose box. Don * Search based messaging extensions must provide text that helps the users to search effectively. [*Mandatory Fix*] :::column span=""::: :::column-end::: :::column span="3"::: Messaging extensions must preview recognized links in the Teams compose box. Don :::column-end::: :::column span=""::: :::column-end:::- * @mention executables must be clear, easy to understand, and readable.- + :::column span=""::: :::column-end::: :::column span="3"::: Messaging extensions must preview recognized links in the Teams compose box. Don :::column-end::: :::column span=""::: :::column-end:::- ### Search based messaging extension only apps Messaging extensions must preview recognized links in the Teams compose box. Don Apps that consist of search-based messaging extension provide user value by sharing cards that allow for contextual conversations without context switching. To pass validation for a search-based message extension only app, the following are required as baseline to ensure the user experience isn't broken. A card shared via a messaging extension provides value in Teams if:-1. Posted card provides adequate details requiring no further user action. -1. Posted card provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams. +1. Posted card provides adequate details requiring no further user action. +1. Posted card provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams. + :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end:::-- Link unfurling only apps don't provide significant value within Teams. Consider building additional workflows in your app, if your app only supports link unfurling and has no other functionality. A task module must include an icon and the short name of the app it's associated For more information, see [Teams task module design guidelines](~\task-modules-and-cards\task-modules\design-teams-task-modules.md). :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end::: :::row-end::: :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end:::-- > [!TIP] > For more information on creating a high-quality app experience, see [Teams task module design guidelines](~/task-modules-and-cards/task-modules/design-teams-task-modules.md). For more information, see [Teams task module design guidelines](~\task-modules-a > [!NOTE] > This section is inline with [Microsoft commercial marketplace policy number 1140.4.6](/legal/marketplace/certification-policies#114046-meeting-extensions).-- > [!TIP] > For more information on creating a high-quality app experience, see the [Teams meeting extension design guidelines](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md). Use the following guidelines for meeting extensions: * With the in-meeting app experience, you can engage meeting participants during the meeting and enhance the meeting experience for all the attendees. Attendees must not be taken outside of the Teams meeting for completing core user workflows of your app. -* Your app must offer value beyond providing custom Together Mode scenes in Teams. +* Your app must offer value beyond providing custom Together Mode scenes in Teams. * Shared meeting stage feature can only be launched through the Teams desktop app. However, the shared meeting stage consumption experience must be usable and not broken when viewed on mobile devices. Use the following guidelines for meeting extensions: * Apps must only use a dark theme during meetings. For more information, see [Teams design guidelines](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md#theming). * A tooltip must display the app name when hovering over the app icon during meetings. - :::row::: + :::row::: :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end:::- * Messaging extensions must function the same during meetings as they do outside meetings. ### In-meeting tabs -* Must be responsive. +* Must be responsive. * Must maintain padding and component sizes. * Must have a back button if there's more than one layer of navigation. :::column span=""::: :::column-end:::- :::column span="3"::: -  + :::column span="3"::: +  :::column-end::: :::column span=""::: :::column-end:::- + :::column span=""::: :::column-end:::- :::column span="3"::: -  + :::column span="3"::: +  :::column-end::: :::column span=""::: :::column-end:::- * Must not include more than one close button. It may confuse users since there's already a built-in header button to dismiss the tab. * Must not have horizontal scrolling. Use the following guidelines for meeting extensions: :::row::: :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: If your app uses the [activity feed APIs provided by Microsoft Graph](/graph/tea > [!NOTE] > This section is inline with [Microsoft commercial marketplace policy number 1140.6](/legal/marketplace/certification-policies#11406-publisher-attestation). -The Microsoft 365 App Compliance Program is intended to help organizations assess and manage risk by evaluating security and compliance information about your app. If you're publishing an app to the Teams store, you must complete the following tiers of the program: +The Microsoft 365 App Compliance Program is intended to help organizations assess and manage risk by evaluating security and compliance information about your app. If you're publishing an app to the Teams store, you must complete the following tiers of the program: - * **Publisher Verification**: Helps admins and end users understand the authenticity of app developers integrating with the Microsoft identity platform. When completed, a blue **verified** badge displays on the Azure Active Directory consent dialog and other screens. For more information, see [Mark your app as publisher verified](/azure/active-directory/develop/mark-app-as-publisher-verified). +* **Publisher Verification**: Helps admins and end users understand the authenticity of app developers integrating with the Microsoft identity platform. When completed, a blue **verified** badge displays on the Azure Active Directory consent dialog and other screens. For more information, see [Mark your app as publisher verified](/azure/active-directory/develop/mark-app-as-publisher-verified). :::column span=""::: :::column-end:::- :::column span="3"::: + :::column span="3":::  :::column-end::: :::column span=""::: :::column-end::: :::row-end:::- - * **Publisher Attestation**: A process in which you share general, data handling, and security and compliance information to help potential customers make informed decisions about using your app. +* **Publisher Attestation**: A process in which you share general, data handling, and security and compliance information to help potential customers make informed decisions about using your app. -> [!NOTE] +> [!NOTE] > If you're submitting an app that hasn't been listed previously, you can't officially complete Publisher Attestation until your app is in the Teams store. If you're updating a listed app, complete Publisher Attestation before you submit the latest version of the app. -## Advertising +## Advertising > [!NOTE] > This section is in line with [Microsoft commercial marketplace policy number 1140.7](/legal/marketplace/certification-policies#11407-advertising). |
| platform | Publish | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/publish.md | When you feel your app is production ready, you can begin the process of getting :::row::: :::column span="":::- + :::column-end::: :::column span="3"::: :::image type="content" source="../../../assets/images/submission/teams-app-store-publish-process.png" alt-text="Teams app store publishing process" lightbox="../../../assets/images/submission/teams-app-store-publish-process.png"::: :::column-end::: :::column span="":::- + :::column-end::: :::row-end::: When you feel your app is production ready, you can begin the process of getting * Summary of all issues - * Details of failures or issues with policy links and categorization: + * Details of failures or issues with policy links and categorization: * Mandatory fix: These issues must be fixed prior to app approval. |
| platform | Map Use Cases | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/map-use-cases.md | Apps to interact with your data | Create embedded web experiences to view, work with and share data. | Tabs | | Push data and send data out of the Teams client. | Connectors and webhooks| | Interactive modal forms from wherever you need them to collect or display information. | Task modules |-| + </details> </br> <details> A quick way to start a process or workflow in an external system. | Open messages from a tab, a bot, or a messaging extension to collect information before initiating a workflow. | Task modules | | Interact with your users through text and rich cards. | Conversational bots | | A good choice for a simple back-and-forth interaction when you don't need to build an entire conversational bot. | Outgoing webhooks |-| + </details> </br> <details> Send asynchronous notifications and alerts to your users in Teams. | | | | Send proactive messages to groups, channels, or individual users. | Conversational bots | | Permit a channel to subscribe to receive messages. A connector lets users tailor the subscription with a configuration page. | Connectors and incoming webhooks |-| + </details> </br> <details> Connect with your users and resolve their queries | | | | Natural language processing, AI, machine learning, and all the buzzwords. Use a bot powered by the intelligent cloud to connect your users to the answers they need. | Conversational bots | | Embed your existing web portal in Teams or create a Teams-specific version for added functionality. | Tabs |-| + </details> ## App capabilities mapped to features |
| platform | Planning Checklist | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/planning-checklist.md | Here's a checklist of questions to consider when you plan your app. Use it as a | 3 | Do they use teams and channels or primarily group chats? | | 4 | How technically sophisticated are your primary users? | | 5 | Do you need a thorough onboarding experience or a few pointers might do? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 1 | What are the pros and cons of the current state system used by your users? | | 2 | What are the issues faced by your users that you want to address? | | 3 | What features or capabilities your users like and love in their current way of doing the process? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 2 | Who owns the back end data - In-house or third-party? | | 3 | Are there firewalls that impact the functioning of the app? | | 4 | Are there APIs to access the data you need for functioning of your app? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 2 | Is there PII involved? | | 3 | Will the interactions also be based on the user roles? | | 4 | Will external users access the app? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 2 | If you are sharing cards with a messaging extension, does it make sense to add a small link to a learn more page to help introduce users to what else your app can do? | | 3 | Do you expect most people to already have some context of what your app is for, or to have already used your services in another context? | | 4 | Are they coming to your app with no prior knowledge? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 1 | Are there one-on-one interactions with the app required for privacy or other reasons? For example, checking leave balance or other private information. | | 2 | Is there going to be collaboration among users who might not have any common Teams? For example, finding upcoming organization wide events in a company. | | 3 | Are there any personalized notifications or messages that will need to be sent to a user throughout the Teams app experience? |-| + </details> <br> <details> Here's a checklist of questions to consider when you plan your app. Use it as a | 1 | Is the information presented by the app, either in tab or through a bot, relevant and useful for most of the members in a Team? For example, Scrum app. | | 2 | Could the appΓÇÖs context change depending on the team in which it is added to? For example, PlannerΓÇÖs tasks are different in different teams. | | 3 | Is it possible that all members in a persona who need to collaborate are a part of a single team? For example, agents working on a ticket. |-| + </details> <br> <details> |
| platform | Understand Use Cases | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/understand-use-cases.md | The [Microsoft Graph API for Teams](/graph/teams-concept-overview) provides acce > [!NOTE] > Teams store has evolved:-> +> > Previously, the LOB apps were updated by selecting the ellipses on the tile. With the updated Teams store experience, you can now update the LOB apps by logging in to the [Teams Admin Centre](https://admin.teams.microsoft.com). ### App scope |
| platform | Native Device Permissions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/native-device-permissions.md | +> > * To integrate media capabilities within your Microsoft Teams mobile app, see [Integrate media capabilities](mobile-camera-image-permissions.md). > * To integrate QR or barcode scanner capability within your Microsoft Teams mobile app, see [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md). > * To integrate location capabilities within your Microsoft Teams mobile app, see [Integrate location capabilities](location-capability.md). By accessing the device capabilities, you can build richer experiences on the Te * Use the location information of the user to display relevant information. > [!NOTE]-> * Currently, Teams doesn't support device permissions for multi-window apps, tabs, and the meeting side panel. +> +> * Currently, Teams doesn't support device permissions for multi-window apps, tabs, and the meeting side panel. > * Device permissions are different in the browser. For more information, see [browser device permissions](browser-device-permissions.md). ## Access device permissions navigator.permissions.query({name:'geolocation'}).then(function(result) { Leverage appropriate HTML5 or Teams API, to display a prompt for getting consent to access device permissions. > [!IMPORTANT]+> > * Support for `camera`, `gallery`, and `microphone` is enabled through [**selectMedia API**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true). Use [**captureImage API**](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#captureimage--error--sdkerror--files--file-void-&preserve-view=true) for a single image capture. > * Support for `location` is enabled through [**getLocation API**](/javascript/api/@microsoft/teams-js/microsoftteams.location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true). You must use this `getLocation API` for location, as HTML5 geolocation API is currently not fully supported on Teams desktop client. For example:- * To prompt the user to access their location you must call `getCurrentPosition()`: ++* To prompt the user to access their location you must call `getCurrentPosition()`: ```JavaScript navigator.geolocation.getCurrentPosition (function (position) { /*... */ }); ``` - * To prompt the user to access their camera on desktop or web you must call `getUserMedia()`: +* To prompt the user to access their camera on desktop or web you must call `getUserMedia()`: ```JavaScript navigator.mediaDevices.getUserMedia({ audio: true, video: true }); ``` - * To capture the image on mobile, Teams mobile asks for permission when you call `captureImage()`: +* To capture the image on mobile, Teams mobile asks for permission when you call `captureImage()`: ```JavaScript function captureImage() { For example: } ``` - * Notifications will prompt the user when you call `requestPermission()`: +* Notifications will prompt the user when you call `requestPermission()`: ```JavaScript Notification.requestPermission(function(result) { /* ... */ }); For example: * To prompt the user to share location on the map interface, Teams mobile asks permission when you call `getLocation()`: - ```JavaScript + ```JavaScript function getLocation() { microsoftTeams.location.getLocation({ allowChooseLocation: true, showMap: true }, (error: microsoftTeams.SdkError, location: microsoftTeams.location.Location) => { let currentLocation = JSON.stringify(location); |
| platform | Extensibility Points | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/extensibility-points.md | - Title: Entry points for Teams apps- -description: Describes entry points for your app, such as team, channel, and chat in personal and shared app experience -----# Entry points for Teams apps --The Teams platform provides a flexible set of entry points, such as team, channel, and chat, where people can discover and use your app. Your app can be as simple as embedding existing web content in a tab or a multi-faceted app that users interact with across several contexts. -The most successful apps are native to Teams, so choose your app's entry points carefully. --## Shared app experiences --Team, channel, and chat are collaboration spaces. Apps in these contexts are available to everyone in that space. Collaboration spaces typically focus on additional workflows or unlocking new social interactions. --The following list shows how Teams app capabilities are commonly used in collaborative contexts: --* [**Tabs**](~/tabs/what-are-tabs.md) provide a full-screen embedded web experience configured for the team, channel, or group chat. All members interact with the same web-based content, so a stateless single-page app experience is typical. --* [**Messaging extensions**](~/messaging-extensions/what-are-messaging-extensions.md) are shortcuts for inserting external content into a conversation or taking action on messages without leaving Teams. [Link unfurling](~/messaging-extensions/how-to/link-unfurling.md) provides rich content when sharing content from a common URL. --* [**Bots**](~/bots/what-are-bots.md) interact with members of the conversation through chat and responding to events, such as adding a new member or renaming a channel. - > [!NOTE] - > Conversations with a bot in these contexts are visible to all members of the team, channel, or group, so bot conversations must be relevant to everyone. --* [**Webhooks and connectors**](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md) allow an external service to post messages into a conversation and users to send messages to a service. --* [**Microsoft Graph REST API**](/graph/teams-concept-overview) for getting data about teams, channels, and group chats to help automate and manage Teams processes. --## Personal app experiences --[Personal apps](../concepts/design/personal-apps.md) focus on interactions with a single user. The experience in this context is unique to each user. --The following list shows how Teams capabilities are commonly used in personal contexts: --* [**Bots**](~/bots/what-are-bots.md) have one-on-one conversations with a user. Bots that require multi-turn conversations or provide notifications relevant only to a specific user are best suited in personal apps. --* [**Tabs**](~/tabs/what-are-tabs.md) provide a full-screen embedded web experience that is meaningful to the user looking at it. --## Next step --> [!div class="nextstepaction"] -> [Understand use cases](../concepts/design/understand-use-cases.md) --## See also --* [Teams app design guidelines](../concepts/design/design-teams-app-overview.md) <br> -* [Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md) |
| platform | Feedback | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/feedback.md | Submit issues and ask general questions related to SDK and samples using the com | **Community channel** | **Contact** | |:-|:|+| **Platform outages** | Check if your issue is already raised on [Teams platform outages](https://aka.ms/TeamsPlatform/Outages) before you raise one. | | **Samples** | Submit issues with samples to respective [Microsoft Teams Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples) repository.| | **Teams Toolkit or TeamsFx SDK and CLI issues** | <ul><li> :::image type="icon" source="assets/icons/GitHub-icon.png" border="false"::: [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 using GitHub issues for queries and to receive community help. <li> :::image type="icon" source="assets/icons/stack-overflow-icon.png" border="false"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/teams-toolkit): Use the `teams-toolkit` tag to post questions. Follow the Stack Overflow guidelines such as provide a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. </li> </ul> | | **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` and `microsoft-teams` tag. | |
| platform | Get Started Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/get-started-overview.md | If you are already familiar with Yeoman workflow, you may prefer using [YoTeams > [!NOTE] > If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. - ## Build your first Teams app Now, let's build your first Teams app. But first, pick your language (or framework) and prepare your development environment. > [!div class="nextstepaction"] > [Build a Teams app with JavaScript using React](../sbs-gs-javascript.yml)- > [!div class="nextstepaction"] > [Build a Teams app with SPFx](../sbs-gs-spfx.yml)- > [!div class="nextstepaction"] > [Build a Teams app with C# or .NET](../sbs-gs-csharp.yml)- > [!div class="nextstepaction"] > [Build a Teams app with Node.js](../sbs-gs-nodejs.yml) |
| platform | Glossary | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/glossary.md | Common terms and definitions used in Teams Developer Documentation. | [Azure Active Directory](../tabs/how-to/authentication/auth-tab-aad.md) | MicrosoftΓÇÖs cloud-based identity and access management service. It helps authenticated users access internal and external Azure resources. | | [Authentication](../concepts/authentication/authentication.md) | A process to validate user access for your app's usage. It can be done using Microsoft Graph APIs or web-based authentication. <br> **See also**: [Identity providers](#i); [SSO](#s) | | [Authentication flow](../concepts/authentication/authentication.md#web-based-authentication-flow) | In Teams, there are two authentication flows to authenticate a user for using an app: web-based authentication and OAuthPrompt flow. |-| ## B Common terms and definitions used in Teams Developer Documentation. | [Bot](../bots/what-are-bots.md) | A bot is an app that executes programmed repetitive tasks. <br> **See also**: [Conversational bot](#c); [Chat bot](#c) | | [Bot Emulator](../bots/how-to/debug/locally-with-an-ide.md#use-the-bot-emulator) | A desktop application that lets you test and debug bots, either locally or remotely. | | [Bot Framework](../bots/bot-features.md) | A rich SDK used to create bots using C#, Java, Python, and JavaScript. If you have a bot that is based on the Bot Framework, you can modify it to work in Teams. |-| ## C Common terms and definitions used in Teams Developer Documentation. | [Connector](../webhooks-and-connectors/what-are-webhooks-and-connectors.md) | It lets users subscribe to receive notifications and messages from the web services. Connectors expose the HTTPS endpoint for the service to post messages to Teams channels, typically in the form of cards. <br> **See also**: [Webhook](#w) | | Conversation | A series of messages sent between your Microsoft Teams app (tab or bot) and one or more users. A conversation can have three scopes: channel, personal, and group chat. <br>**See also**: [One-on-one chat](#o); [Group chat](#g); [Channel](#c) | | [Conversational bot](../bots/how-to/conversations/conversation-messages.md) | It lets a user interact with your web service using text, interactive cards, and task modules. <br>**See also** [Chat bot](#c) |-| - ## D Common terms and definitions used in Teams Developer Documentation. | [Dev environment](../toolkit/teamsfx-multi-env.md#create-a-new-environment) | A type of development environment that Teams Toolkit creates by default. It represents remote or cloud environment configurations. A project can have multiple remote environments. You can add more dev environments to your project using Teams Toolkit. <br>**See also** [Environment](#e); [Local environment](#l) | | [DevTools](../tabs/how-to/developer-tools.md) | Browser's Devtools are used to view console logs, view or modify runtime network requests, add breakpoints to code (JavaScript) and perform interactive debugging for a Teams app. The feature is only available for desktop and Android clients after the Developer Preview has been enabled. | | [Dynamic search](../task-modules-and-cards/cards/dynamic-search.md#dynamic-typeahead-search) | A search feature for Adaptive Cards that is useful to search and select data from large data sets. It helps to filter out the choices as the user enters the search string. <br>**See also**: [Static search](#s) |-| - ## E Common terms and definitions used in Teams Developer Documentation. | [E5 developer account](../toolkit/accounts.md) | E5 developer subscription for building apps to extend Microsoft 365. It includes 25 user licenses, including the administrator, for development purposes only. <br>**See also**: [Microsoft 365 account](#m) | | [Entry point](../concepts/app-fundamentals-overview.md) | An access point, such as team, channel, and chat, for a Teams app where users can use your app. | | [Environment](../toolkit/teamsfx-multi-env.md) | A feature in Teams Toolkit that lets you create and use multiple development environments for your app project. There are two dev environments that Teams Toolkit creates by default, local environment and dev environment. <br>**See also**: [Local environment](#l); [Dev environment](#d) |-| - ## F | Term | Definition | | | | | [Federated user](../apps-in-teams-meetings/meeting-app-extensibility.md#user-types-in-a-meeting) | A type of user in a Teams app meeting who is external and is invited to the meeting. This user has valid credentials that are federated by authorized Teams partners. They're also called External users. <br>**See also**: [Anonymous user](#a) |-| ## G Common terms and definitions used in Teams Developer Documentation. | | | | [Graph API](../graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md) | A RESTful web API for Microsoft Graph that enables you to access Microsoft Cloud service resources. <br>**See also**: [Microsoft Graph Explorer](#m) | | [Group chat](../resources/bot-v3/bot-conversations/bots-conversations.md) | A chat feature where a user is able to chat with a bot in a group setting by using @mention to invoke the bot. <br>**See also**: [One-on-one chat](#o); [Chat bot](#c) |-| - ## I Common terms and definitions used in Teams Developer Documentation. | [Identity provider](../concepts/authentication/configure-identity-provider.md) | An entity that stores and provides credentials to the user. Users can register themselves with an identity provider as well. <br>**See also**: [Authentication](#a) | | [Incoming Webhook](../webhooks-and-connectors/how-to/add-incoming-webhook.md) | It lets an external app share content in Teams channels. These webhooks are used as tracking and notifying tools. <br>**See also**: [Webhook](#w); [Outgoing Webhook](#o) | | [In-meeting app experience](../apps-in-teams-meetings/meeting-app-extensibility.md#in-meeting-app-experience) | A stage of Teams meeting lifecycle. With the in-meeting app experience, you can engage participants during the meeting by using apps and the in-meeting dialog box. <br>**See also**: [Meeting lifecycle](#m) |-| - ## L Common terms and definitions used in Teams Developer Documentation. | [Local workbench](../sbs-gs-spfx.yml) | The default option to run and debug a Teams app in Visual Studio Code that is created using SPFx. <br>**See also**: [Workbench](#w); [Teams workbench](#t) | | [Location capability](../concepts/device-capabilities/location-capability.md) | A device capability that you can integrate with your app to know the geographical location of the app user for an enhanced collaborative experience. This feature is currently available only for Teams mobile clients only. <br>**See also**: [Capability](#c); [Media capability](#m); [Device Capability](#d); [Teams Mobile](#t) | | [Low code apps](../samples/teams-low-code-solutions.md) | A custom Teams app built from scratch using Microsoft Power Platform that requires little or no coding, and can be developed and deployed quickly. |-| - ## M Common terms and definitions used in Teams Developer Documentation. | [Microsoft Teams Platform](../concepts/app-fundamentals-overview.md) | The Microsoft Teams developer platform makes it easy for developers to integrate their own apps and services with Teams. | | [Microsoft Teams UI Library](../concepts/design/design-teams-app-ui-templates.md#microsoft-teams-ui-library) | Microsoft Teams UI Library helps you view and test individual Teams UI templates and related components in your browser. | | [Microsoft Teams UI Toolkit](../concepts/design/design-teams-app-ui-templates.md#microsoft-teams-ui-library) | Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. |-| - ## O Common terms and definitions used in Teams Developer Documentation. | [Outgoing Webhook](../webhooks-and-connectors/how-to/add-outgoing-webhook.md) | It acts as a bot and search for messages in channels using @mention. It sends notifications to external web services and responds with rich messages, which include cards and images. <br>**See also**: [Webhook](#w); [Incoming Webhook](#i) | | [Outlook channel](../m365-apps/extend-m365-teams-message-extension.md#add-an-outlook-channel-for-your-bot) | A feature of Teams messaging extension app that lets the users interact with it from Microsoft Outlook. | | [One-on-one chat](../resources/bot-v3/bot-conversations/bots-conv-personal.md) | A type of chat between a Teams personal bot app and a single user. <br>**See also**: [Group chat](#g); [Chat bot](#c) |-| - ## P Common terms and definitions used in Teams Developer Documentation. | [Power Virtual Agents](../bots/how-to/add-power-virtual-agents-bot-to-teams.md) | A no-code, guided graphical interface solution that empowers every member of your team to create rich, conversational chat bots that easily integrate with the Teams platform. | | [Proactive messages](../bots/how-to/conversations/send-proactive-messages.md) | A message sent by a bot that isn't in response to a request from a user, such as welcome messages, notifications, scheduled messages. | | [Provision](../toolkit/provision.md) | A process that creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. It's a prerequisite to deployment. <br>**See also**: [Deploy](#d) |-| - ## R Common terms and definitions used in Teams Developer Documentation. | [Rate-limiting](../bots/how-to/rate-limit.md) | A method to limit messages to a certain maximum frequency to ensure that number of messages are sufficient and don't appear as spam. | | [Role-based views](../task-modules-and-cards/cards/universal-actions-for-adaptive-cards/user-specific-views.md) | A feature of tabs where the tab experience may be different for users depending on their permission level. | | [RSC permission](../graph-api/rsc/resource-specific-consent.md) | Resource-specific consent (RSC) permission feature is needed by team owners to let a bot app receive messages across channels in a team without being @mentioned. |-| - ## S Common terms and definitions used in Teams Developer Documentation. | [Standalone app](../samples/integrating-web-apps.md) | A single-page or large, and complex app. The user can use some aspects of it in Teams. <br>**See also**: [Collaboration aap](#c) | | [Static search](../task-modules-and-cards/cards/dynamic-search.md) | A method of typeahead search that lets users search from pre-specified values in the Adaptive Cards payload. <br>**See also**: [Dynamic search](#d) | | [Store validation guidelines](../concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) | A set of Teams-specific guidelines for validating an app before it can be submitted to Teams store. <br>**See also**: [Teams store](#t) |-| - ## T Common terms and definitions used in Teams Developer Documentation. | [Teams Mobile](../concepts/design/plan-responsive-tabs-for-teams-mobile.md) | Microsoft Teams available as a mobile app. | | [Teams store](../concepts/deploy-and-publish/appsource/publish.md) | A store landing page that brings apps to users in a single place. The apps are categorized by usage, industry, and more. An app must follow Store validation guidelines and obtain an approval before it's available to users via the Teams store. <br>**See also**: [Store validation guidelines](#s) | | [Teams workbench](../sbs-gs-spfx.yml) | A workbench in Visual Studio Code used at build for Teams apps created using SPFx and Teams Toolkit. <br>**See also**: [Workbench](#w); [Local workbench](#l) |-| - ## U Common terms and definitions used in Teams Developer Documentation. | [UI components](../concepts/design/design-teams-app-basic-ui-components.md) | For Teams app development, you can use Fluent UI components to build your app from scratch. | | [UI templates](../concepts/design/design-teams-app-ui-templates.md) | For Teams app development, you can use Teams UI templates to design your apps quickly. | | [Universal Actions for Adaptive Cards](../task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) | A way to implement Adaptive Cards across platforms and applications. It uses a bot as a common backend for handling actions. |-| - ## V | Term | Definition | | | | | [Virtual Assistant](../samples/virtual-assistant.md) | A Microsoft open-source template that enables you to create a robust conversational solution. |-| - ## W Common terms and definitions used in Teams Developer Documentation. | [Web part](../sbs-gs-spfx.yml) | A UI component used to build a page or a site in a Teams app created using Visual Studio Code and SharePoint Framework. <br>**See also**: [SPFx](#s) | | [Workbench](../sbs-gs-spfx.yml) | Overall Visual Studio Code UI that encompasses UI components, such as title bar, panel, and more. <br>**See also**: [Local workbench](#l); [Teams workbench](#t) | - ## Y | Term | Definition | | | | | [YoTeams](../get-started/get-started-overview.md) | A development toolkit for building Microsoft Teams applications based on TypeScript and node.js. |-| |
| platform | Import External Messages To Teams | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/graph-api/import-messages/import-external-messages-to-teams.md | HTTP/1.1 202 Accepted ```http 400 Bad Request ```+ You can receive the error message in the following scenarios: * If `createdDateTime` is set for future. You can receive the error message in the following scenarios: After the team and channel have been created, you can begin sending back-in-time messages using the `createdDateTime` and `from` keys in the request body. > [!NOTE]+> > * Messages imported with `createdDateTime` earlier than the message thread `createdDateTime` is not supported. > * `createdDateTime` must be unique across messages in the same thread. > * `createdDateTime` supports timestamps with milliseconds precision. For example, if the incoming request message has the value of `createdDateTime` set as *2020-09-16T05:50:31.0025302Z*, then it would be converted to *2020-09-16T05:50:31.002Z* when the message is ingested. HTTP/1.1 200 OK #### Request (POST a message with inline image) > [!NOTE]+> > * There are no special permission scopes in this scenario since the request is part of `chatMessage`. > * The scopes for `chatMessage` apply here. The following table provides the content scope: ||Quotes| ||Cross posts between channels| - ## See also [Microsoft Graph and Teams integration](/graph/teams-concept-overview) |
| platform | Graph Proactive Bots And Messages | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md | server.get('/api/notify', async (req, res) => { res.end(); }); ```+ ## Code sample |
| platform | Resource Specific Consent | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/graph-api/rsc/resource-specific-consent.md | keywords: teams authorization OAuth SSO Azure AD rsc Graph > [!NOTE] > Resource-specific consent for chat scope is available in [public developer preview](../../resources/dev-preview/developer-preview-intro.md) only. -Resource-specific consent (RSC) is a Microsoft Teams and Microsoft Graph API integration that enables your app to use API endpoints to manage specific resources, either teams or chats, within an organization. The RSC permissions model enables *team owners* and *chat owners* to grant consent for an application to access and modify a team's data and a chat's data, respectively. +Resource-specific consent (RSC) is a Microsoft Teams and Microsoft Graph API integration that enables your app to use API endpoints to manage specific resources, either teams or chats, within an organization. The RSC permissions model enables *team owners* and *chat owners* to grant consent for an application to access and modify a team's data and a chat's data, respectively. **Note:** If a chat has a meeting or a call associated with it, then the relevant RSC permissions apply to those resources as well. To make Graph API calls, you must obtain an access token for your app from the i You must have the following values from the Azure AD registration process to retrieve an access token from the identity platform: -- The **Application ID** assigned by the app registration portal. If your app supports single sign-on (SSO) you must use the same Application ID for your app and SSO.-- The **Client secret/password** or a public or private key pair that is **Certificate**. This is not required for native apps.-- A **Redirect URI** or reply URL for your app to receive responses from Azure AD.+* The **Application ID** assigned by the app registration portal. If your app supports single sign-on (SSO) you must use the same Application ID for your app and SSO. +* The **Client secret/password** or a public or private key pair that is **Certificate**. This is not required for native apps. +* A **Redirect URI** or reply URL for your app to receive responses from Azure AD. For more information, see [get access on behalf of a user](/graph/auth-v2-user?view=graph-rest-1.0#3-get-a-token&preserve-view=true) and [get access without a user](/graph/auth-v2-service). ## Update your Teams app manifest -The RSC permissions are declared in your app manifest JSON file. +The RSC permissions are declared in your app manifest JSON file. > [!IMPORTANT] > Non-RSC permissions are stored in the Azure portal. Do not add them to the app manifest. Example for RSC in a chat > [!NOTE] > If the app is meant to support installation in both team and chat scopes, then both team and chat permissions can be specified in the same manifest under `authorization`.- + <br> </details> Example for RSC in a chat > [!NOTE] > If the app is meant to support installation in both team and chat scopes, then both team and chat permissions can be specified in the same manifest under `applicationPermissions`.- + <br> </details> For more information on how to get details of apps installed in a specific chat, | Resource-Specific Consent (RSC) | Use RSC to call Graph APIs. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-rsc/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-rsc/nodeJs)| ## See also- + * [Test resource-specific consent permissions in Teams](test-resource-specific-consent.md) * [Resource-specific consent in Microsoft Teams for admins](/MicrosoftTeams/resource-specific-consent) |
| platform | Using Teams Client Sdk Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/using-teams-client-sdk-preview.md | There are two significant changes in the TeamsJS SDK v2 Preview that your code w * [**Callback functions now return Promise objects.**](#callbacks-converted-to-promises) All existing functions with a callback parameter have been modernized to return a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object for improved handling of asynchronous operations and code readability. +* [**APIs are now organized into *capabilities*.**](#apis-organized-into-capabilities) You can think of capabilities as logical groupings of APIs that provide similar functionality, such as `authentication`, `calendar`, `mail`, `monetization`, `meeting`, and `sharing`. You can use the [Teams Toolkit extension](https://aka.ms/teams-toolkit) for Microsoft Visual Studio Code to simplify the update process for your Teams app, as described in the following section. > [!NOTE] > Enabling an existing Teams app to run in Outlook and Office requires both:+> > 1. Dependency on the `@microsoft/teams-js@2.0.0-beta.1` or later, and > 2. Modifying existing application code according to the required changes described in this document. >-> If you reference `@microsoft/teams-js@2.0.0-beta.1` (or later) from an existing Teams app, you will see deprecation warnings if your code calls APIs that have changed. An API translation layer (mapping current SDK to preview SDK API calls) is provided to enable existing Teams apps to continue working in Teams until they are able to update code to work with the TeamsJS SDK v2 Preview. After you update your code with the changes outlined in this article, your personal tab will also run in Outlook and Office. +> If you reference `@microsoft/teams-js@2.0.0-beta.1` (or later) from an existing Teams app, you will see deprecation warnings if your code calls APIs that have changed. An API translation layer (mapping current SDK to preview SDK API calls) is provided to enable existing Teams apps to continue working in Teams until they are able to update code to work with the TeamsJS SDK v2 Preview. After you update your code with the changes outlined in this article, your personal tab will also run in Outlook and Office. ## Updating to the Teams client SDK v2 Preview Open your Teams app manifest and update the `$schema` and `manifestVersion` with "manifestVersion" : "m365DevPreview" } ```+ If you used Teams Toolkit to create your personal app, you can also use it to validate the changes to your manifest file and identify any errors. Open the command palette `Ctrl+Shift+P` and find **Teams: Validate manifest file** or select the option from the Deployment menu of the Teams Toolkit (look for the Teams icon on the left side of Visual Studio Code). To run in Outlook and Office, your app will need to depend on the [npm package]( After completion, the utility will have updated your `package.json` file with the TeamsJS SDK v2 Preview (`@microsoft/teams-js@2.0.0-beta.1` or later) dependency, and your `*.js/.ts` and `*.jsx/.tsx` files will be updated with: > [!div class="checklist"]+> > * `package.json` references to TeamsJS SDK v2 Preview > * Import statements for TeamsJS SDK v2 Preview > * [Function, Enum, and Interface calls](#apis-organized-into-capabilities) to TeamsJS SDK v2 Preview The `pages` namespace includes functionality for running and navigating webpages | - | - | | `getTabInstances` | `pages.tabs.getTabInstances` | | `getMruTabInstances` | `pages.tabs.getMruTabInstances` |-| ` navigateToTab` | `pages.tabs.navigateToTab` | +| `navigateToTab` | `pages.tabs.navigateToTab` | | Original namespace `navigation` | New namespace `pages.tabs` | | - | - | You can also visualize the changes by reviewing the [`transformLegacyContextToA | `tenantSKU`| `app.Context.user.tenant.teamsSku` | | `tid`| `app.Context.user.tenant.id` | | `upn` | `app.Context.user.userPrincipalName` |-|` userClickTime`| `app.Context.app.userClickTime`| +|`userClickTime`| `app.Context.app.userClickTime`| | `userFileOpenPreference` | `app.Context.app.userFileOpenPreference` | | `userLicenseType`| `app.Context.user.licenseType` | | `userObjectId` | `app.Context.user.id`|-| ` userTeamRole` | `app.Context.team.userRole`| +| `userTeamRole` | `app.Context.team.userRole`| | `userDisplayName` | `app.Context.user.displayName` | | N/A | `app.Context.app.host.name`| |
| platform | Define Action Command | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/action-commands/define-action-command.md | -Action commands allow you to present your users with a modal popup called a task module in Teams. The task module collects or displays information, processes the interaction, and sends the information back to Teams. This document guides you on how to select action command invoke locations, create your task module, send final message, or card, create action command using app studio, or create it manually. +Action commands allow you to present your users with a modal popup called a task module in Teams. The task module collects or displays information, processes the interaction, and sends the information back to Teams. This document guides you on how to select action command invoke locations, create your task module, send final message, or card, create action command using app studio, or create it manually. Before creating the action command, you must decide the following factors: First, you must decide the location from where your action command must be invok Commands context = message - > [!NOTE] + > [!NOTE] > The initial invoke to your bot includes a JSON object containing the message from which it was invoked. You can process the message before presenting them with a task module. The following image displays the locations from where action command is invoked: The following image displays the locations from where action command is invoked: ## Select how to create your task module -In addition to selecting where your command can be invoked from, you must also select how to populate the form in the task module for your users. You have the following three options for creating the form that is rendered inside the task module: +In addition to selecting where your command can be invoked from, you must also select how to populate the form in the task module for your users. You have the following three options for creating the form that is rendered inside the task module: * **Static list of parameters**: This is the simplest method. You can define a list of parameters in your app manifest the Teams client renders, but cannot control the formatting in this case. * **Adaptive Card**: You can select to use an Adaptive Card, which provides greater control over the UI, but still limits you on the available controls and formatting options.-* **Embedded web view**: You can select to embed a custom web view in the task module to have a complete control over the UI and controls. +* **Embedded web view**: You can select to embed a custom web view in the task module to have a complete control over the UI and controls. If you select to create the task module with a static list of parameters and when the user submits the task module, the messaging extension is called. When using an embedded web view or an Adaptive Card, your messaging extension must handle an initial invoke event from the user, create the task module, and return it back to the client. You can create an action command using **App Studio** or **Developer Portal**. 1. Select **Set up** in the window to include the messaging extension in your app experience. The following image displays the messaging extension set up window: <img src="~/assets/images/messaging-extension/messaging-extension-set-up.png" alt="messaging extension set up" width="500"/>- + 1. To create a messaging extension, you need a Microsoft registered bot. You can either use an existing bot or create a new bot. Select **Create new bot** option, give a name for the new bot, and select **Create**. The following image displays bot creation for messaging extension: <img src="~/assets/images/messaging-extension/create-bot-for-messaging-extension.png" alt="create bot for messaging extension" width="500"/> -1. Select **Add** in the **Command section** of the messaging extensions page to include the commands which decides the behaviour of messaging extension. +1. Select **Add** in the **Command section** of the messaging extensions page to include the commands which decides the behaviour of messaging extension. The following image displays command addition for messaging extension: <img src="~/assets/images/messaging-extension/include-command.png" alt="include command" width="500"/> The following image displays command addition for messaging extension: 1. Select **Allow users to trigger actions in external services while inside of Teams**. The following image displays the action command selection: <img src="~/assets/images/messaging-extension/action-command-selection.png" alt="action command selection" width="500"/>- -1. To use a static set of parameters to create your task module, select **Define a set of static parameters for the command**. ++1. To use a static set of parameters to create your task module, select **Define a set of static parameters for the command**. The following image displays the action command static parameter selection: - <img src="~/assets/images/messaging-extension/action-command-static-parameter-selection.png" alt="action command static parameter selection" width="500"/> - - The following image displays an example static parameter set-up: + <img src="~/assets/images/messaging-extension/action-command-static-parameter-selection.png" alt="action command static parameter selection" width="500"/> ++ The following image displays an example static parameter set-up: <img src="~/assets/images/messaging-extension/setting-up-of-static-parameter.png" alt="action command static parameter set-up" width="500"/> The following image displays command addition for messaging extension: 1. To use dynamic parameters, select to **Fetch a dynamic set of parameters from your bot**. The following image displays the action command parameter selection: <img src="~/assets/images/messaging-extension/action-command-dynamic-parameter-selection.png" alt="action command dynamic parameter selection" width="500"/>- + 1. Add a **Command Id** and a **Title**. 1. Select the location from where you want to invoke the action command. The following image displays the action command invoke location: If you are using an embedded web view, you can optionally add the `taskInfo` obj |`taskInfo.title`|Initial task module title. |No | 1.4 | |`taskInfo.width`|Task module width, either a number in pixels or default layout such as `large`, `medium`, or `small`. |No | 1.4 | |`taskInfo.height`|Task module height, either a number in pixels or default layout such as `large`, `medium`, or `small`.|No | 1.4 |-|`taskInfo.url`|Initial web view URL.|No | 1.4 | +|`taskInfo.url`|Initial web view URL.|No | 1.4 | #### App manifest example The following section is an example of a `composeExtensions` object defining two |:|:--|:|:--| |Teams messaging extension action| Describes how to define action commands, create task module, and respond to task module submit action. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/51.teams-messaging-extensions-action)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/51.teams-messaging-extensions-action) | - ## Step-by-step guide Follow the [step-by-step guide](../../../sbs-meetingextension-action.yml) to build Teams action based messaging extension. If you are using the parameters or an embedded web view with a `taskInfo` object > [!div class="nextstepaction"] > [Respond to task module submit](~/messaging-extensions/how-to/action-commands/respond-to-task-module-submit.md)- |
| platform | Overview Explore | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-explore.md | With Teams, you can build your app in a feature-rich environment. Using Teams as | Microsoft Graph | Microsoft Graph is the gateway to data and intelligence in Microsoft 365 and can be incorporated in any kind of Teams app. | Create, manage, find, and archive large number of teams and populate them with users and channels. | | Adaptive Card | Cards help you organize information into groups and give users the opportunity to interact with specific parts of the information. | Sharing using text and images; gathering information using input forms. | | Task modules | Task modules permit you to create modal pop-up experiences in your Teams application. | Run your own custom HTML or JavaScript code. Show an <`iframe`>-based widget such as a YouTube or Microsoft Stream video. |-| ## Dive deeper |
| platform | Overview Solution | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-solution.md | Collate and map requirements to Teams features: | **Integration** | | | Microsoft Graph, Weather API | | **Scope** | | Personal app | | | **Integration point** | | Chat | |-| **Teams app solution**: A Teams *personal chat bot* app that checks and *sends forecast notification* to *registered users* before their travel date. |
| platform | Overview Story | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-story.md | LetΓÇÖs dig deeper into this story and find out. :::row-end::: :::row::: :::column span="":::- :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-03.png" alt-text="...so that customers can know weather conditions and plan ahead" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-03.png" alt-text="...so that customers can know weather conditions and plan ahead" border="false"::: :::column-end::: :::column span=""::: #### List app requirements and benefits |
| platform | Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview.md | Let's look at some areas where an app helps to meet a business need. :::image type="content" source="../msteams-platform/assets/images/overview/why-teams-apps.png" alt-text="Why should you build Teams apps?" border="false"::: -| | | -| | | | **Development Options** | **Business Opportunities** |+| | | | - Desktop app <br> - Web app <br> - Mobile app | - Increase user engagements <br> - Make your app discoverable on Teams Store | | **Customer benefits** | **Internal workflows** | | - On-the-go accessibility <br> - Secure customer data <br> - Ease of communication | - Automate repetitive tasks <br> - Simplify tasks with bots, <br> such as Q&A and Help-desk |-| You can build apps with Teams Developer platform by extending Teams capabilities to fit your needs. Create something brand new for Teams or integrate an existing app. |
| platform | Bots Conversations | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/bot-v3/bot-conversations/bots-conversations.md | We recommend that you specify the height and width of each image by using XML. I Depending on which scopes are declared, your bot can receive messages in the following contexts: * **personal chat** Users can interact in a private conversation with a bot by simply selecting the added bot in the chat history, or typing its name or app ID in the To: box on a new chat.-* **Channels** A bot can be mentioned ("@_botname_") in a channel if it has been added to the team. Note that additional replies to a bot in a channel require mentioning the bot. It will not respond to replies where it is not mentioned. +* **Channels** A bot can be mentioned ("@*botname*") in a channel if it has been added to the team. Note that additional replies to a bot in a channel require mentioning the bot. It will not respond to replies where it is not mentioned. For incoming messages, your bot receives an [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object&preserve-view=true) object of type `messageType: message`. Although the `Activity` object can contain other types of information, like [channel updates](~/resources/bot-v3/bots-notifications.md#channel-updates) sent to your bot, the `message` type represents communication between bot and user. |
| platform | Developer Preview Intro | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/dev-preview/developer-preview-intro.md | Use the same menu item under About → Developer preview, and click on it to tur ## See also -[Test and debug your Microsoft Teams app](~/concepts/build-and-test/debug.md) +[Test and debug your Microsoft Teams app](~/concepts/build-and-test/debug.md) |
| platform | Moodleinstructions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/moodleInstructions.md | Use the generated `AppID` and `Key` in your Microsoft 365 Moodle Plugins setup p 1. Select the **Download PowerShell Script** button and save it as a ZIP folder to your local computer. -1. Prepare the PowerShell script from the ZIP file as follows: +1. Prepare the PowerShell script from the ZIP file as follows: 1. Download and extract the `Moodle-AzureAD-Powershell.zip` file. 1. Open the extracted folder. The free Moodle assistant bot for Microsoft Teams helps teachers and students an <img width="530px" src="../assets/images/MoodleBotInformationFlow.png" alt="Moodle bot for Microsoft Teams information flow" /> -To install the bot, you must register it on the [Microsoft Identity Platform](https://identity.microsoft.com/Landing). This allows your bot to authenticate against your Microsoft endpoints. +To install the bot, you must register it on the [Microsoft Identity Platform](https://identity.microsoft.com/Landing). This allows your bot to authenticate against your Microsoft endpoints. -**To register your bot** +To register your bot: 1. Go to the plugins administration page, and then select **Plugins**. Under **Microsoft 365 Integration**, select the **Teams Settings** tab. To install the bot, you must register it on the [Microsoft Identity Platform](ht After generating your application ID and password, deploy your bot to Azure: > [!div class="checklist"]-> * Select **Deploy to Azure** and complete the form with the necessary information, such as the Bot Application ID, Bot Application Password, and the Moodle Secret on the **Teams Settings** page. The Azure information is on the **Setup** page. +> +> * Select **Deploy to Azure** and complete the form with the necessary information, such as the Bot Application ID, Bot Application Password, and the Moodle Secret on the **Teams Settings** page. The Azure information is on the **Setup** page. > * After completing the form, select the checkbox to agree to the terms and conditions. > * Select **Purchase**. All Azure resources are deployed to the free tier. After the resources have completed deploying to Azure, you must configure the Mi After your bot deployed to Azure and configured to talk to your Moodle server, you must deploy your Microsoft Teams app. To do this you must load the app manifest file that you downloaded from the Microsoft 365 Moodle Plugins Team Settings page in the previous step. -Before you install the app you must ensure to enable external apps and uploading of apps. For more information, see [Prepare your Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md). +Before you install the app you must ensure to enable external apps and uploading of apps. For more information, see [Prepare your Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md). -**To deploy your app** +To deploy your app: -1. Open **Microsoft Teams**. +1. Open **Microsoft Teams**. 1. Select the **App** icon on the lower-left area of the navigation bar. Now that you have the app installed, you can add the tab to any channel that you Although the Moodle tabs are created manually in Microsoft Teams, you can decide to create them automatically when teams are created from course synchronization. To do this, you must configure the ID of the uploaded Microsoft Teams app in Moodle. -**To allow automatic creation of Moodle tabs** +To allow automatic creation of Moodle tabs: 1. Open Microsoft Teams. |
| platform | Manifest Schema | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md | This item is an array (maximum of 16 elements) with all elements of the type `ob |`context` | array of enums| 2|| The set of `contextItem` scopes where a tab is supported.| > [!NOTE]-> The searchUrl feature is not available for the third-party developers. -> If your tabs require context-dependent information to display relevant content or for initiating an authentication flow, For more information, see [Get context for your Microsoft Teams tab](../../tabs/how-to/access-teams-context.md). +> The searchUrl feature is not available for the third-party developers. +> If your tabs require context-dependent information to display relevant content or for initiating an authentication flow, For more information, see [Get context for your Microsoft Teams tab](../../tabs/how-to/access-teams-context.md). ## bots Indicates if or not to show the loading indicator when an app or tab is loading. >[!NOTE] >If you select`showLoadingIndicator` as true in your app manifest, to load the page correctly, modify the content pages of your tabs and task modules as described in [Show a native loading indicator](../../tabs/how-to/create-tab-pages/content-page.md#show-a-native-loading-indicator) document. - ## isFullScreen **Optional**ΓÇöBoolean Define the properties your app uses to post a user activity feed. **Optional** - string Specifies the install scope defined for this app by default. The defined scope will be the option displayed on the button when a user tries to add the app. Options are:+ * `personal` * `team` * `groupchat` Specifies the install scope defined for this app by default. The defined scope w **Optional** - object When a group install scope is selected, it will define the default capability when the user installs the app. Options are:+ * `team` * `groupchat` * `meetings`- + |Name| Type| Maximum size | Required | Description| |||||| |`team`|string|||When the install scope selected is `team`, this field specifies the default capability available. Options: `tab`, `bot`, or `connector`.| You can define any of the following properties: ## defaultBlockUntilAdminAction **Optional**ΓÇöBoolean- + When `defaultBlockUntilAdminAction` property is set to **true**, the app is hidden from users by default until admin allows it. If set to **true**, the app is hidden for all tenants and end users. The tenant admins can see the app in the Teams admin center and take action to allow or block the app. The default value is **false**. For more information on default app block, see [Hide Teams app until admin approves](~/concepts/design/enable-app-customization.md#hide-teams-app-until-admin-approves). ## publisherDocsUrl |
| platform | App Templates | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/app-templates.md | The following table describes App template code samples: | Poll| Poll is a custom Microsoft Teams [messaging extension](../messaging-extensions/what-are-messaging-extensions.md) app that enables you to quickly create and send polls in a chat or a channel to gather team opinions and preferences. The app is supported across all Teams platform clients, such as desktop, browser, iOS, and Android and is ready for deployment as part of your Microsoft 365 subscription.|[Poll](https://github.com/OfficeDev/microsoft-teams-poll-app) | | Quick Responses| Quick Responses is a Microsoft Teams app that delivers a robust solution for effectively answering users' commonly asked questions FAQs. Instead of answering each query manually and continuously repeating information, the app builds a library of responses for an interactive user experience through Teams [messaging extensions](../messaging-extensions/what-are-messaging-extensions.md).|[Quick Responses](https://github.com/OfficeDev/microsoft-teams-apps-quickresponses) | |Quiz | Quiz is a custom [Teams messaging extension](../messaging-extensions/what-are-messaging-extensions.md) app that enables you to create a quiz within a chat or a channel for knowledge check and instantaneous results. You can use Quiz for, In-class and offline exams, Knowledge check within team, and for fun quizzes within a team. Quiz app is supported across multiple platforms, such as Teams desktop, browser, iOS, and Android clients. This app is ready for deployment as part of your existing Microsoft 365 subscription.|[Quiz](https://github.com/OfficeDev/microsoft-teams-apps-quiz) |-| Rapid Assist|Rapid Assist is a Microsoft [Power Platform](https://powerapps.microsoft.com/blog now-in-preview-customize-teams-with-built-in-power-platform-capabilities/) based app that allows customer facing associates to rapidly connect with the experts to get quick answers, search for information, follow up open requests, and allow experts to receive notifications to quickly get on a call to help answer questions. The app built using Microsoft [Power Apps](/powerapps/powerapps-overview) and [Power Automate](/power-automate/getting-started), deeply integrates with Microsoft Teams to enable organizations to easily connect frontline workers with corporate liaisons to resolve customer queries and deliver a great customer experience. |[Rapid Assist](https://github.com/OfficeDev/microsoft-teams-apps-rapid-assist) | +| Rapid Assist|Rapid Assist is a Microsoft [Power Platform](https://powerapps.microsoft.com/blog/) based app that allows customer facing associates to rapidly connect with the experts to get quick answers, search for information, follow up open requests, and allow experts to receive notifications to quickly get on a call to help answer questions. The app built using Microsoft [Power Apps](/powerapps/powerapps-overview) and [Power Automate](/power-automate/getting-started), deeply integrates with Microsoft Teams to enable organizations to easily connect frontline workers with corporate liaisons to resolve customer queries and deliver a great customer experience. |[Rapid Assist](https://github.com/OfficeDev/microsoft-teams-apps-rapid-assist) | | Reflect|Reflect is a custom Microsoft Teams [messaging extension](../messaging-extensions/what-are-messaging-extensions.md) app that provides a safe and inclusive resource for your team members to share the state of their emotional well-being with colleagues or group leaders directly within Teams. The app is available in channel, group, meeting, and 1:1 chats and the check-in response is set to public, private-to-sender, or fully anonymous. |[Reflect](https://github.com/OfficeDev/Microsoft-Teams-App-Reflect) | |Remote Support | Remote Support is a [Microsoft Teams bot](../bots/what-are-bots.md) that provides a focused interface between support requesters throughout your organization and the internal support team. End-users can submit, edit, or withdraw requests for support and the support team can respond, manage, and update requests all within the Teams platform.|[Remote Support](https://github.com/OfficeDev/microsoft-teams-apps-remotesupport) | | Request-a-team|Request-a-team is a Microsoft Teams app that optimizes new team creation for your enterprise organization. The app supports standardization and best practices when creating new team instances through the integration of a wizard-guided request form, an embedded approval process, a request status dashboard, and automated team builds.|[Request-a-team](https://github.com/OfficeDev/microsoft-teams-apps-requestateam) | |
| platform | Access Teams Context | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/access-teams-context.md | Your tab requires contextual information to display relevant content: Context about the user, team, or company can be especially useful when: * You create or associate resources in your app with the specified user or team.-* You initiate an authentication flow from Microsoft Azure Active Directory (Azure AD) or other identity provider, and you do not require the user to enter their username again. +* You initiate an authentication flow from Microsoft Azure Active Directory (Azure AD) or other identity provider, and you do not require the user to enter their username again. For more information, see [authenticate a user in your Microsoft Teams](~/concepts/authentication/authentication.md). The following code provides an example of context variable: ## Retrieve context in private channels -When your content page is loaded in a private channel, the data you receive from the `getContext` call is obfuscated to protect the privacy of the channel. +When your content page is loaded in a private channel, the data you receive from the `getContext` call is obfuscated to protect the privacy of the channel. The following fields are changed when your content page is in a private channel: If your page makes use of any of these values, the value of `channelType` field > [!NOTE] > Currently, Microsoft Teams Connect shared channels are in [developer preview](../../resources/dev-preview/developer-preview-intro.md) only. -When your content page is loaded in a Microsoft Teams Connect shared channel, the data you receive from the `getContext` call is altered due to the unique roster of users in shared channels. +When your content page is loaded in a Microsoft Teams Connect shared channel, the data you receive from the `getContext` call is altered due to the unique roster of users in shared channels. The following fields are changed when your content page is in a shared channel: |
| platform | Auth Aad Sso | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-aad-sso.md | Users sign in to Microsoft Teams through their work, school, or Microsoft accoun > Γ£öTeams JavaScript SDK (_Version_: 1.10 and later) for SSO to work in meeting side panel. > > For the best experience with Teams, use the latest version of iOS and Android.- > [!NOTE] > **Quickstart** > Use the following code to add new properties to your Teams manifest: * **WebApplicationInfo** is the parent of the following elements: > [!div class="checklist"]+> > * **id** - The client ID of the application. This is the application ID that you obtained as part of registering the application with Azure AD. >* **resource** - The domain and subdomain of your application. This is the same URI (including the `api://` protocol) that you registered when creating your `scope` in step 6. You must not include the `access_as_user` path in your resource. The domain part of this URI must match the domain, including any subdomains, used in the URLs of your Teams application manifest.- > [!NOTE] > >* The resource for an Azure AD app is usually the root of its site URL and the appID (e.g. `api://subdomain.example.com/00000000-0000-0000-0000-000000000000`). This value is also used to ensure your request is coming from the same domain. Ensure that the `contentURL` for your tab uses the same domains as your resource property. IConfidentialClientApplication app = ConfidentialClientApplicationBuilder.Create }); }); ```+ ## Code sample |
| platform | Auth Tab Aad | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-tab-aad.md | If successful, you can refresh or reload the page and show content relevant to t Your app can set its own session cookie so that the user need not sign in again when they return to your tab on the current device. > [!NOTE]-> Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. *See* [SameSite cookie attribute (2020 update)](../../../resources/samesite-cookie-update.md). -->[!NOTE] ->To get the correct token for Microsoft Teams Free and guest users, it is important that the apps use tenant specific endpoint `https://login.microsoftonline.com/**{tenantId}**`. You can get tenantId from the bot message or tab context. If the apps use `https://login.microsoftonline.com/common`, the users will get incorrect tokens and will log on to the "home" tenant instead of the tenant that they are currently signed into. +> +> * Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. *See* [SameSite cookie attribute (2020 update)](../../../resources/samesite-cookie-update.md). +> * To get the correct token for Microsoft Teams Free and guest users, it is important that the apps use tenant specific endpoint `https://login.microsoftonline.com/**{tenantId}**`. You can get tenantId from the bot message or tab context. If the apps use `https://login.microsoftonline.com/common`, the users will get incorrect tokens and will log on to the "home" tenant instead of the tenant that they are currently signed into. For more information on Single Sign-On (SSO) see the article [Silent authentication](~/tabs/how-to/authentication/auth-silent-AAD.md). |
| platform | Create Channel Group Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-channel-group-tab.md | You can create a custom channel or group tab using the [Teams Yeoman generator]( You must have an understanding of the following prerequisites: -- You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).+* You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). > [!NOTE] > If you do not currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription remains active as long as you are using it for ongoing development. See [welcome to the Office 365 Developer Program](/office/developer-program/microsoft-365-developer-program). In addition, this project requires that you have the following installed in your development environment: -- Any text editor or IDE. You can install and use [Microsoft Visual Studio Code](https://code.visualstudio.com/download) for free.+* Any text editor or IDE. You can install and use [Microsoft Visual Studio Code](https://code.visualstudio.com/download) for free. -- [Node.js/npm](https://nodejs.org/en/). Use the latest LTS version. The Node Package Manager (npm) installs in your system with the installation of Node.js.+* [Node.js/npm](https://nodejs.org/en/). Use the latest LTS version. The Node Package Manager (npm) installs in your system with the installation of Node.js. -- After you have successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following in your command prompt:+* After you have successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following in your command prompt: ```bash npm install yo gulp-cli --global ``` -- Install the Microsoft Teams Apps generator by entering the following in your command prompt:+* Install the Microsoft Teams Apps generator by entering the following in your command prompt: ```bash npm install generator-teams --global At a command prompt, open your project directory to complete the next tasks. You must have an app package to test your tab in Teams. It is a zip folder that contains the following required files: -- A **full color icon** measuring 192 x 192 pixels.-- A **transparent outline icon** measuring 32 x 32 pixels.-- A **manifest.json** file that specifies the attributes of your app.+* A **full color icon** measuring 192 x 192 pixels. +* A **transparent outline icon** measuring 32 x 32 pixels. +* A **manifest.json** file that specifies the attributes of your app. The package is created through a gulp task that validates the manifest.json file and generates the zip folder in the **./package directory**. In the command prompt, enter the following command: You must have an understanding of the following prerequisites: - You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). > [!NOTE]- > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. + > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. -- Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.+* Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it. In addition, this project requires that you have the following installed in your development environment: -- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.+* The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free. -- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).+* The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download). ### Get the source code Alternately, you can retrieve the source code by downloading the zip folder and 1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu. 1. In a browser, go to the following URLs and verify the application loaded properly: - - `http://localhost:44355` - - `http://localhost:44355/privacy` - - `http://localhost:44355/tou` + * `http://localhost:44355` + * `http://localhost:44355/privacy` + * `http://localhost:44355/tou` ### Review the source code #### Startup.cs -This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code: +This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced * Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code: ```csharp public void ConfigureServices(IServiceCollection services) This C# file contains a method that is called from **Tab.cshtml** during configu This folder contains the following required app package files: -- A **full color icon** measuring 192 x 192 pixels.-- A **transparent outline icon** measuring 32 x 32 pixels.-- A **manifest.json** file that specifies the attributes of your app.+* A **full color icon** measuring 192 x 192 pixels. +* A **transparent outline icon** measuring 32 x 32 pixels. +* A **manifest.json** file that specifies the attributes of your app. These files need to be zipped in an app package for use in uploading your tab to Teams. When a user chooses to add or update your tab, Microsoft Teams loads the `configurationUrl` specified in your manifest, embeds it in an IFrame, and renders it in your tab. Microsoft Teams is a cloud-based product and requires that your tab content be a To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it. -- At a command prompt in the root of your project directory, run the following command:+* At a command prompt in the root of your project directory, run the following command: ```bash ngrok http https://localhost:44355 -host-header="localhost:44355" ``` -- Ngrok listens to requests from the internet and routes them to your application when it is running on port 44355. It should resemble `https://y8rCgT2b.ngrok.io/` where **y8rCgT2b** is replaced by your ngrok alpha-numeric HTTPS URL.+* Ngrok listens to requests from the internet and routes them to your application when it is running on port 44355. It should resemble `https://y8rCgT2b.ngrok.io/` where **y8rCgT2b** is replaced by your ngrok alpha-numeric HTTPS URL. -- Ensure that you keep the command prompt with ngrok running and make a note of the URL.+* Ensure that you keep the command prompt with ngrok running and make a note of the URL. ### Update your application You can create a custom channel or group tab using C# and ASP.Net Core MVC. [App ### Prerequisites for custom channel or group tab -- You must have a Microsoft 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).+* You must have a Microsoft 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). > [!NOTE]- > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. + > If you do not currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. -- Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.+* Use App Studio to import your application to Teams. To install App Studio, select **Apps**  at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it. In addition, this project requires that you have the following installed in your development environment: -- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.+* The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free. -- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).+* The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download). ### Get the source code Alternately, you can retrieve the source code by downloading the zip folder and 1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu. 1. In a browser, navigate to the following URLs and verify that the application loaded properly: - - `http://localhost:44360` - - `http://localhost:44360/privacy` - - `http://localhost:44360/tou` + * `http://localhost:44360` + * `http://localhost:44360/privacy` + * `http://localhost:44360/tou` ### Review the source code In ASP.NET Core, the web root folder is where the application looks for static f This folder contains the following required app package files: -- A **full color icon** measuring 192 x 192 pixels.-- A **transparent outline icon** measuring 32 x 32 pixels.-- A **manifest.json** file that specifies the attributes of your app.+* A **full color icon** measuring 192 x 192 pixels. +* A **transparent outline icon** measuring 32 x 32 pixels. +* A **manifest.json** file that specifies the attributes of your app. These files need to be zipped in an app package for use in uploading your tab to Teams. |
| platform | Configuration Page | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/configuration-page.md | The following image displays the tab content with **Red** icon selected: Choosing the appropriate button triggers either `saveGray()` or `saveRed()`, and invokes the following: -* Set `settings.setValidityState(true)` to true. +* Set `settings.setValidityState(true)` to true. * The `microsoftTeams.settings.registerOnSaveHandler()` event handler is triggered. * **Save** on the app's configuration page, is enabled. |
| platform | Content Page | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/content-page.md | For more information, see [tab design guidelines](~/tabs/design/tabs.md) and [Mi ## Integrate your code with Teams -For your page to display in Teams, you must include the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and include a call to `microsoftTeams.initialize()` after your page loads. +For your page to display in Teams, you must include the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and include a call to `microsoftTeams.initialize()` after your page loads. The following code provides an example of how your page and the Teams client communicate: Ensure that all URL domains used in your tabs are included in the `validDomains` Starting with [manifest schema v1.7](../../../resources/schem). > [!NOTE]+> > * The behavior on mobile clients is not configurable through the native loading indicator property. Mobile clients show this indicator by default across content pages and iframe-based task modules. This indicator on mobile is shown when a request is made to fetch content and gets dismissed as soon as the request gets completed. If you indicate `showLoadingIndicator : true` in your app manifest, then all tab configuration, content, removal pages, and all iframe-based task modules must follow these steps: -**To show the loading indicator** +To show the loading indicator: 1. Add `"showLoadingIndicator": true` to your manifest. 1. Call `microsoftTeams.initialize();`. If you indicate `showLoadingIndicator : true` in your app manifest, then all ta > [Create a configuration page](~/tabs/how-to/create-tab-pages/configuration-page.md) ## See also- + * [Teams tabs](~/tabs/what-are-tabs.md) * [Create a personal tab](~/tabs/how-to/create-personal-tab.md) * [Tabs link unfurling and Stage View](~/tabs/tabs-link-unfurling.md) |
| platform | Tab Requirements | https://github.com/MicrosoftDocs/msteams-docs/commits/main/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 Microsoft Visual Studio Code](../../toolkit/visual-studio-code-overview.md) * [Teams Toolkit for Visual Studio](../../toolkit/visual-studio-overview.md) |
| platform | Tabs In Sharepoint | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/tabs-in-sharepoint.md | -You can get a rich integration experience between Microsoft Teams and SharePoint by adding a Microsoft Teams tab in SharePoint as an SPFx web part. This document guides you on how you to take a tab from a Microsoft Teams sample app and use it in SharePoint. +You can get a rich integration experience between Microsoft Teams and SharePoint by adding a Microsoft Teams tab in SharePoint as an SPFx web part. This document guides you on how you to take a tab from a Microsoft Teams sample app and use it in SharePoint. ## Rich integration between Teams and SharePoint The sample app that is being used is a Talent Management application. It manages * 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) same as it can, when running inside Teams. -**To add Teams tab to SharePoint** --Perform the following steps to add Teams tab to SharePoint: +To add Teams tab to SharePoint, perform the following steps to add Teams tab to SharePoint: ## 1. Test the sample app Download the [sample app manifest](https://github.com/MicrosoftDocs/msteams-docs  1. The file to upload is located in your **Downloads** folder. It is called TalentMgmt-Azure.zip. The following image displays the corresponding screen:- +  -1. You can see the install or consent screen for the talent management app. Select the team you want to install. +1. You can see the install or consent screen for the talent management app. Select the team you want to install. 1. Select the **Install** and start experimenting with the app. ## 2. Use Teams tab in SharePoint The following image displays the corresponding screen: 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: +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:  ## 3. Explore App Pages 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. +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:  ## Code sample+ | **Sample name** | **Description** | **SPFx** | |--|--|-| | SPFx web part | SPFx web part samples for tabs, channels, and groups. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-channel-group/spfx) |
| platform | Cards And Task Modules | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards-and-task-modules.md | You can format card text using a subset of XML or HTML formatting or Markdown de [People Picker in Adaptive Cards](cards/people-picker.md) in Adaptive Card helps to search, select, reassign, and preselect users within chat or channel. You can add and respond to card actions that:+ * Open a URL * Send messages and payload to the bot * Initiate OAuth flow |
| platform | Cards Actions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-actions.md | Cards used by bots and messaging extensions in Teams support the following activ | `signin` | Initiates OAuth flow, allowing bots to connect with secure services. | > [!NOTE]+> >* Teams does not support `CardAction` types not listed in the previous table. >* Teams does not support the `potentialActions` property. >* Card actions are different than [suggested actions](/azure/bot-service/bot-builder-howto-add-suggested-actions?view=azure-bot-service-4.0&tabs=javascript#suggest-action-using-button&preserve-view=true) in Bot Framework or Azure Bot Service. Suggested actions are not supported in Microsoft Teams. If you want buttons to appear on a Teams bot message, use a card. The following code shows an example of Adaptive Cards with `invoke` action with } } ```+ ## Next step > [!div class="nextstepaction"] The following code shows an example of Adaptive Cards with `invoke` action with * [Use task modules from bots](~/task-modules-and-cards/task-modules/task-modules-bots.md) * [Adaptive cards in bots](../../bots/how-to/conversations/conversation-messages.md#adaptive-cards) * [Universal Actions for Adaptive Cards](~/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md)-* [Form completion feedback](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback) +* [Form completion feedback](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback) |
| platform | Cards Format | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-format.md | Last updated 06/25/2021 # Format cards in Microsoft Teams Following are the two ways to add rich text formatting to your cards:+ * [Markdown](#format-cards-with-markdown) * [HTML](#format-cards-with-html) Adaptive Cards support emoji. The following code shows an example of Adaptive Ca :::image type="content" source="~/assets/images/cards/adaptive-card-emoji.png" alt-text="Adaptive card with an emoji" lightbox="../../assets/images/Cards/adaptive-card-emoji.png" border="true"::: -### Mention support within Adaptive Cards +### Mention support within Adaptive Cards You can add @mentions within an Adaptive Card body for bots and messaging extension responses. To add @mentions in cards, follow the same notification logic and rendering as that of message based [mentions in channel and group chat conversations](../../bots/how-to/conversations/channel-and-group-conversations.md#work-with-mentions). Bots and messaging extensions can include mentions within the card content in [TextBlock](https://adaptivecards.io/explorer/TextBlock.html) and [FactSet](https://adaptivecards.io/explorer/FactSet.html) elements. > [!NOTE]+> > * [Media elements](https://adaptivecards.io/explorer/Media.html) are currently not supported in Adaptive Cards on Teams platform. > * Channel and team mentions are not supported in bot messages. The following code shows an example of Adaptive Card with a mention: } ``` -### Microsoft Azure Active Directory (Azure AD) Object ID and UPN in user mention +### Microsoft Azure Active Directory (Azure AD) Object ID and UPN in user mention -Teams platform allows to mention users with their Azure AD Object ID and User Principle Name (UPN), in addition to the existing mention IDs. Bots with Adaptive Cards and Connectors with Incoming Webhooks support the two user mention IDs. +Teams platform allows to mention users with their Azure AD Object ID and User Principle Name (UPN), in addition to the existing mention IDs. Bots with Adaptive Cards and Connectors with Incoming Webhooks support the two user mention IDs. The following table describes the newly supported user mention IDs: -|IDs | Supporting capabilities | Description | Example | +|IDs | Supporting capabilities | Description | Example | |-|--|||-| Azure AD object ID | Bot, Connector | Azure AD userΓÇÖs object ID | 49c4641c-ab91-4248-aebb-6a7de286397b | -| UPN | Bot, Connector | Azure AD userΓÇÖs UPN | john.smith@microsoft.com | +| Azure AD object ID | Bot, Connector | Azure AD userΓÇÖs object ID | 49c4641c-ab91-4248-aebb-6a7de286397b | +| UPN | Bot, Connector | Azure AD userΓÇÖs UPN | john.smith@microsoft.com | -#### User mention in bots with Adaptive Cards +#### User mention in bots with Adaptive Cards -Bots support user mention with the Azure AD Object ID and UPN, in addition to the existing IDs. The support for two new IDs is available in bots for text messages, Adaptive Cards body, and messaging extension response. Bots support the mention IDs in conversation and `invoke` scenarios. The user gets activity feed notification when being @mentioned with the IDs. +Bots support user mention with the Azure AD Object ID and UPN, in addition to the existing IDs. The support for two new IDs is available in bots for text messages, Adaptive Cards body, and messaging extension response. Bots support the mention IDs in conversation and `invoke` scenarios. The user gets activity feed notification when being @mentioned with the IDs. > [!NOTE] > Schema update and UI/UX changes are not required for user mentions with Adaptive Cards in Bot. -##### Example +##### Example Example for user mention in bots with Adaptive Cards as follows: -```json +```json { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0", Following image illustrates the user mention with Adaptive Card in Bot:  -#### User mention in Incoming Webhook with Adaptive Cards +#### User mention in Incoming Webhook with Adaptive Cards Incoming webhooks start to support user mention in Adaptive Cards with the Azure AD Object ID and UPN. -> [!NOTE] -> * Enable user mention in the schema for Incoming webhooks to support Azure AD Object ID and UPN. -> * UI/UX changes are not required for user mentions with Azure AD Object ID and UPN. +> [!NOTE] +> +> * Enable user mention in the schema for Incoming webhooks to support Azure AD Object ID and UPN. +> * UI/UX changes are not required for user mentions with Azure AD Object ID and UPN. -##### Example +##### Example Example for user mention in Incoming Webhook as follows: The image appears in stage view when the user selects the expand icon as shown i In the stage view, users can zoom in and zoom out of the image. You can select the images in your Adaptive Card that must have this capability. > [!NOTE]+> > * Zoom in and zoom out capability applies only to the image elements that is image type in an Adaptive Card. > * For Teams mobile apps, stage view functionality for images in Adaptive Cards is available by default. Users can view Adaptive Card images in stage view by simply tapping on the image, irrespective of whether the `allowExpand` attribute is present or not. Connector cards support limited Markdown and HTML formatting. | Style | Example | Markdown | | | | | | Bold | **text** | `**text**` |-| Italic | *text* | `*text*` | +| Italic | _text_ | `*text*` | | Header (levels 1–3) | **Text** | `### Text`| | Strikethrough | ~~text~~ | `~~text~~` | | Unordered list | <ul><li>text</li><li>text</li></ul> | ```- Item 1\r- Item 2\r- Item 3``` | Connector cards support limited Markdown and HTML formatting. | Style | Example | HTML | | | | | | Bold | **text** | `<strong>text</strong>` |-| Italic | *text* | `<em>text</em>` | +| Italic | _text_ | `<em>text</em>` | | Header (levels 1–3) | **Text** | `<h3>Text</h3>` | | Strikethrough | ~~text~~ | `<strike>text</strike>` | | Unordered list | <ul><li>text</li><li>text</li></ul> | `<ul><li>text</li><li>text</li></ul>` | HTML tags are supported for simple cards, such as the hero and thumbnail cards. | Style | Example | HTML | | | | | | Bold | **text** | `<strong>text</strong>` |-| Italic | *text* | `<em>text</em>` | +| Italic | _text_ | `<em>text</em>` | | Header (levels 1–3) | **Text** | `<h3>Text</h3>` | | Strikethrough | ~~text~~ | `<strike>text</strike>` | | Unordered list | <ul><li>text</li><li>text</li></ul> | `<ul><li>text</li><li>text</li></ul>` | |
| platform | Cards Reference | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-reference.md | Before you identify the different card types, understand how to create a hero ca ## Create a hero card, thumbnail card, or Adaptive Card -**To create a hero card, thumbnail card, or Adaptive Card from App Studio** +To create a hero card, thumbnail card, or Adaptive Card from App Studio: 1. Go to **App Studio** from Teams. 1. Select **Card editor**. The following table provides the features that support Adaptive Cards: | Γ£ö | Γ£ö | Γ£û | Γ£ö | > [!NOTE]+> > * Teams platform supports v1.4 or earlier of Adaptive Card features for bot sent cards and action based messaging extensions. > * Teams platform supports v1.3 or earlier of Adaptive Card features for other capabilities, such as cards sent by user (search based messaging extensions and link unfurling), tabs, and task modules. > * Positive or destructive action styling is not supported in Adaptive Cards on the Teams platform. The following cards are implemented by the Bot Framework, but are not supported * [Format cards](~/task-modules-and-cards/cards/cards-format.md) * [Up to date cards](~/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/up-to-date-views.md) * [Work with Universal Actions for Adaptive Cards](~/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/work-with-universal-actions-for-adaptive-cards.md)-* [Form completion feedback](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback) +* [Form completion feedback](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback) |
| platform | Design Effective Cards | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/design-effective-cards.md | Cards designed for a narrow screen scale well on wider screens (the opposite isn Use [`ColumnSet`](https://adaptivecards.io/explorer/ColumnSet.html) to format your card content into into a table or grid. There are several options for formatting column width. These guidelines help you understand when to use each one. * `"width": "auto"`: Sizes each column in the `ColumnSet` to fit whatever app content you include in that column.- * **Do**: Use when you have content of varying width and don't need to prioritize a specific column. - * **Do**: For each `TextBlock`, set `"wrap": true` since text doesn't wrap by default. - * **Don't**: Set `"width": "auto"` for every column container. For example, if you have an input and button side by side, the button might get cut off on some screens. Instead, set `auto` for the column with buttons and other content that must always be completely visible. + * **Do**: Use when you have content of varying width and don't need to prioritize a specific column. + * **Do**: For each `TextBlock`, set `"wrap": true` since text doesn't wrap by default. + * **Don't**: Set `"width": "auto"` for every column container. For example, if you have an input and button side by side, the button might get cut off on some screens. Instead, set `auto` for the column with buttons and other content that must always be completely visible. * `"width": "stretch"`: Sizes columns based on the available `ColumnSet` width. When multiple columns use the `"stretch"` value, they equally share the available width.- * **Do**: Use with one column if all your other columns have a static width. For example, you have thumbnail images in one column that're all 50 pixels wide. + * **Do**: Use with one column if all your other columns have a static width. For example, you have thumbnail images in one column that're all 50 pixels wide. * `"width": "<number>"`: Sizes columns using a proportion of the available `ColumnSet` width. For example, if you set three columns with `"width": "1"`, `"width": "4"`, and `"width": "5"`, the columns will take up 10, 40, and 50 percent of the available width. * `"width": "<number>px"`: Sizes columns to a specific pixel width. This approach is useful when creating tables.- * **Do**: Use when the width of what you're displaying doesn't need to change (for example, numbers and percentages). - * **Don't**: Accidentally exceed the width of what the card can display. Remember, available screen width depends on the device. Teams mobile also doesn't support horizontal scrolling like Teams desktop. + * **Do**: Use when the width of what you're displaying doesn't need to change (for example, numbers and percentages). + * **Don't**: Accidentally exceed the width of what the card can display. Remember, available screen width depends on the device. Teams mobile also doesn't support horizontal scrolling like Teams desktop. #### Example: Knowing when to stretch columns Follow these guidelines when including images in your cards. * **Do**: If you need to control the exact size of your images, use the `width` and `height` properties. * **Don't**: Include padding with your images. This typically introduces undesirable spacing and layout issues. * Regarding background color:- * **Do**: Use transparent backgrounds so that your images adapt to any Teams theme. - * **Don't**: Include a fixed background color unless a specific color must be visible to your users. - * **Don't**: Add a background color to a `TextBlock` that hurts readability. For example, if your background is dark, use a lighter text color and vice versa. + * **Do**: Use transparent backgrounds so that your images adapt to any Teams theme. + * **Don't**: Include a fixed background color unless a specific color must be visible to your users. + * **Don't**: Add a background color to a `TextBlock` that hurts readability. For example, if your background is dark, use a lighter text color and vice versa. ### Actions |
| platform | Invoking Task Modules | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/task-modules/invoking-task-modules.md | The next section provides examples of embedding task modules in a YouTube video HTML or JavaScript-based task modules have access to the entire area of the task module below the header. While that offers a great deal of flexibility, if you want padding around the edges to align with the header elements and avoid unnecessary scroll bars, the user must provide the right CSS. The next sections provide some examples for a few use cases. -**Example 1: YouTube video** +### Example 1: YouTube video YouTube offers the ability to embed videos on web pages. It is easy to embed videos on web pages in a task module using a simple stub web page. The following code provides an example of the CSS: } ``` -**Example 2: PowerApp** +### Example 2: PowerApp The user can use the same approach to embed a PowerApp as well. As the height or width of any individual PowerApp is customizable, the user can adjust the height and width to achieve the desired presentation. Microsoft Teams ensures that keyboard navigation works properly from the task mo |Sample name | Description | .NET | Node.js| |-|--|--|-| |Task module sample bots-V4 | Samples for creating task modules. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/54.teams-task-module)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/54.teams-task-module)|-|Task module sample tabs and bots-V3 | Samples for creating task modules. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/nodejs)| +|Task module sample tabs and bots-V3 | Samples for creating task modules. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/nodejs)| ## Next step |
| platform | Task Modules Bots | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/task-modules/task-modules-bots.md | keywords: task modules teams bots deep links adaptive card # Use task modules from bots- + Task modules can be invoked from Microsoft Teams bots using buttons on Adaptive Cards and Bot Framework cards that is hero, thumbnail, and Office 365 Connector. Task modules are often a better user experience than multiple conversation steps. Keep track of bot state and allow the user to interrupt or cancel the sequence. There are two ways of invoking task modules: |
| platform | What Are Cards | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/what-are-cards.md | - -- Adaptive Card-- Hero card-- List card-- Office 365 Connector card-- Receipt card-- Signin card-- Thumbnail card-- Card collections++* Adaptive Card +* Hero card +* List card +* Office 365 Connector card +* Receipt card +* Signin card +* Thumbnail card +* Card collections You can add rich text formatting to your cards using either Markdown or HTML, depending on the card type. Cards used by bots and messaging extensions in Microsoft Teams, add and respond to these card actions, `openUrl`, `messageBack`, `imBack`, `invoke`, and `signin`. In addition to Adaptive Cards, Teams supports two other types of cards: ### People Picker in Adaptive Cards -[People Picker](cards/people-picker.md#people-picker-in-adaptive-cards) added as an input control in Adaptive Cards enable search and selection of people. You can use it in chats, channels, task modules, and tabs. The mobile and desktop clients support People Picker, which provides an inline typing experience. +[People Picker](cards/people-picker.md#people-picker-in-adaptive-cards) added as an input control in Adaptive Cards enable search and selection of people. You can use it in chats, channels, task modules, and tabs. The mobile and desktop clients support People Picker, which provides an inline typing experience. ### Type-ahead search in Adaptive Cards -Type ahead search added as an input control in Adaptive Cards enable [dynamic search](~/task-modules-and-cards/cards/dynamic-search.md) experience from a dynamically loaded dataset. It also allows users to do a type-ahead static search within a list with limited number of choices. The mobile and desktop clients support type ahead dynamic search experience. +Type ahead search added as an input control in Adaptive Cards enable [dynamic search](~/task-modules-and-cards/cards/dynamic-search.md) experience from a dynamically loaded dataset. It also allows users to do a type-ahead static search within a list with limited number of choices. The mobile and desktop clients support type ahead dynamic search experience. ### Adaptive Cards and Incoming Webhooks > [!NOTE]+> > * All native Adaptive Card schema elements, except `Action.Submit`, are fully supported. > * The supported actions are [**Action.OpenURL**](https://adaptivecards.io/explorer/Action.OpenUrl.html), [**Action.ShowCard**](https://adaptivecards.io/explorer/Action.ShowCard.html), [**Action.ToggleVisibility**](https://adaptivecards.io/explorer/Action.ToggleVisibility.html), and [**Action.Execute**](/adaptive-cards/authoring-cards/universal-action-model#actionexecute). Adaptive Cards with Incoming Webhooks enables you to use the rich and flexible capabilities of Adaptive Cards. It sends data using Incoming Webhooks in Teams from their web service. -## Support for Azure AD Object ID and UPN in user mention +## Support for Azure AD Object ID and UPN in user mention Bots with Adaptive Cards support user mention IDs, such as Microsoft Azure Active Directory (Azure AD) Object ID and User Principle Name (UPN) in addition to the existing IDs. Incoming webhooks start to support user mention in Adaptive Card with the Azure AD Object ID and UPN. Bots with Adaptive Cards support user mention IDs, such as Microsoft Azure Activ * [Format cards in Teams](~/task-modules-and-cards/cards/cards-format.md) * [Design Adaptive Cards](~/task-modules-and-cards/cards/design-effective-cards.md)-* [Adaptive cards in bots](../bots/how-to/conversations/conversation-messages.md#adaptive-cards) +* [Adaptive cards in bots](../bots/how-to/conversations/conversation-messages.md#adaptive-cards) |
| platform | Teams Toolkit Fundamentals | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/teams-toolkit-fundamentals.md | Last updated 11/29/2021 > [!NOTE] > Currently, this feature is available in **public developer preview** only. - Teams Toolkit for Microsoft Visual Studio Code helps you to create and deploy Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365 with zero-configuration approach. For Teams app development, similar to Teams Toolkit for Visual Studio, you can use [CLI tool](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md), which consists of Toolkit `teamsfx`. Teams Toolkit lets you create, debug, and deploy your Teams app right from Visual Studio Code. App development with the toolkit has the advantages of: -- Integrated identity-- Access to cloud storage-- Data from Microsoft Graph-- Azure and Microsoft 365 services with zero-configuration approach+* Integrated identity +* Access to cloud storage +* Data from Microsoft Graph +* Azure and Microsoft 365 services with zero-configuration approach Teams Toolkit brings all tools needed for building a Teams app in one place. The main milestones of this journey are: 1. Use Azure account to provision and deploy your app to cloud. 1. Publish your app to Teams. - ## Install Teams Toolkit for Visual Studio Code 1. Open **Visual Studio Code.** After Toolkit installation, you'll see the Teams Toolkit UI as shown in followin :::image type="content" source="../assets/images/teams-toolkit-v2/manual/teams toolkit.png" alt-text="mini functions"::: - You can select **Quick Start** to explore the Teams Toolkit, or select **Create a new Teams App** to create one Teams project. If you have a Teams project created by Teams Toolkit v2.+ opened in Visual Studio Code, you will see Teams Toolkit UI with all functionalities as shown in the following image: You can select **Quick Start** to explore the Teams Toolkit, or select **Create a new Teams App** to create one Teams project. You can view a list of all Toolkit features when you create or open an existing project in Visual Studio Code sidebar. It helps to add other required Teams capabilities to Teams app during developmen It helps you to optionally add cloud resources that fits your development needs. -### Edit manifest file +### Edit manifest file It helps you to edit the Teams app integration with Teams client. |
| platform | Add Incoming Webhook | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-incoming-webhook.md | The following table provides the features and description of an Incoming Webhook > > [!NOTE]+> > * Teams bots, messaging extensions, Incoming Webhook, and the Bot Framework support Adaptive Cards. Adaptive Cards is an open cross card platform framework that is used in all platforms such as Windows, Android, iOS, and so on. Currently, [Teams connectors](../../webhooks-and-connectors/how-to/connectors-creating.md) don't support Adaptive Cards. However, it is possible to create a [flow](https://flow.microsoft.com/blog/microsoft-flow-in-microsoft-teams/) that posts Adaptive Cards to a Teams channel. > * For more information on cards and webhooks, see [Adaptive cards and Incoming Webhooks](~/task-modules-and-cards/what-are-cards.md#adaptive-cards-and-incoming-webhooks). |
| platform | Add Outgoing Webhook | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-outgoing-webhook.md | Responses from your Outgoing Webhooks appear in the same reply chain as the orig > [!NOTE]+> > * You can send Adaptive Card, Hero card, and text messages as attachment with an Outgoing Webhook. > * Cards support formatting. For more information, see [format cards with markdown](~/task-modules-and-cards/cards/cards-format.md?tabs=adaptive-md%2Cconnector-html#format-cards-with-markdown). var responseMsg = JSON.stringify({ ```json {- "type": "message", - "attachments": [ - { - "contentType": "application/vnd.microsoft.card.adaptive", - "content": { - "type": "AdaptiveCard", - "version": "1.4", - "body": [ - { - "type": "TextBlock", - "text": "Request sent by: Megan" - }, - { - "type": "Image", - "url": "https://c.s-microsoft.com/en-us/CMSImages/DesktopContent-04_UPDATED.png?version=43c80870-99dd-7fb1-48c0-59aced085ab6" - }, - { - "type": "TextBlock", - "text": "Sample image for Adaptive Card.." - } - ] - } - } - ] + "type": "message", + "attachments": [ + { + "contentType": "application/vnd.microsoft.card.adaptive", + "content": { + "type": "AdaptiveCard", + "version": "1.4", + "body": [ + { + "type": "TextBlock", + "text": "Request sent by: Megan" + }, + { + "type": "Image", + "url": "https://c.s-microsoft.com/en-us/CMSImages/DesktopContent-04_UPDATED.png?version=43c80870-99dd-7fb1-48c0-59aced085ab6" + }, + { + "type": "TextBlock", + "text": "Sample image for Adaptive Card.." + } + ] + } + } + ] } ``` var responseMsg = JSON.stringify({ |-||--|-| | Outgoing Webhooks | Samples to create custom bots to be used in Microsoft Teams.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/outgoing-webhook/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/outgoing-webhook/nodejs)| - ## Step-by-step guide Follow the [step-by-step guide](../../sbs-outgoing-webhooks.yml) to create Outgoing Webhooks in Teams. |
| platform | Connectors Creating | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md | Users can complete the entire connector configuration experience without having 1. The user selects **Save**, which triggers a callback in code. > [!NOTE]+ > > * The code can process the save event by retrieving the webhook settings. Your code stores the webhook to post events later. > * The configuration experience is loaded inline within Teams. You can reuse your existing web configuration experience or create a separate version to be hosted specifically in Teams. Your code must include the Microsoft Teams JavaScript SDK. This gives your code access to APIs to perform common operations, such as getting the current user, channel, or team context and initiate authentication flows. -**To integrate the configuration experience** +To integrate the configuration experience: 1. Initialize the SDK by calling `microsoftTeams.initialize()`. 1. Call `microsoftTeams.settings.setValidityState(true)` to enable **Save**. The following table provides the parameters and the details of `GetSetting` resp Your code must handle users who return to edit an existing connector configuration. To do this, call `microsoftTeams.settings.setSettings()` during the initial configuration with the following parameters: -- `entityId` is the custom ID that represents what the user has configured and understood by your service.-- `configName` is a name that configuration code can retrieve.-- `contentUrl` is a custom URL that gets loaded when a user edits an existing connector configuration.+* `entityId` is the custom ID that represents what the user has configured and understood by your service. +* `configName` is a name that configuration code can retrieve. +* `contentUrl` is a custom URL that gets loaded when a user edits an existing connector configuration. This call is made as part of your save event handler. Then, when the `contentUrl` is loaded, your code must call `getSettings()` to pre populate any settings or forms in your configuration user interface. Run the following commands in Exchange Online PowerShell: * To disable connectors for the tenant: `Set-OrganizationConfig -ConnectorsEnabled:$false`. * To disable actionable messages for the tenant: `Set-OrganizationConfig -ConnectorsActionableMessagesEnabled:$false`. * To enable connectors for Teams, run the following commands:- * `Set-OrganizationConfig -ConnectorsEnabled:$true ` + * `Set-OrganizationConfig -ConnectorsEnabled:$true` * `Set-OrganizationConfig -ConnectorsEnabledForTeams:$true` * `Set-OrganizationConfig -ConnectorsActionableMessagesEnabled:$true` If you want the connector to be available only to the users in your organization After uploading the app package to configure and use the connector in a team, install the connector from the organization's app catalog. -**To set up a connector** +To set up a connector: 1. Select **Apps** from the left navigation bar. 1. In the **Apps** section, select **Connectors**. The following table provides the sample name and its description: |**Sample name** | **Description** | **.NET** | **Node.js** | |-||--|-|-| Connectors | Sample Office 365 Connector generating notifications to Teams channel.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-todo-notification/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-github-notification/nodejs)| -| Generic connectors sample |Sample code for a generic connector that is easy to customize for any system that supports webhooks.| | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-generic/nodejs)| +| Connectors | Sample Office 365 Connector generating notifications to Teams channel.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-todo-notification/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-github-notification/nodejs)| +| Generic connectors sample |Sample code for a generic connector that is easy to customize for any system that supports webhooks.| | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-generic/nodejs)| ## See also |
| platform | Connectors Using | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/connectors-using.md | To display the multiple-selection list in the compact style, specify `"isMultiSe For more information on connector card actions, see [Actions](/outlook/actionable-messages/card-reference#actions). > [!NOTE]+> > * Specifying `compact` for the `style` property in Microsoft Teams is the same as specifying `normal` for the `style` property in Microsoft Outlook. > * For the HttpPOST action, the bearer token is included with the requests. This token includes the Microsoft Azure Active Directory (Azure AD) identity of the Office 365 user who took the action. To post a message to the webhook with PowerShell, follow these steps: 1. Check the Microsoft Teams channel associated with the webhook URL. You can see the new card posted to the channel. Before you use the connector to test or publish your app, you must do the following: - - [Include two icons](../../concepts/build-and-test/apps-package.md#app-icons). - - Modify the `icons` portion of the manifest to the file names of the icons instead of URLs. + * [Include two icons](../../concepts/build-and-test/apps-package.md#app-icons). + * Modify the `icons` portion of the manifest to the file names of the icons instead of URLs. ## Send Adaptive Cards using an Incoming Webhook > [!NOTE]+> > * All native Adaptive Card schema elements, except `Action.Submit`, are fully supported. > * The supported actions are [**Action.OpenURL**](https://adaptivecards.io/explorer/Action.OpenUrl.html), [**Action.ShowCard**](https://adaptivecards.io/explorer/Action.ShowCard.html), and [**Action.ToggleVisibility**](https://adaptivecards.io/explorer/Action.ToggleVisibility.html). |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Discover Microsoft Teams platform features that are generally available (GA) and |02/03/2022| Test preview for monetized apps (developer preview)| Monetize your app > [Test preview for monetized apps](concepts/deploy-and-publish/appsource/prepare/Test-preview-for-monetized-apps.md)| |02/03/2022| In-app purchase flow for monetization of apps (developer preview) | Monetize your app > [In-app purchases](concepts/deploy-and-publish/appsource/prepare/in-app-purchase-flow.md) | - ## GA features Microsoft Teams platform features that are available to all app developers. Microsoft Teams platform features that are available to all app developers. | 01/17/2022 | People Picker in Adaptive cards for desktop | Build cards and task modules > Build cards > [People Picker in Adaptive Cards](task-modules-and-cards/cards/people-picker.md)| </details>- + <br> <details> Microsoft Teams platform features that are available to all app developers. Explore updates from the previous GA releases listed here. <br><br> - <details> <summary><b>2021</b></summary> Developer preview is a public program that provides early access to unreleased T |02/07/2022| Tools and SDKs |Teams Toolkit for Visual Studio Code > </br> ΓÇó Add capabilities to Teams app> [Add capabilities to your Teams apps](toolkit/add-capability.md) </br> ΓÇó Add cloud resources to Teams app> [Add cloud resources to your Teams app](toolkit/add-resource.md) | |02/02/2022| Introduced app manifest version 1.12 | App manifest > Public developer preview > [Manifest schema](resources/schem) | |02/03/2022| Test preview for monetized apps| Monetize your app > [Test preview for monetized apps](concepts/deploy-and-publish/appsource/prepare/Test-preview-for-monetized-apps.md)|-|02/03/2022| In-app purchase flow for monetization of apps | Monetize your app > [In-app purchases](concepts/deploy-and-publish/appsource/prepare/in-app-purchase-flow.md) +|02/03/2022| In-app purchase flow for monetization of apps | Monetize your app > [In-app purchases](concepts/deploy-and-publish/appsource/prepare/in-app-purchase-flow.md) |01/17/2022| People Picker in Adaptive cards for mobile | Build cards and task modules > Build cards > [People Picker in Adaptive Cards](task-modules-and-cards/cards/people-picker.md)| |01/10/2022 | Teams Toolkit for Visual Studio Code | Tools and SDKs > Teams Toolkit for Visual Studio Code > [Teams Toolkit fundamentals](toolkit/teams-toolkit-fundamentals.md) | |12/24/2021| Introduced step-by-step guide to grant Tab device permissions | App fundamentals > Device capabilities > [step-by-step guide to grant Tab device permissions](sbs-tab-device-permissions.yml) | |