Updates from: 05/20/2021 03:10:11
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
All users in a meeting receive the notifications sent through the `NotificationS
|Value|Type|Required|Description| |||-||
-|**conversationId**| string | Yes | The conversation identifier is available as part of bot invoke |
+|**conversationId**| string | Yes | The conversation identifier is available as part of bot invoke. |
#### Example
POST /v3/conversations/{conversationId}/activities
|Response code|Description| |||
-| **201** | The activity with signal is successfully sent |
+| **201** | The activity with signal is successfully sent. |
| **401** | The app responds with an invalid token. | | **403** | The app is unable to send the signal. This can happen due to various reasons such as the tenant admin disables the app, the app is blocked during live site migration, and so on. In this case, the payload contains a detailed error message. | | **404** | The meeting chat does not exist. |
The post-meeting and pre-meeting configurations are equivalent.
## See also
-> [!div class="nextstepaction"]
-> [In-meeting dialog design guidelines](design/designing-apps-in-meetings.md#use-an-in-meeting-dialog)
-> [!div class="nextstepaction"]
-> [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md)
+* [In-meeting dialog design guidelines](design/designing-apps-in-meetings.md#use-an-in-meeting-dialog)
+* [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md)
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
The in-meeting tab is a canvas for augmenting collaboration during meetings. Att
People might use the in-meeting tab to:
-* Provide detailed feedback (for example, evaluate a job candidate)
-* Quickly create a poll, survey, or task item for the meeting participants
-* Display notes relevant to the meeting (for example, information about a sales lead)
+* Provide detailed feedback. For example, evaluate a job candidate.
+* Create a poll, survey, or task item for the meeting participants.
+* Display notes relevant to the meeting. For example, information about a sales lead.
:::image type="content" source="../../assets/images/apps-in-meetings/use-in-meeting-tab.png" alt-text="Example shows how you can present poll content in an in-meeting tab." border="false":::
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
The following table provides the user types and what features each user can acce
## See also
-> [!div class="nextstepaction"]
-> [Tab](../tabs/what-are-tabs.md#how-do-tabs-work)
-
-> [!div class="nextstepaction"]
-> [Bot](../bots/what-are-bots.md)
-
-> [!div class="nextstepaction"]
-> [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md)
-
-> [!div class="nextstepaction"]
-> [Design your app](../apps-in-teams-meetings/design/designing-apps-in-meetings.md)
+* [Tab](../tabs/what-are-tabs.md#understand-how-tabs-work)
+* [Bot](../bots/what-are-bots.md)
+* [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md)
+* [Design your app](../apps-in-teams-meetings/design/designing-apps-in-meetings.md)
-## Next steps
+## Next step
> [!div class="nextstepaction"] > [Build your app](create-apps-for-teams-meetings.md)
platform Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/design/bots.md
Bots are available in chats, channels, and personal apps. You can add a bot one
* Using the app flyout by selecting the **More** icon on the left side of Teams. * With an @mention in the new chat or compose box (the following example shows how you can do this in a group chat).
+ :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention." border="false":::
## Introduce a bot
ItΓÇÖs critical that your bot introduces itself and describes what it can do. Th
### Welcome message in a one-on-one chat
-In personal contexts, welcome messages set your bot's tone. The message includes a greeting, what the bot can do, and some suggestions for how to interact (for example, “Try asking me about …”). If possible, these suggestions should return stored responses without having to sign in.
+In personal contexts, welcome messages set your bot's tone. The message includes a greeting, what the bot can do, and some suggestions for how to interact. For example, “Try asking me about …”. If possible, these suggestions should return stored responses without having to sign in.
:::image type="content" source="../../assets/images/bots/bot-personal-welcome.png" alt-text="Example shows a bot introduction in a personal app." border="false":::
DonΓÇÖt forget: In the bot command menu (**What can I do?**), you must also prov
### Tours
-You can include a tour with welcome messages and if the bot responds to something like a ΓÇ£helpΓÇ¥ command. A tour is the most effective way to describe what your bot can do. If applicable, theyΓÇÖre also great for describing your appΓÇÖs other features (for example, include screenshots of your messaging extension).
+You can include a tour with welcome messages and if the bot responds to something like a ΓÇ£helpΓÇ¥ command. A tour is the most effective way to describe what your bot can do. If applicable, theyΓÇÖre also great for describing your appΓÇÖs other features. For example, include screenshots of your messaging extension.
> [!IMPORTANT] > Tours should be accessible without having to sign in. #### One-on-one chats
-In a personal app, a carousel can provide an effective overview of your bot and any other features of your app. Including buttons the let users try bot commands is encouraged (for example, **Create a task**).
+In a personal app, a carousel can provide an effective overview of your bot and any other features of your app. Including buttons the let users try bot commands is encouraged. For example, **Create a task**.
:::image type="content" source="../../assets/images/bots/bot-tour-personal.png" alt-text="Example shows a bot tour in a one-on-one chat." border="false":::
Use a thesaurus and get people from as many different backgrounds as possible to
Design your bot to recognize intent, which captures what someone wants from a bot in response to a message or query. Intent classifies a message or query as a single action with one or more data objects that are affected by the action.
-The following examples outline the user intent and data in messages sent to bots.
+The following examples outline the user intent and data in messages sent to bots:
:::row::: :::column span="":::
The following examples outline the user intent and data in messages sent to bots
Learn what users say when chatting with your bot. This will be an ongoing, iterative process as your user base grows in different locations and orgs. You can tune your bot's language recognition and intent mapping with Microsoft Language Understanding (LUIS).
-* [Understanding LUIS](https://docs.microsoft.com/azure/cognitive-services/luis/artificial-intelligence): Find out how LUIS uses AI to provide natural language understanding (NLU) to your app data.
+* [Understanding LUIS](/azure/cognitive-services/luis/artificial-intelligence): Find out how LUIS uses AI to provide natural language understanding (NLU) to your app data.
* [Integrating with LUIS](https://www.luis.ai/): Add natural language capabilities to your bot without the complex process of creating machine learning models. ## Use cases
Bots can deliver an exact match to a query or a group of related matches to help
While your bot can support complete requests and questions, it should also be able to handle multi-turn interactions. Anticipating possible next steps makes it much easier for people to a complete task flow (rather than expecting them to craft a comprehensive request).
-In the following example, the bot responds to each message with options for what might want to do next.
+In the following example, the bot responds to each message with options for what might want to do next:
:::image type="content" source="../../assets/images/bots/bot-multi-turn.png" alt-text="Example shows a multi-turn interaction with a bot." border="false":::
In the following example, the bot responds to each message with options for what
With proactive messaging, your bot can act like a digest that sends notifications relevant to an individual, group chat, or channel at a specific frequency. A bot may send a message when something has changed in a document or a work item is closed.
-In the following example, a user gets a toast notification that a bot messaged them in another channel.
+In the following example, a user gets a toast notification that a bot messaged them in another channel:
:::image type="content" source="../../assets/images/bots/bot-proactive-message-toast.png" alt-text="Example shows a toast of a bot proactively messaging a user from another channel." border="false":::
Now in that channel, the user can read their message from the bot.
### Use tabs with bots
-A tab can make your bot easier to use. For example, if your bot can create work items, it would be nice to show all those items in a central location inside a tab. See more about [designing tabs](../../tabs/design/tabs.md).
+A tab can make your bot easier to use. For example, if your bot can create work items, it would be nice to show all those items in a central location inside a tab. For more information, See [designing tabs](../../tabs/design/tabs.md).
:::image type="content" source="../../assets/images/bots/bot-with-tab.png" alt-text="Example shows how a tab can help organize bot content." border="false":::
platform Add Power Virtual Agents Bot To Teams https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/add-power-virtual-agents-bot-to-teams.md
# 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.
App Studio is a Teams app. Install App Studio from the Teams store that simplifi
&emsp;&emsp; <img width="450px" alt="Installing App Studio" src="../../assets/images/get-started/app-studio-install.png"/> 1. **Create the Teams app manifest in App Studio**
-Bots in Teams are defined by an app manifest JSON file that provides the basic information about your bot and its capabilities. In **App Studio**, select **Manifest editor**, and select **Create a new app**.
-The following image guides you to create a new app in App Studio:
+Bots in Teams are defined by an app manifest JSON file that provides the basic information about your bot and its capabilities. In **App Studio**, select **Manifest editor**, and select **Create a new app**.
- ![create a new app](../../assets/images/get-started/create-new-app.png)
+ ![create a new app](../../assets/images/get-started/create-new-app.png)
1. **Add your bot details**
-Complete all the required fields. For a full description of each field see [manifest schema definition](../../resources/schem).
-The following image guides you to add the app details:
+Complete all the required fields. For a full description of each field see [manifest schema definition](../../resources/schem).
- ![add app details](../../assets/images/get-started/add-app-details.png)
+ ![add app details](../../assets/images/get-started/add-app-details.png)
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 guides you to set-up a bot:
- ![Bot set-up](../../assets/images/get-started/bot-set-up.png)
- The following image guides you to set-up an existing bot:
+ The following image depicts how to set-up an existing bot:
- ![existing bot set-up](../../assets/images/get-started/existing-bot-set-up.png)
+ ![existing bot set-up](../../assets/images/get-started/existing-bot-set-up.png)
+
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 **Scope** > **Personal** > **Save**.
-The following image guides you to set-up an existing bot:
+ 1. Select **Scope** > **Personal** > **Save**.
- ![add app id](../../assets/images/get-started/add-app-id.png)
+ ![add app id](../../assets/images/get-started/add-app-id.png)
1. **Add valid domains for your bot** This step is only required if your bot requires the user to sign in. Select **Domains and permissions** and in the **Valid Domains** field, provide the following input:
This step is only required if your bot requires the user to sign in. Select **Do
token.botframework.com ```
-7. **Test and distribute your bot**
+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.
-8. **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. ## See also
platform Add Authentication https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/authentication/add-authentication.md
In this article you'll learn:
- Knowledge of Azure and OAuth 2.0 development. - The current versions of Visual Studio and Git. - Azure account. If needed, you can create an [Azure free account](https://azure.microsoft.com/free/).-- The following sample.
+- The following sample:
| Sample | BotBuilder version | Demonstrates | |:|::|:|
In this procedure you'll use an Azure AD provider; other Azure AD supported iden
### Configure the identity provider connection and register it with the bot
-Note-there are two options for Service Providers here-Azure AD V1 and Azure AD V2. The differences between the two providers are summarized [here](https://docs.microsoft.com/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-Azure AD V1 and 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.
#### Azure AD V1
The following image displays the corresponding selection in the resource page:
1. Select **Accept**. 1. This should then redirect you to a **Test Connection to \<your-connection-name> Succeeded** page. Refresh the page if you get an error. The following image is an example:
- ![teams bots app auth connection str adv1](../../../assets/images/authentication/auth-bot-connection-test-token.PNG)
+ ![teams bots app auth connection str adv1](../../../assets/images/authentication/auth-bot-connection-test-token.PNG)
The connection name is used by the bot code to retrieve user authentication tokens.
Alternatively, while in Visual Studio, you can follow these steps:
1. Select the **Publish** button. 1. In the next dialog window, enter the required information. The following is an example:
- ![auth-app-service](../../../assets/images/authentication/auth-bot-app-service.png)
+ ![auth-app-service](../../../assets/images/authentication/auth-bot-app-service.png)
1. Select **Create**. 1. If the deployment completes successfully, you should see it reflected in Visual Studio. Moreover, a page is displayed in your default browser saying *Your bot is ready!*. The URL will be similar to this: `https://botteamsauth.azurewebsites.net/`. Save it to a file.
Alternatively, while in Visual Studio, you can follow these steps:
If you haven't done it already, install the [Microsoft Bot Framework Emulator](https://aka.ms/bot-framework-emulator-readme). See also [Debug with the Emulator](https://aka.ms/bot-framework-emulator-debug-with-emulator).
-In order for the bot sample login to work you must configure the Emulator as shown below.
+In order for the bot sample login to work you must configure the Emulator.
### Configure the Emulator for authentication
-If a bot requires authentication, you must configure the Emulator as shown below.
+If a bot requires authentication, you must configure the Emulator. To configure:
1. Start the Emulator. 1. In the Emulator, select the gear icon &#9881; in the bottom left, or the **Emulator Settings** tab in the upper right.
This launches ngrok to listen on the port you specify. In return, it gives you a
### TeamsAppManifest/manifest.json
-This manifest contains information needed by Microsoft Teams to connect with the bot.
+This manifest contains information needed by Microsoft Teams to connect with the bot:
```json {
Within the following dialog step, check for the presence of a token in the resul
-> [!div class="nextstepaction"]
-> [Learn about adding authentication via Azure Bot Service](https://aka.ms/azure-bot-add-authentication)
+## See also
+
+[Add authentication through Azure Bot Service](https://aka.ms/azure-bot-add-authentication)
<!-- Footnote-style links --> [azure-portal]: https://ms.portal.azure.com
-[concept-basics]: https://docs.microsoft.com/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&preserve-view=true
-[concept-state]: https://docs.microsoft.com/azure/bot-service/bot-builder-concept-state?view=azure-bot-service-4.0&preserve-view=true
-[concept-dialogs]: https://docs.microsoft.com/azure/bot-service/bot-builder-concept-dialog?view=azure-bot-service-4.0&preserve-view=true
-[simple-dialog]: https://docs.microsoft.com/azure/bot-service/bot-builder-dialog-manage-conversation-flow?view=azure-bot-service-4.0&preserve-view=true
+[concept-basics]: /azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&preserve-view=true
+[concept-state]: /azure/bot-service/bot-builder-concept-state?view=azure-bot-service-4.0&preserve-view=true
+[concept-dialogs]: /azure/bot-service/bot-builder-concept-dialog?view=azure-bot-service-4.0&preserve-view=true
+[simple-dialog]: /azure/bot-service/bot-builder-dialog-manage-conversation-flow?view=azure-bot-service-4.0&preserve-view=true
[teams-auth-bot-cs]: https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth
platform Auth Aad Sso Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md
Complete the following steps to get 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.
-2. If the current user is using your bot application for the first time, a request prompt appears requesting the user to do one of the following:
+1. If the current user is using your bot application for the first time, a request prompt appears requesting the user to do one of the following:
* Provide consent, if required. * Handle step-up authentication, such as two-factor authentication.
-3. Teams requests the bot application token from the AAD endpoint for the current user.
+1. Teams requests the bot application token from the AAD endpoint for the current user.
-4. AAD sends the bot application token to the Teams application.
+1. AAD sends the bot application token to the Teams application.
-5. Teams sends the token to the bot as part of the value object returned by the invoke activity with the name **sign-in/tokenExchange**.
+1. Teams sends the token to the bot as part of the value object returned by the invoke activity with the name **sign-in/tokenExchange**.
-6. The parsed token in the bot application provides the required information, such as the user's email address.
+1. The parsed token in the bot application provides the required information, such as the user's email address.
## Develop an SSO Teams bot Complete the following steps to develop an SSO Teams bot: 1. [Register your app through the AAD portal](#register-your-app-through-the-aad-portal).
-2. [Update your Teams application manifest for your bot](#update-your-teams-application-manifest-for-your-bot).
-3. [Add the code to request and receive a bot token](#add-the-code-to-request-and-receive-a-bot-token).
+1. [Update your Teams application manifest for your bot](#update-your-teams-application-manifest-for-your-bot).
+1. [Add the code to request and receive a bot token](#add-the-code-to-request-and-receive-a-bot-token).
### Register your app through the AAD portal
platform Auth Flow Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/authentication/auth-flow-bot.md
Sample code showing the bot authentication process:
| Teams authentication | This sample demonstrates authentication in Microsoft Teams apps. | [View](https://github.com/OfficeDev/microsoft-teams-sample-auth-node) | | | | Bot authentication | This sample demonstartes how to use authentication for a bot runnning in Microsoft Teams | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/46.teams-auth)
-## More details
-
-For detailed implementation walkthroughs for bot authentication targeting Azure AD see:
+## See also
[Add authentication to your Teams bot](add-authentication.md)
platform Request Headers Of The Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/request-headers-of-the-bot.md
The current outgoing requests to the bot do not contain in the header or URL any
## Request header fields
-Two non-standard request header fields are added to all the requests sent to bots, for both asynchronous flow and synchronous flow. The following table provides the request header fields and their values.
+Two non-standard request header fields are added to all the requests sent to bots, for both asynchronous flow and synchronous flow. The following table provides the request header fields and their values:
| Field key | Value | |-|--|
platform Build Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-bot.md
Ensure that you understand how to set up and build a simple Teams app. For more
The Microsoft Teams Toolkit helps you set up the following components for your app:
-* **App configurations and scaffolding** relevant to bots
-* **Bot** that's automatically registered with the Microsoft Azure Bot Service
+* **App configurations and scaffolding** relevant to bots.
+* **Bot** that's automatically registered with the Microsoft Azure Bot Service.
**To create your app project**
Much of the app configurations and scaffolding are set up automatically when you
If you created a tab in another tutorial, the app scaffolding for the bot is different. Unlike tabs, bot development doesn't require you to build any front-end web components or use the Teams JavaScript client SDK. Instead, the scaffolding uses the [Microsoft Bot Framework](https://dev.botframework.com/), which is an open-source SDK for building intelligent, enterprise-grade bots that can work on the web, mobile, and of course Teams!
-The `botActivityHandler.js` file, located in the root directory of your project, is the Teams-specific handler that handles bot activities, such as how the bot responds to specific messages. The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, is the Teams specific handler that handles bot activities such as how the bot responds to specific messages.
+The `botActivityHandler.js` file, located in the root directory of your project, is the Teams-specific handler that handles bot activities, such as how the bot responds to specific messages. The app scaffolding provides a `botActivityHandler.js` file located in the root directory of your project, is the Teams specific handler that handles bot activities such as how the bot responds to specific messages.
## 3. Securely expose your localhost to the internet
Tunneling is a protocol that allows you to transport data across a network. And
To use a bot in Teams, you must register it with the Azure Bot Service. This is done automatically when you set up your app using the Teams Toolkit.
-You must still specify an endpoint address to receive and process user messages, or requests, sent to the bot. Typically, the URL looks like `https://HOST_URL/api/messages`. You can configure this quickly in the toolkit.
+You must still specify an endpoint address to receive and process user messages, or requests sent to the bot. Typically, the URL looks like `https://HOST_URL/api/messages`. You can configure this in the toolkit.
1. In Visual Studio Code, open **Microsoft Teams Toolkit**. 1. Select **Bots** > **Existing bot registrations** and select the bot you created during setup.
Let's say "Hello" to your bot.
:::image type="content" source="../assets/images/build-your-first-app/teams-client-bot.png" alt-text="A screenshot showing a user say 'Hello' to a Teams bot and getting a response.":::
- You have now created a basic Teams bot that can communicate with users one-on-one or in group settings (channels and chats) 🎉
+ You have now created a basic Teams bot that can communicate with users one-on-one or in group settings (channels and chats) 🎉.
## Troubleshoot your bot
The following information may help if you had issues completing this tutorial.
### Bot isn't connected to Teams
-If you installed your app but the bot isn't working, make sure the bot is [connected to the Azure Bot Service's Teams *channel*](https://docs.microsoft.com/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
+If you installed your app but the bot isn't working, make sure the bot is [connected to the Azure Bot Service's Teams *channel*](/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
-It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](https://docs.microsoft.com/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
+It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
## See also
platform Build Channel Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-channel-tab.md
Much of the app configurations and scaffolding are set up automatically when you
</ul> </div> ```
+
1. Go to the `src/components` directory and open the `Tab.js` file. Locate the `render()` function and paste your code inside `return()` as shown in the following example: ```JavaScript render() {
Much of the app configurations and scaffolding are set up automatically when you
); } ```
+
1. Go to the `src/components` directory and update the `App.css` file with the following code to make the email links easier to read in any theme that is used: ```CSS a {
When you add a channel tab, the app name displays by default, for example, **fir
1. Go to the `src/components` directory and open the `TabConfig.js` file. 1. Add the `suggestedDisplayName` property with the tab name you want to display by default under `microsoftTeams.settings.setSettings` as shown in the following example:
- ```JavaScript
- microsoftTeams.settings.setSettings({
- "contentUrl": "https://localhost:3000/tab",
- "suggestedDisplayName": "Team Contacts"
- });
- ```
+ ```JavaScript
+ microsoftTeams.settings.setSettings({
+ "contentUrl": "https://localhost:3000/tab",
+ "suggestedDisplayName": "Team Contacts"
+ });
+ ```
## 6. Build and run your app
Your app is ready to test in Teams. To do this, you must have an account that al
## See also * [Build and run your first Microsoft Teams app](../build-your-first-app/build-and-run.md)
-* [Teams JavaScript client SDK](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
+* [Teams JavaScript client SDK](/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
* [Designing your tab for Microsoft Teams desktop and web](../tabs/design/tabs.md) * [Designing your Microsoft Teams app with UI templates](../concepts/design/design-teams-app-ui-templates.md) * [Tabs on mobile](../tabs/design/tabs-mobile.md) * [Single sign-on (SSO) support for tabs](../tabs/how-to/authentication/auth-aad-sso.md)
-* [Microsoft Teams API overview](https://docs.microsoft.com/graph/teams-concept-overview)
+* [Microsoft Teams API overview](/graph/teams-concept-overview)
* [Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams](../tabs/quickstarts/create-personal-tab-node-yeoman.md) ## Next step
Your app is ready to test in Teams. To do this, you must have an account that al
> [Build a bot](../build-your-first-app/build-bot.md) > [!div class="nextstepaction"]
-> [Build a messaging extension](../build-your-first-app/build-messaging-extension.md)
+> [Build a messaging extension](../build-your-first-app/build-messaging-extension.md)
platform Build First App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-first-app-overview.md
Build a simple app to learn the basics of Teams app development. Once you see "H
## What you'll learn
-* Get up and running quickly with the Teams Toolkit, a Visual Studio Code extension
-* Configure your app with App Studio
-* Get familiar with Teams developer tools and SDKs
-* Consider important Teams app concepts, such as authentication and design best practices
+* Get up and running quickly with the Teams Toolkit, a Visual Studio Code extension.
+* Configure your app with App Studio.
+* Get familiar with Teams developer tools and SDKs.
+* Consider important Teams app concepts, such as authentication and design best practices.
-You can build Teams app using any technology of your choice, for example, command-line interface (CLI). But, these articles help you get started with the following recommended tools and technologies:
+You can build a Teams app using any technology of your choice, for example, command-line interface (CLI). But, these articles help you get started with the following recommended tools and technologies:
* Teams Toolkit, a Visual Studio Code extension * React.js for tabs
You can build custom Teams apps for yourself, people in your org, or people all
Some typical scenarios that a custom Teams app can help with are:
-* Embed web-based content, such as a web app or part of a website, in the Teams client
-* Look up information quickly in another system and adding it to a Teams conversation
-* Trigger workflows and processes directly from what's said in a conversation
+* Embed web-based content, such as a web app or part of a website, in the Teams client.
+* Look up information quickly in another system and adding it to a Teams conversation.
+* Trigger workflows and processes directly from what's said in a conversation.
### App capabilities and tools
An app is made up of one or more Teams capabilities and user interaction points.
| **App capabilities**| **Interaction points** | **Recommended tools** | **SDKs** | **Technology stacks** | |--|--|--|--|--|
-| Tabs | Spaces where users can interact with embedded web content in personal and shared contexts | VS Code with Teams Toolkit extension or Yeoman Generator | Teams JavaScript client SDK | General web technologies (HTML, CSS, and JavaScript) or React.js |
-| Bots | Chatbots that interact with users in personal and shared contexts | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
-| Messaging extensions | Shortcuts for inserting app content or acting on a message without navigating away from the conversation | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
+| Tabs | Spaces where users can interact with embedded web content in personal and shared contexts. | VS Code with Teams Toolkit extension or Yeoman Generator | Teams JavaScript client SDK | General web technologies (HTML, CSS, and JavaScript) or React.js |
+| Bots | Chatbots that interact with users in personal and shared contexts. | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
+| Messaging extensions | Shortcuts for inserting app content or acting on a message without navigating away from the conversation. | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
### Teams doesn't host your app
platform Build Messaging Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-messaging-extension.md
Make sure that you understand how to set up and build a simple Teams app. For mo
The Microsoft Teams Toolkit helps you set up the following components for your messaging extension:
-* **App configurations and scaffolding** relevant to messaging extensions
-* **Bot** for your messaging extension that's automatically registered with the Microsoft Azure Bot Service
+* **App configurations and scaffolding** relevant to messaging extensions.
+* **Bot** for your messaging extension that's automatically registered with the Microsoft Azure Bot Service.
**To create your app project**
You still must specify a bot endpoint URL to receive and process search queries
You've set up a URL to host your messaging extension and configured it to handle searches. It's time to get your app up and running.
-1. Open terminal and go to the root directory of your app project
+1. Open terminal and go to the root directory of your app project.
1. Run `npm install`. 1. Run `npm start`.
The following information may help if you had issues completing this tutorial.
**Bot isn't connected to Teams**
-If you installed your app but it isn't working, make sure the messaging extension's bot is [connected to the Azure Bot Service's Teams *channel*](https://docs.microsoft.com/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
+If you installed your app but it isn't working, make sure the messaging extension's bot is [connected to the Azure Bot Service's Teams *channel*](/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
-It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](https://docs.microsoft.com/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
+It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
## See also
It's important to understand that this isn't the same as a channel in Teams. In
> [Define search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) > [!div class="nextstepaction"]
-> [Respond to users' searches](../messaging-extensions/how-to/search-commands/respond-to-search.md)
+> [Respond to users' searches](../messaging-extensions/how-to/search-commands/respond-to-search.md)
platform App Studio Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/app-studio-overview.md
App Studio makes it easy to start creating or integrating your own Microsoft Tea
## Installing App Studio
-App Studio is a Teams app which can be found in the Teams store. Follow this link for direct download: [App Studio](https://aka.ms/InstallTeamsAppStudio) (you can also find the app in the app store).
+App Studio is a Teams app which can be found in the Teams store. Follow this link for direct download [App Studio](https://aka.ms/InstallTeamsAppStudio). You can also find the app in the app store.
In the store, search for App Studio.
Select the App Studio tile to open the app install page:
![Configure app studio](~/assets/images/get-started/teamsappstudioconfiguration.png)
-Select *install*.
+Select **install**.
![app studio](~/assets/images/get-started/teamsappstudio.png)
-Once you are in App Studio, click on the *Manifest editor* tab where you can either import an existing app or create a new app.
+Once you are in App Studio, click on the **Manifest editor** tab where you can either import an existing app or create a new app.
## App Studio Features
The capabilities section of the Manifest Editor is where the app's capabilities
You must also provide any additional domains that the tab expects to load from or link to.
-* **Personal Tabs.** This section lets you define a set of tabs that are presented by default in the personal app experience (i.e. the experience a user has with your app outside the context of a team or channel). In this section, provide the tab name, a unique identifier, the URL that points to the UI to be displayed in Teams, and optionally, the URL to use if a user opts to view the tab in a browser. As with Teams tabs, provide any additional domains from which the tab expects to load from or link to.
+* **Personal Tabs.** This section lets you define a set of tabs that are presented by default in the personal app experience (experience a user has with your app outside the context of a team or channel). In this section, provide the tab name, a unique identifier, the URL that points to the UI to be displayed in Teams, and optionally, the URL to use if a user opts to view the tab in a browser. With Teams tabs, provide any additional domains from which the tab expects to load from or link to.
##### Bots This section allows you to add a [conversational bot](~/bots/what-are-bots.md) to your app. If you already have a bot registered with Bot Framework, you can add that bot by clicking *Set Up* and supplying the bot's name, Bot Framework ID, and defining the scopes in which the bot will work.
-If you have not yet registered a bot with the Bot Framework, click *Register* to create a new one. Once youΓÇÖre done registering your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.
+If you have not yet registered a bot with the Bot Framework, click **Register** to create a new one. Once youΓÇÖre done registering your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.
After you have supplied your bot's information, you can now optionally define a list of commands that your bot can suggest to users. Add the name of the command, a description of the command which indicates its syntax and arguments, and the scope(s) to which this command should apply.
-Note that if you have defined your bot to only support one scope, commands specified for the unsupported scope will be ignored. You can edit the scopes your bot supports at any time.
+> [!NOTE]
+> If you have defined your bot to only support one scope, the commands specified for the unsupported scope is ignored. You can edit the scopes your bot supports at any time.
##### Connectors
-This section allows you to add a connector to your app. If you already have registered an Office 365 connector, choose *Set up* and enter the name and ID of the connector. If you want a new connector click *Register* to be taken to the Connector Developer Dashboard in your browser.
+This section allows you to add a connector to your app. If you already have registered an Office 365 connector, choose **Set up** and enter the name and ID of the connector. If you want a new connector click **Register** to be taken to the Connector Developer Dashboard in your browser.
> [!NOTE]
-> App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. For example, if the Teams admin customizes the name of an app from *Contoso* to *Contoso Agent*, then the app will appear with the new name *Contoso Agent* to users. However, while adding a connector to a chat, in the list the connectors will still show the name of the app as *Contoso*.
+> App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. For example, if the Teams admin customizes the name of an app from **Contoso** to **Contoso Agent**, then the app will appear with the new name **Contoso Agent** to users. However, while adding a connector to a chat, in the list the connectors will still show the name of the app as **Contoso**.
##### Messaging Extensions [Messaging extensions](~/messaging-extensions/what-are-messaging-extensions.md) are a powerful way for users to engage with your app within Microsoft Teams. Users can query for information from your service and post that information in the form of cards, right into the channel or chat conversation.
-Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. Otherwise, click *Register* to create one and enter the information afterward. Select whether the configuration of a messaging extension can be updated by the user.
+Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. Otherwise, click **Register** to create one and enter the information afterward. Select whether the configuration of a messaging extension can be updated by the user.
Once you have the underlying bot configured, define the commands and parameters which the messaging extension can accept. Each command requires a title and an ID. The command can optionally contain a description for the user. Each command can support up to five parameters, each of which requires:
-* The name of the parameter as it appears in the Teams client and is included in the user request
-* A user-friendly title
-* An optional description
+* The name of the parameter as it appears in the Teams client and is included in the user request.
+* A user-friendly title.
+* An optional description.
> [!NOTE] > To create messaging extension using app studio, see [create messaging extension using app studio](~/resources/create-messaging-extension-using-appstudio.md).
On your project home page, you can upload your app to a team, submit your app to
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) via 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.
+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.
If you already have a card that you would like to verify inside Teams, you can paste the JSON for that card into the JSON tab under *Add card info* and send it to yourself to see what it looks like in a chat. ### React Control Library >[!Note]
-> This React control library will be deprecated in the future. Consider using the [Fluent-UI react controls as an alternative](https://microsoft.github.io/fluent-ui-react/) (formerly Stardust UI).
+> This React control library is deprecated in the future. Consider using the [Fluent-UI react controls as an alternative](https://microsoft.github.io/fluent-ui-react/) previously Stardust UI.
Creating an app that follows the Teams best practices is a great way to give your app a look and feel that fits seamlessly with the Teams client experience. The UI controls that you use are critical to achieving that end. To make it easier to create a consistent UI, App Studio provides several categories of UI controls which follow Teams design principles.
platform Apps Localization https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/apps-localization.md
Last updated 05/15/2018
When localizing your Microsoft Teams app, you must consider the following: 1. Your Teams store listing (if applicable).
-1. The end-user facing strings in your app manifest (for example bot commands).
+1. The end-user facing strings in your app manifest. For example bot commands.
1. Responding to localized text submitted from your users. ## Localizing your AppSource listing
If you're publishing to the store, you need to be aware that localizing your App
### Example of configuring localization
-To configure an additional language for your app, in [Partner Center](/office/dev/store/submit-to-appsource-via-partner-center), select both English and the additional language of the app. French is used in this example.
+To configure an additional language for your app, in [Partner Center](/office/dev/store/submit-to-appsource-via-partner-center), select both English and the additional language of the app. French is used in this example:
1. Add English language * Fill in the app name.
platform Apps Package https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/apps-package.md
The color icon submitted in your app package must be square. DonΓÇÖt round the c
#### Don't: Copy other brands
-Your icons must not mimic any copyrighted products that you don't own (for example, a design similar to a Microsoft product or brand).
+Your icons must not mimic any copyrighted products that you don't own. For example, a design similar to a Microsoft product or brand.
### Examples
platform Debug https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/debug.md
You can use any externally addressable service to host your development and prod
To load and run your experience within Microsoft Teams, you need to create a package and upload it into Teams. For more information, see:
-* [Create the package for your Microsoft Teams app](~/concepts/build-and-test/apps-package.md)
-* [Upload your app in Microsoft Teams](~/concepts/deploy-and-publish/apps-upload.md)
+* [Create the package for your Microsoft Teams app](~/concepts/build-and-test/apps-package.md).
+* [Upload your app in Microsoft Teams](~/concepts/deploy-and-publish/apps-upload.md).
## Next step
platform Deep Links https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/deep-links.md
Alternatively, you can also generate deep links programmatically, using the form
### Show a deep link to an item within your tab
-To show a dialog box that contains a deep link to an item within your tab, call `microsoftTeams.shareDeepLink({ subEntityId: <subEntityId>, subEntityLabel: <subEntityLabel>, subEntityWebUrl: <subEntityWebUrl> })`
+To show a dialog box that contains a deep link to an item within your tab, call `microsoftTeams.shareDeepLink({ subEntityId: <subEntityId>, subEntityLabel: <subEntityLabel>, subEntityWebUrl: <subEntityWebUrl> })`.
Provide the following fields:
The query parameters are:
| `entityId`&emsp; | The ID for the item in the tab, which you provided when [configuring the tab](~/tabs/how-to/create-tab-pages/configuration-page.md).|Tasklist123| | `entityWebUrl` or `subEntityWebUrl`&emsp; | An optional field with a fallback URL to use if the client does not support rendering the tab. | https://tasklist.example.com/123 or https://tasklist.example.com/list123/task456 | | `entityLabel` or `subEntityLabel`&emsp; | A label for the item in your tab, to use when displaying the deep link. | Task List 123 or "Task 456 |
-| `context`&emsp; </br></br>* `subEntityId`&emsp;</br></br> * `channelId`&emsp;| A JSON object containing the following fields</br></br> * An ID for the item within the tab. </br></br> * The Microsoft Teams channel ID that is available from the tab [context](~/tabs/how-to/access-teams-context.md). |
+| `context`&emsp; </br></br>* `subEntityId`&emsp;</br></br> * `channelId`&emsp;| A JSON object containing the following fields:</br></br> * An ID for the item within the tab. </br></br> * The Microsoft Teams channel ID that is available from the tab [context](~/tabs/how-to/access-teams-context.md). |
| `subEntityId`&emsp; | An ID for the item within the tab. |Task456 | | `channelId`&emsp; | The Microsoft Teams channel ID that is available from the tab [context](~/tabs/how-to/access-teams-context.md). This property is only available in configurable tabs with a scope of **team**. It is not available in static tabs, which have a scope of **personal**.| 19:cbe3683f25094106b826c9cada3afbe0@thread.skype |
platform Test App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/test-app-overview.md
keywords: Configure Microsoft 365 tenant Teams uploading test app
After integrating your app with Microsoft Teams, you must test your app before publishing it. The ultimate goal is to get as many users for your app, therefore, ensure to test the app on multiple devices that users could use. For testing your app:
-* Prepare your Microsoft 365 tenant
-* Choose a workspace to test and debug your app
-* Add test data to your Microsoft 365 tenant
+* Prepare your Microsoft 365 tenant.
+* Choose a workspace to test and debug your app.
+* Add test data to your Microsoft 365 tenant.
## Prepare your Microsoft 365 tenant
platform Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/capabilities-overview.md
Your Teams app have one or all of the following core capabilities:
* [Bots](../bots/what-are-bots.md) * [Webhooks and connectors](../webhooks-and-connectors/what-are-webhooks-and-connectors.md)
-Your app can also take advantage of advanced capabilities, such as the [Microsoft Graph API for Teams](https://docs.microsoft.com/graph/teams-concept-overview).
+Your app can also take advantage of advanced capabilities, such as the [Microsoft Graph API for Teams](/graph/teams-concept-overview).
-The following illustration gives you an idea of which capabilities will provide the features you want in your app.
+The following illustration gives you an idea of which capabilities will provide the features you want in your app:
:::image type="content" source="../assets/images/capabilities-overview.png" alt-text="Mind map illustrating what Teams app capabilities are.":::
For example, you can collect user input in a form built as a tab in the app. You
## See also -- [Build apps for Teams](../overview.md)
+[Build apps for Teams](../overview.md)
## Next step
platform Apps Upload https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/apps-upload.md
You can sideload Microsoft Teams apps without having to publish to your organization or the Teams store. This makes sense in the following scenarios: * You want to test and debug an app locally yourself or with other developers.
-* You built an app just for yourself (for example, to automate a workflow).
-* You built an app for a small set of users (such as your work group).
+* You built an app just for yourself. For example, to automate a workflow.
+* You built an app for a small set of users, such as, your work group.
## Prerequisites
platform Create Partner Center Dev Account https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/prepare/create-partner-center-dev-account.md
# Create a Partner Center developer account
-To publish your app to the Microsoft Teams store, you must [set up your Partner Center developer account](https://docs.microsoft.com/office/dev/store/open-a-developer-account). Depending on your scenario, you might be able to use an existing account.
+To publish your app to the Microsoft Teams store, you must [set up your Partner Center developer account](/office/dev/store/open-a-developer-account). Depending on your scenario, you might be able to use an existing account.
## FAQ
Support tickets get resolved in a week. Check for updates sent to the email you
Send an email to <a href="mailto:teamsubm@microsoft.com">teamsubm@microsoft.com</a> with the following details:
-* **Subject Line**: Partner Center Account Issue for *<your app name>*
+* **Subject Line**: Partner Center Account Issue for *<your app name>*.
* **Email body**:
- * Support ticket number
- * Your seller ID
- * A screenshot of the issue (if possible)
+ * Support ticket number.
+ * Your seller ID.
+ * A screenshot of the issue (if possible).
<br>
Send an email to <a href="mailto:teamsubm@microsoft.com">teamsubm@microsoft.com<
The following resources can also assist:
-* [Microsoft 365 app submission FAQ](/office/dev/store/appsource-submission-faq)
-* [Commercial marketplace documentation](/azure/marketplace/)
+* [Microsoft 365 app submission FAQ](/office/dev/store/appsource-submission-faq).
+* [Commercial marketplace documentation](/azure/marketplace/).
<br>
platform Frequently Failed Cases https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/prepare/frequently-failed-cases.md
keywords: app submission tips frequently failed cases validation guidelines
>[!NOTE] >This page will be deprecated by May 2021. For more information on successfully publishing your app, see the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md).
-This article addresses common reasons submitted apps fail validation. While it's not intended to be an exhaustive list of all potential issues with your app, following this guide will increase the likelihood that your app submission will pass the first time. See [Commercial marketplace certification policies](/legal/marketplace/certification-policies) for an extensive list of validation policies.
+This article addresses common reasons submitted apps fail validation. While it's not intended to be an exhaustive list of all potential issues with your app, following this guide will increase the likelihood that your app submission will pass the first time. For more information, see [Commercial marketplace certification policies](/legal/marketplace/certification-policies) for an extensive list of validation policies.
>[!NOTE]
->**[Section 1140](/legal/marketplace/certification-policies#1140-teams)** is specific to Microsoft Teams and **[sub-section 1140.4](https://docs.microsoft.com/legal/marketplace/certification-policies#11404-functionality)** addresses functionality requirements for Teams apps.
+>**[Section 1140](/legal/marketplace/certification-policies#1140-teams)** is specific to Microsoft Teams and **[sub-section 1140.4](/legal/marketplace/certification-policies#11404-functionality)** addresses functionality requirements for Teams apps.
## Validation guidelines & most failed test cases ### &#9989; General considerations
-See also [Section 100 ΓÇö General](/legal/marketplace/certification-policies#100-general)
- * Ensure you are using version 1.4.1 or later of the [Microsoft Teams SDK](https://www.npmjs.com/package/@microsoft/teams-js). * Don't make changes to your app while the validation process is in progress. Doing so will require a complete revalidation of your app. * Your app must not stop responding, end unexpectedly, or contain programming errors. If an issue occurs, your app must fail and provide valid information for the way-forward to the user.
See also [Section 100 ΓÇö General](/legal/marketplace/certification-policies#100
### &#9989; Provide a clear and simple sign-in, sign-out, and sign-up experience
-See also [Section 1100.5 ΓÇö Customer control](/legal/marketplace/certification-policies#11005-customer-control)
- * If your app or add-in depends on external accounts or services, the sign-in, sign-out, and sign-up experience must be apparent and reachable across all capabilities in your app. * If there is an explicit sign-in option provided to the user, there must be a corresponding sign-out option (even if the app is using [silent authentication](../../../../tabs/how-to/authentication/auth-silent-aad.md)). * The sign-out option must only sign the user out of your app's capability and not out of the Teams client.
Your bot must be responsive to any command and not dead-end the user. Here are s
![Help command sample](../../../../assets/images/faq/helpcommand.png) * **Use adaptive cards and task modules to make your bot response clear and actionable**
-[Adaptive cards with buttons invoking task modules](/task-modules-and-cards/task-modules/task-modules-bots) enhance the bot user experience. These cards and buttons are easier to use in a mobile device as opposed to your user typing the commands. Also bot responses must not be textual with long text. Bots must make use of adaptive cards and task modules instead of conversational chat based user interface and lengthy text responses.
+[Adaptive cards with buttons invoking task modules](/task-modules-and-cards/task-modules/task-modules-bots.md) enhance the bot user experience. These cards and buttons are easier to use in a mobile device as opposed to your user typing the commands. Also bot responses must not be textual with long text. Bots must make use of adaptive cards and task modules instead of conversational chat based user interface and lengthy text responses.
* **Think through all scopes**. Be sure that your bot provides appropriate responses when mentioned (`@*botname*`) in a channel and in personal conversations. If your bot does not provide meaningful context within the personal or teams scope, disable that scope via the manifest. (See the `bots` block in the [Microsoft Teams manifest schema reference](../../../../resources/schem#bots).)
Please warn users before your app downloads any files or executable (`.exe` )in
* Refer to the [Troubleshooting guide](/azure/active-directory/develop/troubleshoot-publisher-verification) for additional information. * Complete the self attestation through partner center. Fill the Self-Assessment questionnaire under **App Compliance**.
-> [!div class="nextstepaction"]
-> [Learn more about Teams app approval policies](/legal/marketplace/certification-policies#1140-teams)
+## See also
+
+* [Learn more about Teams app approval policies](/legal/marketplace/certification-policies#1140-teams)
+* [Section 100 ΓÇö General](/legal/marketplace/certification-policies#100-general)
+* [Section 1100.5 ΓÇö Customer control](/legal/marketplace/certification-policies#11005-customer-control)
platform Submission Checklist https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md
During submission, you're asked to categorize your app. The following table maps
### Localize your store listing
-Partner Center supports [localized store listings](https://docs.microsoft.com/office/dev/store/prepare-localized-solutions). For more information, see [how to localize your Teams app listing](../../../../concepts/build-and-test/apps-localization.md).
+Partner Center supports [localized store listings](/office/dev/store/prepare-localized-solutions). For more information, see [how to localize your Teams app listing](../../../../concepts/build-and-test/apps-localization.md).
## Complete Publisher Verification
Partner Center supports [localized store listings](https://docs.microsoft.com/of
## Next step > [!div class="nextstepaction"]
-> [Submit your app](https://docs.microsoft.com/office/dev/store/add-in-submission-guide)
+> [Submit your app](/office/dev/store/add-in-submission-guide)
platform Teams Store Validation Guidelines https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md
# Microsoft Teams store validation guidelines
-Following these guidelines increases the likelihood your app will pass the Microsoft Teams store submission process. These Teams-specific guidelines complement the Microsoft [commercial marketplace certification policies](https://docs.microsoft.com/legal/marketplace/certification-policies) and are updated frequently to reflect new capabilities, user feedback, and business rule changes.
+Following these guidelines increases the likelihood your app will pass the Microsoft Teams store submission process. These 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.
An app's name plays a critical role in how users discover it in the store. Remem
* Must not contain profane or derogatory terms. The name also must not include racially or culturally insensitive language. * Must be unique. For example, you cannot list multiple apps for different regions with the same name and functionality.
-See also: [4.0 App package and store listing](#40-app-package-and-store-listing)
- ### 1.2 Suitable for workplace consumption
-App content must be suitable for general workplace consumption and abide by all restrictions listed in the commercial marketplace certification policies. Content related to religion, politics, gambling, and prolonged entertainment is prohibited. For more information, see the [commercial marketplace certification policies](https://docs.microsoft.com/legal/marketplace/certification-policies#10010-inappropriate-content).
+App content must be suitable for general workplace consumption and abide by all restrictions listed in the commercial marketplace certification policies. Content related to religion, politics, gambling, and prolonged entertainment is prohibited. For more information, see the [commercial marketplace certification policies](/legal/marketplace/certification-policies#10010-inappropriate-content).
Your app must facilitate group collaboration, improve an individual's productivity, or both. Apps intended for team bonding and socializing must be collaborative and designed for multiple participants. These types of apps also should not require a substantial time investment or perceptively impact productivity.
Apps must focus on the Teams experience and not include the names, icons, or ima
### 1.4 Feature names
-App feature names in buttons and other UI text must not conflict with terminology reserved for Teams and other Microsoft products (for example, **Start meeting**, **Make call**, or **Start chat**). Include your app name if you can't completely avoid this, such as **Start Contoso meeting** instead of **Start meeting**.
+App feature names in buttons and other UI text must not conflict with terminology reserved for Teams and other Microsoft products. For example, **Start meeting**, **Make call**, or **Start chat**. Include your app name if you can't completely avoid this, such as **Start Contoso meeting** instead of **Start meeting**.
## 2.0 Security ### 2.1 Microsoft 365 App Compliance Program
-The [Microsoft 365 App Compliance Program](https://docs.microsoft.com/microsoft-365-app-certification/overview) 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](/microsoft-365-app-certification/overview) 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](/azure/active-directory/develop/publisher-verification-overview): 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 (Azure AD) consent dialog and other screens. For more information, see [frequently asked questions](/azure/active-directory/develop/publisher-verification-overview#frequently-asked-questions), [how to mark your app as publisher verified](/azure/active-directory/develop/mark-app-as-publisher-verified), and [troubleshoot publisher verification](/azure/active-directory/develop/troubleshoot-publisher-verification). * [Publisher Attestation](/microsoft-365-app-certification/docs/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.
The long description can provide an engaging narrative that highlights your app'
**Do:** * Use [Markdown](https://support.office.com/article/use-markdown-formatting-in-teams-4d10bd65-55e2-4b2d-a1f3-2bebdcd2c772) to format your description.
-* Use active voice and speak to users directly (for example, *You can ...*).
+* Use active voice and speak to users directly. For example, *You can ...*.
* List features with bullet points so it's easier to scan the description. * Clearly describe limitations, conditions, or exceptions to the functionality, features, and deliverables described in the listing and related materials before the user installs your app. The Teams capabilities your app supports must relate to the core functions your listing describes. * Include a help or support link.
Your app's support URLs should not require authentication. For example, users sh
### 4.8 Localization
-If your app supports localization, your app package must include a file with language translations that display based on the Teams language setting. The file must conform to the Teams localization schema. For more information, see the [Teams localization schema](~/concepts/build-and-test/apps-localization.md)
+If your app supports localization, your app package must include a file with language translations that display based on the Teams language setting. The file must conform to the Teams localization schema. For more information, see the [Teams localization schema](~/concepts/build-and-test/apps-localization.md).
## 5.0 Tabs
If your app includes a tab, make sure it adheres to these guidelines.
* Page headers * Hamburger menus * Tab should not have horizontal scroll.
-* Deep links in tabs must not link to an external webpage but somewhere within Teams (for example, task modules or other tabs).
+* Deep links in tabs must not link to an external webpage but somewhere within Teams. For example, task modules or other tabs.
* Tabs should not allow users to navigate outside Teams for the core app experience. ### 5.4 Usability
If your app includes a tab, make sure it adheres to these guidelines.
* 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. * Tabs must be responsive to Teams themes. When a user changes the theme, the app's theme must reflect the selection.
-* Tabs must use Teams-styled components (adopting Teams fonts, type ramps, color palettes, grid system, motion, tone of voice, etc.) whenever possible.
+* 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.
* You must include a **Settings** tab.
-* Tabs must follow Teams interaction design (in-page navigation, position and use of dialogs, information hierarchies, etc.) whenever possible.
-* Tab content in the iframe must not include features that mimic Teams core capabilities (for example, bots, messaging extensions, calling, meeting, etc.).
+* Tabs must follow Teams interaction design, such as, in-page navigation, position and use of dialogs, information hierarchies, and so on whenever possible.
+* Tab content in the iframe must not include features that mimic Teams core capabilities. For example, bots, messaging extensions, calling, meeting, and so on.
> [!TIP] >
Analyzing user input and predicting user intent is difficult. Bot commands provi
* Notification-only bots must send a welcome message that conveys it will not reply to users' messages. > [!TIP]
-> In welcome messages to individual users, a carousel tour can provide an effective overview of your bot and any other app features. Including buttons the let users try bot commands is encouraged (for example, **Create a task**).
+> In welcome messages to individual users, a carousel tour can provide an effective overview of your bot and any other app features. Including buttons the let users try bot commands is encouraged. For example, **Create a task**.
### 6.3 Bot message spamming
If your app includes a meeting extension, make sure it adheres to these guidelin
* Pre- and post-meeting screens must adhere to general tab design guidelines. For more information, see the [Teams design guidelines](~/tabs/design/tabs.md). * Tabs must not have horizontal scrolling.
-* Tabs should have an organized layout when displaying multiple items (for instance, more than 10 polls or surveys). See an [example layout](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md#after-a-meeting).
+* Tabs should have an organized layout when displaying multiple items. For instance, more than 10 polls or surveys. See an [example layout](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md#after-a-meeting).
* Your app must notify users when the results of a survey or poll are exported by stating, "Results successfully downloaded". ### 9.2 In-meeting experience
If your app includes a meeting extension, make sure it adheres to these guidelin
## 10.0 Notifications
-If your app uses the [activity feed APIs provided by Microsoft Graph](https://docs.microsoft.com/graph/teams-send-activityfeednotifications), make sure it adheres to the following guidelines.
+If your app uses the [activity feed APIs provided by Microsoft Graph](/graph/teams-send-activityfeednotifications), make sure it adheres to the following guidelines.
### 10.1 General
If your app uses the [activity feed APIs provided by Microsoft Graph](https://do
Apps must not display advertising, including dynamic ads, banner ads, and ads in messages.
+## See also
+
+[4.0 App package and store listing](#40-app-package-and-store-listing)
+ ## Next step > [!div class="nextstepaction"]
platform Resolve Submission Issues https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/resolve-submission-issues.md
# Resolve issues if your Microsoft Teams store submission fails
-Apps published to the Microsoft Teams store must meet the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) and [commercial marketplace policies](https://docs.microsoft.com/legal/marketplace/certification-policies).
+Apps published to the Microsoft Teams store must meet the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) and [commercial marketplace policies](/legal/marketplace/certification-policies).
If your store submission fails, Microsoft provides a concierge validation service to help get your app compliant and published.
If your app submission fails, Microsoft sends you a review report with recommend
You must fix all issues reported by the Microsoft concierge validation team before resubmitting your app on Partner Center. The Microsoft report includes the following information:
-* A corresponding [validation guideline](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) for each issue
-* Instructions on how to reproduce each issue
-* Recommendations for resolving each issue based on publicly available developer documentation
+* A corresponding [validation guideline](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) for each issue.
+* Instructions on how to reproduce each issue.
+* Recommendations for resolving each issue based on publicly available developer documentation.
The process for resolving issues and resubmitting an app typically goes like this: 1. You fix all issues in the report. 1. You send the following to the Microsoft concierge validation team at <a href="mailto:teamsubm@microsoft.com">teamsubm@microsoft.com</a>: * An updated app package
- * Test notes for your app (if you didn't include these in your original submission):
- * Credentials for at least two accounts (one admin and one non-admin)
- * Instructions to configure the app and test its functionality
- * A video showing your app used in Teams
+ * Test notes for your app, if you didn't include these in your original submission:
+ * Credentials for at least two accounts (one admin and one non-admin).
+ * Instructions to configure the app and test its functionality.
+ * A video showing your app used in Teams.
1. Microsoft concierge validation team fully tests your updated app. 1. You do one of the following: * If your app is free of issues, resubmit your app on Partner Center.
If your store submission has no issues, your app will publish within 1-2 busines
Doing the following can lead to a successful submission: 1. Develop your app based on the [Teams design guidelines](~/concepts/design/design-teams-app-overview.md).
-1. Make sure your app adheres to the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) and [Microsoft commercial marketplace certification policies](https://docs.microsoft.com/legal/marketplace/certification-policies).
+1. Make sure your app adheres to the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) and [Microsoft commercial marketplace certification policies](/legal/marketplace/certification-policies).
1. Test your app package with the [Microsoft Teams app validation tool](https://dev.teams.microsoft.com/appvalidation.html). 1. [Prepare your Teams store submission](~/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md).
platform Design Teams App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-overview.md
The app focuses on core scenarios that blend with Teams workflows.
### Native or distinct
-The app uses native Teams design components or your own. ThereΓÇÖs no blend of color schemes, controls, etc.
+The app uses native Teams design components or your own. ThereΓÇÖs no blend of color schemes, controls, and so on.
:::column-end::: :::column span="":::
Install a sample app to see how UI templates look and behave within Teams contex
## Other resources
-To learn more, try one of the following resources.
+To learn more, try one of the following resources:
### Fluent UI documentation
platform Design Teams App Ui Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-ui-templates.md
A task board, sometimes called a kanban board or swim lanes, is a collection of
### Top use cases
-* Project management. Assigning tasks and tracking status
-* Brainstorming. Adding ideas in different categories
-* Sorting exercises. Organizing any kind of information into buckets
+* Project management: Assigning tasks and tracking status.
+* Brainstorming: Adding ideas in different categories.
+* Sorting exercises: Organizing any kind of information into buckets.
## Data visualization
Use the left nav to browse multiple pages within your Teams tab. In the followin
### Top use cases
-* Browse multiple pages within a Teams tab
-* Break down complex apps into multiple pages
+* Browse multiple pages within a Teams tab.
+* Break down complex apps into multiple pages.
## Breadcrumb
Stage offers a way for users to open an entityΓÇölike an image, file, or website
### Top use cases
-* Open an entity in Teams instead of another app or browser
-* Spotlight media or other content
+* Open an entity in Teams instead of another app or browser.
+* Spotlight media or other content.
platform Map Use Cases https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/map-use-cases.md
That being said, the best apps usually combine multiple features, creating an ap
## See also
-* [Build apps for Microsoft Teams](../../overview.md)
+[Build apps for Microsoft Teams](../../overview.md)
platform Device Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/device-capabilities-overview.md
Use the tools present in [Microsoft Teams JavaScript client SDK](/javascript/api
After getting access to device capabilities, use Teams media capability APIs to [integrate media capabilities](mobile-camera-image-permissions.md) with Teams platform to enhance the user experience. These integrated capabilities allow your app to:
-* Capture and share images
-* Scan QR or barcode using [scanner control](qr-barcode-scanner-capability.md)
-* Record audio through microphone
+* Capture and share images.
+* Scan QR or barcode using [scanner control](qr-barcode-scanner-capability.md).
+* Record audio through microphone.
* Share location using [location picker](location-capability.md).
platform Location Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/location-capability.md
You must use the following set of APIs to enable your device's location capabili
| API | Description | | | | |[getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true) | Gives userΓÇÖs current device location or opens native location picker and returns the location chosen by the user. |
-|[showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation&preserve-view=true) | Shows location on map |
+|[showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation&preserve-view=true) | Shows location on map. |
> [!NOTE]
-> The `getLocation()` API comes along with following [input configurations](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/locationprops?view=msteams-client-js-latest&preserve-view=true), `allowChooseLocation` and `showMap`. <br/> If the value of `allowChooseLocation` is *true*, then the users can choose any location of their choice.<br/> If the value is *false*, then the users cannot change their current location.<br/> If the value of `showMap` is *false*, the current location is fetched without displaying the map. `showMap` is ignored if `allowChooseLocation` is set to *true*.
+> The `getLocation()` API comes along with following [input configurations](/javascript/api/@microsoft/teams-js/locationprops?view=msteams-client-js-latest&preserve-view=true), `allowChooseLocation` and `showMap`. <br/> If the value of `allowChooseLocation` is *true*, then the users can choose any location of their choice.<br/> If the value is *false*, then the users cannot change their current location.<br/> If the value of `showMap` is *false*, the current location is fetched without displaying the map. `showMap` is ignored if `allowChooseLocation` is set to *true*.
**Web app experience for location capabilities** ![web app experience for location capabilities](../../assets/images/tabs/location-capability.png)
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
You can enrich your Teams app with native device capabilities, such as camera, m
> [!NOTE] > * 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 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). ## Native device permissions
platform Extensibility Points https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/extensibility-points.md
The following list shows how Teams app capabilities are commonly used in collabo
* [**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**](https://docs.microsoft.com/graph/teams-concept-overview) for getting data about teams, channels, and group chats to help automate and manage Teams processes.
+* [**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
The following list shows how Teams capabilities are commonly used in personal co
## See also -- [Teams app design guidelines](../concepts/design/design-teams-app-overview.md)
+[Teams app design guidelines](../concepts/design/design-teams-app-overview.md)
## Next step
platform Feedback https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/feedback.md
The following table lists the support channels to submit Teams product related q
## See also
-> [!div class="nextstepaction"]
-> [SDK reference](https://docs.microsoft.com/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true)
+[SDK reference](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true)
platform Import External Messages To Teams https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/import-messages/import-external-messages-to-teams.md
With Microsoft Graph, you can migrate users' existing message history and data f
At a high level, the import process consists of the following: 1. [Create a team with a back-in-time timestamp](#step-one-create-a-team)
-1. [Create a channel with a back-in-time timestamp](#step-two-create-a-channel)
+1. [Create a channel with a back-in-time timestamp](#step-two-create-a-channel)
1. [Import external back-in-time dated messages](#step-three-import-messages) 1. [Complete the team and channel migration process](#step-four-complete-migration-mode) 1. [Add team members](#step-five-add-team-members)
At a high level, the import process consists of the following:
### Set up your Office 365 tenant
-Γ£ö Ensure that an Office 365 tenant exists for the import data. For more information on setting up an Office 365 tenancy for Teams, *see*, [Prepare your Office 365 tenant](../../concepts/build-and-test/prepare-your-o365-tenant.md).
-Γ£ö Make sure that team members are in Azure Active Directory (AAD). For more information *see* [Add a new user](/azure/active-directory/fundamentals/add-users-azure-active-directory) to Azure Active Directory.
+Γ£ö Ensure that an Office 365 tenant exists for the import data. For more information on setting up an Office 365 tenancy for Teams, see [Prepare your Office 365 tenant](../../concepts/build-and-test/prepare-your-o365-tenant.md).
+Γ£ö Make sure that team members are in Azure Active Directory (AAD). For more information, see [Add a new user](/azure/active-directory/fundamentals/add-users-azure-active-directory) to Azure Active Directory.
## Step One: Create a team
Since existing data is being migrated, maintaining the original message timestam
> [Create a new team](/graph/api/team-post?view=graph-rest-beta&tabs=http&preserve-view=true) with a back-in-time timestamp using the team resource `createdDateTime` property. Place the new team in `migration mode`, a special state that bars users from most activities within the team until the migration process is complete. Include the `teamCreationMode` instance attribute with the `migration` value in the POST request to explicitly identify the new team as being created for migration.
-> **NOTE**: The `createdDateTime` field will only be populated for instances of a team or channel that have been migrated.
+> [!Note]
+> The `createdDateTime` field will only be populated for instances of a team or channel that have been migrated.
<!-- markdownlint-disable MD001 -->
Since existing data is being migrated, maintaining the original message timestam
|ScopeName|DisplayName|Description|Type|Admin Consent?|Entities/APIs covered| |-|-|-|-|-|-|
-|`Teamwork.Migrate.All`|Manage migration to Microsoft Teams|Creating, managing resources for migration to Microsoft Teams|**Application-only**|**Yes**|`POST /teams`|
+|`Teamwork.Migrate.All`|Manage migration to Microsoft Teams|Creating, managing resources for migration to Microsoft Teams.|**Application-only**|**Yes**|`POST /teams`|
#### Request (create a team in migration state)
Creating a channel for the imported messages is similar to the create team scena
|ScopeName|DisplayName|Description|Type|Admin Consent?|Entities/APIs covered| |-|-|-|-|-|-|
-|`Teamwork.Migrate.All`|Manage migration to Microsoft Teams|Creating, managing resources for migration to Microsoft Teams|**Application-only**|**Yes**|`POST /teams`|
+|`Teamwork.Migrate.All`|Manage migration to Microsoft Teams|Creating, managing resources for migration to Microsoft Teams.|**Application-only**|**Yes**|`POST /teams`|
#### Request (create a channel in migration state)
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; scopes for chatMessage apply here as well.
+> [!Note]
+> There are no special permission scopes in this scenario since the request is part of chatMessage; scopes for chatMessage apply here as well.
```http POST https://graph.microsoft.com/v1.0/teams/team-id/channels/channel-id/messages
HTTP/1.1 204 No Content
## See also
-> [!div class="nextstepaction"]
-> [Learn more about Microsoft Graph and Teams integration](/graph/teams-concept-overview)
+
+[Learn more about Microsoft Graph and Teams integration](/graph/teams-concept-overview)
platform Graph Proactive Bots And Messages https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md
Proactive messages are initiated by bots to start conversations with a user. The
|Ad-hoc proactive message| The bot interjects a message without interrupting the conversation flow.| |Dialog-based proactive message | The bot creates a new dialog thread, takes control of a conversation, delivers the proactive message, closes, and returns control to the previous dialog.|
-See, [Send proactive notifications to users SDK v4](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true).
- ## Proactive app installation in Teams Before your bot can proactively message a user, it must be installed either as a personal app or in a team where the user is a member. At times, you need to proactively message users that have not installed or previously interacted with your app. For example, the need to message vital information to everyone in your organization. For such scenarios, you can use the Microsoft Graph API to proactively install your bot for your users.
GET https://graph.microsoft.com/beta/users/{user-id}/chats?$filter=installedApps
Your bot can [send proactive messages](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true) after the bot has been added for a user or a team and has received all the user information.
-## Related topic for Teams administrators
->
-> [!div class="nextstepaction"]
-> [**Manage app setup policies in Microsoft Teams**](/MicrosoftTeams/teams-app-setup-policies#create-a-custom-app-setup-policy)
+## See also
+
+* [**Manage app setup policies in Microsoft Teams**](/MicrosoftTeams/teams-app-setup-policies#create-a-custom-app-setup-policy)
+* [Send proactive notifications to users SDK v4](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true)
## View additional code samples > > [!div class="nextstepaction"]
-> [**Teams proactive messaging code samples**](/samples/officedev/msteams-samples-proactive-messaging/msteams-samples-proactive-messaging/)
->
+> [**Teams proactive messaging code samples**](/samples/officedev/msteams-samples-proactive-messaging/msteams-samples-proactive-messaging/)
platform Resource Specific Consent https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/rsc/resource-specific-consent.md
To enable or disable group owner consent using PowerShell, follow the steps outl
## Register your app with Microsoft identity platform via the Azure AD portal
-The Azure Active Directory portal provides a central platform for you to register and configure your apps. Your app must be registered in the Azure AD portal to integrate with the Microsoft identity platform and call Microsoft Graph APIs. *See* [Register an application with the Microsoft identity platform](/graph/auth-register-app-v2).
+The Azure Active Directory portal provides a central platform for you to register and configure your apps. Your app must be registered in the Azure AD portal to integrate with the Microsoft identity platform and call Microsoft Graph APIs. For more information, see [Register an application with the Microsoft identity platform](/graph/auth-register-app-v2).
>[!WARNING] >Do not register multiple Teams apps to the same Azure AD app id. The app id must be unique for each app. Attempts to install multiple apps to the same app id will fail.
The RSC permissions are declared in your app manifest (JSON) file. Add a [webAp
> [!div class="checklist"] >
-> - **id** ΓÇö your Azure AD app id. *See* [Register your app in the Azure AD portal](resource-specific-consent.md#register-your-app-with-microsoft-identity-platform-via-the-azure-ad-portal).
+> - **id** ΓÇö your Azure AD app id. For more information, see [Register your app in the Azure AD portal](resource-specific-consent.md#register-your-app-with-microsoft-identity-platform-via-the-azure-ad-portal).
> - **resource** ΓÇö any string. This field has no operation in RSC, but must be added and have a value to avoid an error response; any string will do.
-> - **application permissions** ΓÇö RSC permissions for your app. *See* [Resource-specific Permissions](resource-specific-consent.md#resource-specific-permissions).
+> - **application permissions** ΓÇö RSC permissions for your app. For more information, see [Resource-specific Permissions](resource-specific-consent.md#resource-specific-permissions).
> >[!IMPORTANT]
If your Teams admin allows custom app uploads, you can [sideload your app](~/con
## Check your app for added RSC permissions >[!IMPORTANT]
->The RSC permissions are not attributed to a user. Calls are made with app permissions, not user delegated permissions. Thus, the app may be allowed to perform actions that the user cannot, such as creating a channel or deleting a tab. You should review the team owner's intent for your use case prior to making RSC API calls. *See* [Microsoft Teams API overview](/graph/teams-concept-overview).
+>The RSC permissions are not attributed to a user. Calls are made with app permissions, not user delegated permissions. Thus, the app may be allowed to perform actions that the user cannot, such as creating a channel or deleting a tab. You should review the team owner's intent for your use case prior to making RSC API calls. For more information, see [Microsoft Teams API overview](/graph/teams-concept-overview).
Once the app has been installed to a team, you can use [Graph Explorer](https://developer.microsoft.com/graph/graph-explorer) to view the permissions that have been granted to the app in a team:
Once the app has been installed to a team, you can use [Graph Explorer](https://
-## Test resource-specific consent
+## See also
-> [!div class="nextstepaction"]
-> [**Test resource-specific consent permissions in Teams**](test-resource-specific-consent.md)
-
-## Related topic for Teams administrators
+* [Test resource-specific consent permissions in Teams](test-resource-specific-consent.md)
+* [Resource-specific consent in Microsoft Teams for admins](/MicrosoftTeams/resource-specific-consent)
-> [!div class="nextstepaction"]
-> [**Resource-specific consent in Microsoft Teams for admins**](/MicrosoftTeams/resource-specific-consent)
->
platform Get Started Use App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/get-started/get-started-use-app-studio.md
App Studio is a Teams app that you can install from the Teams store. It simplifi
Complete the following steps to update the app package:
-1. To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**.
+1. To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**:
-<img width="450px" alt="Finding App Studio in the Store View" src="~/assets/images/get-started/searchforAppStudio.png"/>
+ <img width="450px" alt="Finding App Studio in the Store View" src="~/assets/images/get-started/searchforAppStudio.png"/>
-2. Select the **App Studio** tile and choose **Install**. The App Studio is installed.
+1. Select the **App Studio** tile and choose **Install**. The App Studio is installed:
-<img width="450px" alt="Installing App Studio" src="~/assets/images/get-started/InstallingAppStudio.png"/>
+ <img width="450px" alt="Installing App Studio" src="~/assets/images/get-started/InstallingAppStudio.png"/>
-3. To create the app package for your Teams app, select the **Manifest editor** tab in **App Studio**.
+1. To create the app package for your Teams app, select the **Manifest editor** tab in **App Studio**:
-<img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/>
+ <img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/>
-The sample comes with its own manifest and is designed to build an app package when the project is built. On .NET this is done in Visual Studio and on Node.js this is done by typing `gulp` at the command line in the root directory of the project.
+ The sample comes with its own manifest and is designed to build an app package when the project is built. On .NET this is done in Visual Studio and on Node.js this is done by typing `gulp` at the command line in the root directory of the project.
-```bash
-$ gulp
-[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
-[13:39:27] Starting 'clean'...
-[13:39:27] Starting 'generate-manifest'...
-[13:39:27] Finished 'generate-manifest' after 11 ms
-[13:39:27] Finished 'clean' after 21 ms
-[13:39:27] Starting 'default'...
-Build completed. Output in manifest folder
-[13:39:27] Finished 'default' after 62 ╬╝s
-```
+ ```bash
+ $ gulp
+ [13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
+ [13:39:27] Starting 'clean'...
+ [13:39:27] Starting 'generate-manifest'...
+ [13:39:27] Finished 'generate-manifest' after 11 ms
+ [13:39:27] Finished 'clean' after 21 ms
+ [13:39:27] Starting 'default'...
+ Build completed. Output in manifest folder
+ [13:39:27] Finished 'default' after 62 ╬╝s
+ ```
-The name of the generated app package is **helloworldapp.zip**. You can search for this file if the location is not clear in the tool you are using.
+ The name of the generated app package is **helloworldapp.zip**. You can search for this file if the location is not clear in the tool you are using.
-4. Now to modify this app package, select **Import an existing app** in the **Manifest editor**.
+1. Now to modify this app package, select **Import an existing app** in the **Manifest editor**:
-<img width="450px" alt="Importing an existing app" src="~/assets/images/get-started/Importinganapp.png"/>
+ <img width="450px" alt="Importing an existing app" src="~/assets/images/get-started/Importinganapp.png"/>
-5. Select the **Hello World** tile for your newly imported app.
+1. Select the **Hello World** tile for your newly imported app:
-<img width="450px" alt="Newly imported app view" src="~/assets/images/get-started/HelloWorldappdetails.png"/>
+ <img width="450px" alt="Newly imported app view" src="~/assets/images/get-started/HelloWorldappdetails.png"/>
The following image shows the imported app package in App Studio:
It is simple to add tabs to a Teams app. The sample app already supports several
##### Team tab
-Your app can only have one Team tab.
+Your app can only have one Team tab:
<img width="450px" alt="Adding a Teams tab" src="~/assets/images/get-started/TeamTab.png"/>
Replace `yourteamsapp.ngrok.io` by the URL that you used when hosting your app.
#### Bots
-It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft.
+It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft:
<img width="450px" alt="Adding a bot" src="~/assets/images/get-started/Bots.png"/>
The bot that was imported from the sample does not have an associated App ID. Yo
Complete the following steps to setup your bot: 1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show.
-2. Select **Setup** to display the **Set up a bot** dialog box.
+1. Select **Setup** to display the **Set up a bot** dialog box.
-<img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>
+ <img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>
-3. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.
-4. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list.
-5. Now open a text file in notepad and copy and paste your new bot ID into it.
-6. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID.
-7. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app.
-8. Now save your text file as you must add the information from the file to your hosted app to allow secure communication with your bot.
+1. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.
+1. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list.
+1. Now open a text file in notepad and copy and paste your new bot ID into it.
+1. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID.
+1. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app.
+1. Now save your text file as you must add the information from the file to your hosted app to allow secure communication with your bot.
#### Messaging extensions
Messaging extensions let users ask for information from your service and post th
Complete the following steps to setup your messaging extension:
-1. Select **Messaging extensions** under **Capabilities** in the left-hand pane of App Studio to configure the messaging extension.
+1. Select **Messaging extensions** under **Capabilities** in the left-hand pane of App Studio to configure the messaging extension:
-<img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>
+ <img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>
-The sample messaging extension is listed in the **Messaging Extensions** pane.
+ The sample messaging extension is listed in the **Messaging Extensions** pane.
-2. Select **Delete** to remove the messaging extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Messaging Extension** dialog box is displayed.
-3. Select the **Use existing bot** tab and **Select from one of my existing bots**.
-4. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box.
-5. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option.
-6. In the **New command** dialog box, enter the following values:
+1. Select **Delete** to remove the messaging extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Messaging Extension** dialog box is displayed.
+1. Select the **Use existing bot** tab and **Select from one of my existing bots**.
+1. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box.
+1. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option.
+1. In the **New command** dialog box, enter the following values:
-Under **New command**:
+ Under **New command**:
-- **Command ID**: Enter random text-- **Title**: Enter random title-- **Description**: Enter random description
+ - **Command ID**: Enter random text
+ - **Title**: Enter random title
+ - **Description**: Enter random description
-Under **Parameter**:
+ Under **Parameter**:
-- **Name**: Enter the parameter name-- **Title**: Enter the card title-- **Description**: Enter card description
+ - **Name**: Enter the parameter name
+ - **Title**: Enter the card title
+ - **Description**: Enter card description
-7. After you enter the information, select **Save** to close the dialog box.
+1. After you enter the information, select **Save** to close the dialog box.
#### Register your app in Teams After entering the details of your app, complete the following steps to register your app in Teams: 1. Use **Test and distribute** of App Studio to install your app in Teams.
-2. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.
-3. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio.
+1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.
+1. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio:
-<img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/>
+ <img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/>
-4. To upload your app to Teams, select the **Install** button under **Test and Distribute**.
+1. To upload your app to Teams, select the **Install** button under **Test and Distribute**:
-<img width="450px" alt="Adding a messaging extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>
+ <img width="450px" alt="Adding a messaging extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>
-5. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing.
-6. Select the **Install** button at the bottom of the dialog box.
+1. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing.
+1. Select the **Install** button at the bottom of the dialog box.
Your app is now available in Teams. However, the bot and the messaging extension will not work until you update the hosted applications environment with the App IDs and passwords.
platform Messaging Extensions Common https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/messaging-extensions/messaging-extensions-common.md
In the app manifest, your command item is an object with the following structure
| `id` | Unique ID that you assign to this command. The user request will include this ID. | Yes | 1.0 | | `title` | Command name. This value appears in the UI. | Yes | 1.0 | | `description` | Help text indicating what this command does. This value appears in the UI. | Yes | 1.0 |
-| `type` | Set the type of command. Possible values include `query` and `action`. If not present the default value is set to `query` | No | 1.4 |
+| `type` | Set the type of command. Possible values include `query` and `action`. If not present the default value is set to `query`. | No | 1.4 |
| `initialRun` | Optional parameter, used with `query` commands. If set to **true**, indicates this command should be executed as soon as the user chooses this command in the UI. | No | 1.0 |
-| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the [task module](~/task-modules-and-cards/what-are-task-modules.md). This is used when the inputs to the `action` command is dynamic as opposed to a static set of parameters. Note that the if set to **true** the static parameter list for the command is ignored | No | 1.4 |
+| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the [task module](~/task-modules-and-cards/what-are-task-modules.md). This is used when the inputs to the `action` command is dynamic as opposed to a static set of parameters. Note that the if set to **true** the static parameter list for the command is ignored. | No | 1.4 |
| `parameters` | Static list of parameters for the command. | Yes | 1.0 | | `parameter.name` | The name of the parameter. This is sent to your service in the user request. | Yes | 1.0 | | `parameter.description` | Describes this parameterΓÇÖs purposes or example of the value that should be provided. This value appears in the UI. | Yes | 1.0 | | `parameter.title` | Short user-friendly parameter title or label. | Yes | 1.0 |
-| `parameter.inputType` | Set to the type of input required. Possible values include `text`, `textarea`, `number`, `date`, `time`, `toggle`. Default is set to `text` | No | 1.4 |
+| `parameter.inputType` | Set to the type of input required. Possible values include `text`, `textarea`, `number`, `date`, `time`, `toggle`. Default is set to `text`. | No | 1.4 |
| `context` | Optional array of values that defines the context the message action is available in. Possible values are `message`, `compose`, or `commandBox`. Default is `["compose", "commandBox"]`. | No | 1.5 |
platform Dotnet Personal Use Appstudio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/tabs/dotnet-personal-use-appstudio.md
- Select the **Import an existing app** tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It should be found here:
-```bash
-/bin/Debug/netcoreapp2.2/Tab.zip
-```
+ ```bash
+ /bin/Debug/netcoreapp2.2/Tab.zip
+ ```
- Upload **Tab.zip** to App Studio.
There's a list of steps in the left-hand side of the Manifest editor, and on the
#### Details: App details
-In the *App details* section:
+In the **App details** section:
-- Under *Identification* select **Generate** to generate a new App Id for your app.
+- Under **Identification** select **Generate** to generate a new App Id for your app.
-- Under *Developer information* update the **Website URL** with your *ngrok* HTTPS URL.
+- Under **Developer information** update the **Website URL** with your **ngrok** HTTPS URL.
-- Under *App URLs* update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.
+- Under **App URLs** update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.
#### Capabilities: Tabs In the *Tabs* section: -- Under *Add a personal tab* select ***Add***. You will be presented with a pop-up dialogue window.
+- Under **Add a personal tab** select **Add**. You will be presented with a pop-up dialogue window.
-- Complete the *Name* field.
+- Complete the **Name** field.
-- Complete the *Entity Id* field.
+- Complete the **Entity Id** field.
-- Update the *Content URL* field with to `https://<yourngrokurl>/personalTab`.
+- Update the **Content URL** field with to `https://<yourngrokurl>/personalTab`.
-- Leave the *Website URL* field blank.
+- Leave the **Website URL** field blank.
-- Select ***Save***.
+- Select **Save**.
#### Finish: Domains and permissions
-In the *Domains and permissions* section, the *Domains from your tabs* field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
+In the **Domains and permissions** section, the **Domains from your tabs** field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
##### Finish: Test and distribute
In the *Domains and permissions* section, the *Domains from your tabs* field sho
> >This warning can be ignored while testing your tab.
-In the *Test and distribute* section:
+In the **Test and distribute** section:
- Select **Install**. -- In the pop-up window make sure that *Add for you* is set to *Yes* and *Add to a team or chat* is set to *No*.
+- In the pop-up window make sure that **Add for you** is set to **Yes** and **Add to a team or chat** is set to **No**.
- Select **Install**.
platform Dotnet Update Chan Grp App https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/tabs/dotnet-update-chan-grp-app.md
For your tab to display in Teams, you must include the **Microsoft Teams JavaScr
- Navigate to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tag:
-```html
-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
-<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
-```
+ ```html
+ <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
+ <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
+ ```
>[!IMPORTANT] >Don't copy/paste the `<script src="...">` URLs from this page, as they may not represent the latest version. To get the latest version of the SDK, always go to: [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js).
Make sure to save the updated **Tab.cshtml**.
>[!TIP] >You need to have both your application in Visual Studio and ngrok running to complete this quickstart. If you need to stop running your application in Visual Studio to work on it **keep ngrok running**. It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service it will return a new URL and you'll have to update your application with the new URL.
-## Upload your tab to Teams with App Studio
+## Upload your tab to Teams
>[!Note] > We use App Studio to edit your **manifest.json** file and upload the completed package to Teams. You can also manually edit the **manifest.json** file if you prefer. If you do, be sure to build the solution again to create the **tab.zip** file to upload.
Make sure to save the updated **Tab.cshtml**.
- Select the **Import an existing app** tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It should be found here:
-```bash
-/bin/Debug/netcoreapp2.2/tab.zip
-```
+ ```bash
+ /bin/Debug/netcoreapp2.2/tab.zip
+ ```
- Upload **tab.zip** to App Studio.
There's a list of steps in the left-hand side of the Manifest editor, and on the
#### Details: App details -- Under *Identification* select ***Generate*** to replace the placeholder id with the required GUID for your tab.
+In the *App details* section:
-- Under *Developer information* update the **Website URL** field with your *ngrok* HTTPS URL.
+- *Identification*: select **Generate** to replace the placeholder id with the required GUID for your tab.
-- Under *App URLs* update the **Privacy statement** and **Terms of use** URL fields with your *ngrok* HTTPS URL. Remember to include the */privacy* and */tou* paths at the end of the URLs.
+- *Developer information*: update the **Website URL** field with your *ngrok* HTTPS URL.
+
+- *App URLs*: update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.
#### Capabilities: Tabs In the *Tabs* section: -- Under *Team Tab* select **Add**.
+- *Team Tab*: select **Add**.
- In the Team tab pop-up window update the *Configuration URL* to `https://<yourngrokurl>/tab`.
In the *Tabs* section:
#### Finish: Domains and permissions
-In the *Domains and permissions* section, the *Domains from your tabs* field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
+In the *Domains and permissions* section:
+
+- The *Domains from your tabs* field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
-#### Test and distribute: Test and distribute
+#### Finish: Test and distribute
>[!IMPORTANT] >In the **Description** field on the right you'll see the following warning:
platform Dotnet Update Personal App https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/tabs/dotnet-update-personal-app.md
For your tab to display in Teams, you must include the **Microsoft Teams JavaScr
- Navigate to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tags section:
-```html
-`<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>`
-`<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>`
-```
+ ```html
+ `<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>`
+ `<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>`
+ ```
### PersonalTab.cshtml Open **PersonalTab.cshtml** and update the embedded `<script>` tags by calling `microsoftTeams.initialize()`.
-Make sure to save your updated *PersonalTab.cshtml*.
+Make sure to save your updated **PersonalTab.cshtml**.
platform Dotnet Upload To Teams https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/tabs/dotnet-upload-to-teams.md
-## Upload your tab to Teams with App Studio
+## Upload your tab to Teams
>[!NOTE] > We use App Studio to edit your **manifest.json** file and upload the completed package to Teams. You can also manually edit the **manifest.json** file if you prefer. If you do, be sure to build the solution again to create the **tab.zip** file to upload.
- Select the **Import an existing app** tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It should be found here:
-```bash
-/bin/Debug/netcoreapp2.2/tab.zip
-```
+ ```bash
+ /bin/Debug/netcoreapp2.2/tab.zip
+ ```
- Upload **tab.zip** to App Studio.
There's a list of steps in the left-hand side of the Manifest editor, and on the
#### Details: App details
+In the *App* details section:
+ - Under *Identification* select **Generate** to generate a new App Id for your app. - Under *Developer information* update the **Website URL** field with your *ngrok* HTTPS URL.
In the *Tabs* section:
#### Finish: Domains and permissions
-In the *Domains and permissions* section, the *Domains from your tabs* field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
+- In the *Domains and permissions* section, the *Domains from your tabs* field should contain your ngrok URL without the HTTPS prefix - `<yourngrokurl>.ngrok.io/`.
#### Finish: Test and distribute
platform Node Js Yeoman Prereq https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/tabs/node-js-yeoman-prereq.md
- To complete this quickstart you will need an Office 365 tenant and a team configured with *Allow uploading custom apps* enabled. To learn more, see [Prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).
- - If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription will remain active as long as you're using it for ongoing development. See [Welcome to the Office 365 Developer Program](https://docs.microsoft.com/office/developer-program/microsoft-365-developer-program).
+ - If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription will remain active as long as you're 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:
In addition, this project requires that you have the following installed in your
- After you've successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by typing the following in your command prompt:
-```bash
-npm install yo gulp-cli --global
-```
+ ```bash
+ npm install yo gulp-cli --global
+ ```
- Install the Microsoft Teams Apps generator by typing the following in your command prompt:
-```bash
-npm install generator-teams --global
-```
+ ```bash
+ npm install generator-teams --global
+ ```
## Generate your project
npm install generator-teams --global
- To start the generator, navigate to your new directory and type the following command:
-```bash
-yo teams
-```
+ ```bash
+ yo teams
+ ```
- Next, you'll provide a series of values that will be used in your application's **manifest.json** file:
-![generator opening screenshot](/microsoftteams/platform/assets/images/tab-images/teamsTabScreenshot.PNG)
+ ![generator opening screenshot](/microsoftteams/platform/assets/images/tab-images/teamsTabScreenshot.PNG)
-**What is your solution name?**
+ **What is your solution name?**
-This is your project name. You can accept the suggested name by pressing enter.
+ This is your project name. You can accept the suggested name by pressing enter.
-**Where do you want to place the files?**
+ **Where do you want to place the files?**
-You're currently in your project directory. Press enter.
+ You're currently in your project directory. Press enter.
-**Title of your Microsoft Teams app project?**
+ **Title of your Microsoft Teams app project?**
-This is your app package name and will be used in the app manifest and description.
+ This is your app package name and will be used in the app manifest and description.
-**Your (company) name? (max 32 characters)**
+ **Your (company) name? (max 32 characters)**
-Your company name will be used in the app manifest.
+ Your company name will be used in the app manifest.
-<br>**Which manifest version would you like to use?**
+ **Which manifest version would you like to use?**
-Select the default schema.
+ Select the default schema.
-**Quick scaffolding? (Y/n)**
+ **Quick scaffolding? (Y/n)**
-The default is yes; enter **n** to enter your Microsoft Partner Id.
+ The default is yes; enter **n** to enter your Microsoft Partner Id.
-**Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)**
+ **Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)**
-This field isn't required and should only be used if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com).
+ This field isn't required and should only be used if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com).
-**What do you want to add to your project?**
+ **What do you want to add to your project?**
-Select ( &ast; ) A Tab.
+ Select ( &ast; ) A Tab.
-**The URL where you will host this solution?**
+ **The URL where you will host this solution?**
-By default the generator suggests an Azure Web Sites URL. You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.
+ By default the generator suggests an Azure Web Sites URL. You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.
-**Would you like to include Test framework and initial tests? (y/N)**
+ **Would you like to include Test framework and initial tests? (y/N)**
-Choose **not** to include a test framework for this project. The default is yes; enter **n**.
+ Choose **not** to include a test framework for this project. The default is yes; enter **n**.
-**Would you like to use Azure Applications Insights for telemetry? (y/N)**
+ **Would you like to use Azure Applications Insights for telemetry? (y/N)**
-Choose **not** to include [Azure Application Insights](/azure-docs/articles/azure-monitor/app/app-insights-overview.md). The default is no; enter **n**.
+ Choose **not** to include [Azure Application Insights](/azure-docs/articles/azure-monitor/app/app-insights-overview.md). The default is no; enter **n**.
-**Default Tab Name (max 16 characters)?**
+ **Default Tab Name (max 16 characters)?**
-Name your tab. This tab name will be used throughout your project as a file/URL path component.
+ Name your tab. This tab name will be used throughout your project as a file/URL path component.
platform Messaging Extension Design https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/design/messaging-extension-design.md
You can add a messaging extension in the following Teams contexts:
* From the Teams store (AppSource). * In a channel, chat, or meeting (before, during, and after) near the compose box. It's worth noting if you add a messaging extension in one of these places, only you can use it in that context.
-The following example shows how you add a messaging extension in a channel.
+The following example shows how you add a messaging extension in a channel:
:::image type="content" source="../../assets/images/messaging-extension/add-in-channel.png" alt-text="Example shows how to add a messaging extension near the compose box in a channel." border="false":::
Action-based messaging extensions frequently require users to complete a form or
## Open a messaging extension
-The compose box and messages/posts are the primary contexts where people use messaging extensions.
+The compose box and messages or posts are the primary contexts where people use messaging extensions.
### From the compose box
-Once added, users can open your messaging extension by selecting your app icon below the compose box. In this example, the extension has search and action commands.
+Once added, users can open your messaging extension by selecting your app icon below the compose box. In this example, the extension has search and action commands:
:::image type="content" source="../../assets/images/messaging-extension/open-from-compose-box.png" alt-text="Example shows how to open a messaging extension from the compose box." border="false":::
platform Enable SSO Auth Me https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/enable-SSO-auth-me.md
After the prerequisites are completed, you can enable SSO for messaging extensio
## See also
-> [!div class="nextstepaction"]
-> [Add authentication to your messaging extensions](add-authentication.md)
-
-> [!div class="nextstepaction"]
-> [Use SSO for bots](../../bots/how-to/authentication/auth-aad-sso-bots.md)
-
-> [!div class="nextstepaction"]
-> [Link unfurling](link-unfurling.md)
+* [Add authentication to your messaging extensions](add-authentication.md)
+* [Use SSO for bots](../../bots/how-to/authentication/auth-aad-sso-bots.md)
+* [Link unfurling](link-unfurling.md)
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/overview.md
Some apps are simple (send notifications), while others are complex (manage pati
### Microsoft Graph for Teams
-**Utilize Teams data**: The [Microsoft Graph API for Teams](https://docs.microsoft.com/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.
+**Utilize Teams data**: 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.
:::image type="content" source="assets/images/overview-graph.png" alt-text="Conceptual representation of the Microsoft Graph API for Teams." border="false":::
Blend the features users love about an existing web app, service, or system with
## A little code goes a long way
-You don't need to be an expert programmer to build a great Teams app. Try one of several low-code solutions.
+You don't need to be an expert programmer to build a great Teams app. Try one of the several low-code solutions.
> [!div class="nextstepaction"] > [Create a low-code app](samples/teams-low-code-solutions.md)
Looking for app development inspiration? Browse our list of real-world scenarios
* [Add a Share-to-Teams button to your website](concepts/build-and-test/share-to-teams.md) * [Design your Teams app](concepts/design/design-teams-app-overview.md)
-* [Microsoft Teams JavaScript client SDK](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
+* [Microsoft Teams JavaScript client SDK](/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
* Bot Framework SDK for [JavaScript](https://github.com/Microsoft/botbuilder-js) and [.NET](https://github.com/Microsoft/botbuilder-dotnet/) * [Distribute your Teams app](concepts/deploy-and-publish/apps-publish-overview.md)
platform Bots Conv Channel https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bot-conversations/bots-conv-channel.md
Last updated 06/25/2019
Microsoft Teams allows users to bring bots into their channel or group chat conversations. By adding a bot to a team or chat, all users of the conversation can take advantage of the bot functionality right in the conversation. You can also access Teams-specific functionality within your bot like querying team information and @mentioning users.
-Chat in channels and group chats differ from personal chat in that the user needs to @mention the bot. If a bot is used in multiple scopes (personal, groupchat or channel) you will need to detect what scope the bot messages came from, and process them accordingly.
+Chat in channels and group chats differ from personal chat in that the user needs to @mention the bot. If a bot is used in multiple scopes such as personal, groupchat, or channel, you need to detect what scope the bot messages came from, and process them accordingly.
## Designing a great bot for channels or groups
For more information on bots creating messages in channels see [Proactive messag
For a bot in a group or channel, in addition to the [regular message schema](https://docs.botframework.com/core-concepts/reference/#activity), your bot also receives the following properties: * `channelData` See [Teams channel data](~/resources/bot-v3/bot-conversations/bots-conversations.md#teams-channel-data). In a group chat, contains information specific to that chat.
-* `conversation.id` The reply chain ID, consisting of channel ID plus the ID of the first message in the reply chain
-* `conversation.isGroup` Is `true` for bot messages in channels or group chats
-* `conversation.conversationType` Either `groupChat` or `channel`
-* `entities` Can contain one or more mentions (see [Mentions](#-mentions))
+* `conversation.id` The reply chain ID, consisting of channel ID plus the ID of the first message in the reply chain.
+* `conversation.isGroup` Is `true` for bot messages in channels or group chats.
+* `conversation.conversationType` Either `groupChat` or `channel`.
+* `entities` Can contain one or more mentions. For more information, see [Mentions](#-mentions).
### Replying to messages
You might also want to send a personal message to each member of the team when t
We recommend that your bot *not* send a welcome message in the following situations:
-* The team is large (obviously subjective, but for example larger than 100 members). Your bot may be seen as 'spammy' and the person who added it may get complaints unless you clearly communicate your bot's value proposition to everyone who sees the welcome message.
-* Your bot is first mentioned in a group or channel (versus being first added to a team)
-* A group or channel is renamed
-* A team member is added to a group or channel
+* The team is big (obviously subjective, for example, more than 100 members). Your bot may be seen as 'spammy' and the person who added it may get complaints unless you clearly communicate your bot's value proposition to everyone who sees the welcome message.
+* Your bot is first mentioned in a group or channel, versus being first added to a team.
+* A group or channel is renamed.
+* A team member is added to a group or channel.
## @ Mentions
You can also use the Teams extension function `getTextWithoutMentions`, which st
Your bot can mention other users in messages posted into channels. To do this, your message must do the following:
-* Include `<at>@username</at>` in the message text
-* Include the `mention` object inside the entities collection
+* Include `<at>@username</at>` in the message text.
+* Include the `mention` object inside the entities collection.
#### .NET example
session.send(generalMessage);
## Accessing groupChat or channel scope
-Your bot can do more than send and receive messages in groups and teams. For instance, it can also fetch the list of members, including their profile information, as well as the list of channels. See [Get context for your Microsoft Teams bot](~/resources/bot-v3/bots-context.md) to learn more.
+Your bot can do more than send and receive messages in groups and teams. For instance, it can also fetch the list of members, including their profile information, as well as the list of channels. For more information, see [Get context for your Microsoft Teams bot](~/resources/bot-v3/bots-context.md).
-*See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md)
platform Bots Conv Personal https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bot-conversations/bots-conv-personal.md
Last updated 05/20/2019
[!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-bots.md)]
-Microsoft Teams allows users to engage in direct conversations with bots built on the [Microsoft Bot Framework](/azure/bot-service/?view=azure-bot-service-3.0&preserve-view=true). Users can find bots in the Discover Apps gallery and add them to their Teams experience for personal conversations. Team owners and users with the appropriate permissions can also add bots as team members (see [Interact in a team channel](~/resources/bot-v3/bot-conversations/bots-conv-channel.md)), which not only makes them available in that team's channels, but for personal chat for all of those users as well.
+Microsoft Teams allows users to engage in direct conversations with bots built on the [Microsoft Bot Framework](/azure/bot-service/?view=azure-bot-service-3.0&preserve-view=true). Users can find bots in the Discover Apps gallery and add them to their Teams experience for personal conversations. Team owners and users with the appropriate permissions can also add bots as team members. For more information, see [Interact in a team channel](~/resources/bot-v3/bot-conversations/bots-conv-channel.md)), which not only makes them available in that team's channels, but for personal chat for all of those users as well.
-Personal chat differs from chat in channels in that the user does not need to @mention the bot. If a bot is used in multiple contexts (personal, groupChat or channel) you will need to detect if the bot is in a group chat or channel, and process messages a little differently. See [Interact in a team channel or group chat](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md) for more details.
+Personal chat differs from chat in channels in that the user does not need to @mention the bot. If a bot is used in multiple contexts such as personal, groupChat, or channel, you need to detect if the bot is in a group chat or channel, and process messages a little differently. For more information, see [Interact in a team channel or group chat](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md).
## Designing a great personal bot A great bot in Microsoft Teams helps users get the information they need, all within the context of the Teams experience. Personal conversations with a bot are private exchanges between a bot and its user; they're a great way to provide information specific and relevant to that user in the personal context. A bot in personal chat is really a dialog between your service and the individual, where a bot in a group chat or channel broadcasts everything to a group of people.
-Depending on the experience you want to create, the bot might need to work in multiple scopes - personal, groupChat and/or team. The work to support more than one scope is minimal. There is no expectation in Teams that your bot function in all scopes, but you should ensure that your bot makes sense and provides user value in whatever scope(s) you choose to support.
+Depending on the experience you want to create, the bot might need to work in multiple scopes - personal, groupchat, and team. The work to support more than one scope is minimal. There is no expectation in Teams that your bot function in all scopes, but you should ensure that your bot makes sense and provides user value in whatever scope(s) you choose to support.
## Best practice: Welcome messages in personal conversations
-Your bot should [proactively send](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md) a welcome message to a personal chat the first time (and only the first time) a user initiates a personal chat with your bot. (This recommendation does not apply to first-time contacts in a channel.)
+Your bot should [proactively send](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md) a welcome message to a personal chat the first time (and only the first time) a user initiates a personal chat with your bot. This recommendation does not apply to first-time contacts in a channel.
platform Bots Conv Proactive https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bot-conversations/bots-conv-proactive.md
keywords: teams scenarios proactive messaging conversation bot
A proactive message is a message that is sent by a bot to start a conversation. You may want your bot to start a conversation for a number of reasons, including:
-* Welcome messages for personal bot conversations
-* Poll responses
-* External event notifications
+* Welcome messages for personal bot conversations.
+* Poll responses.
+* External event notifications.
Sending a message to start a new conversation thread is different than sending a message in response to an existing conversation: when your bot starts a new a conversation, there is no pre-existing conversation to post the message to. In order to send a proactive message you need to:
Sending a message to start a new conversation thread is different than sending a
1. [Obtain the user's unique Id and tenant Id](#obtain-necessary-user-information) 1. [Send the message](#examples)
-When creating proactive messages you **must** call `MicrosoftAppCredentials.TrustServiceUrl`, and pass in the service URL before creating the `ConnectorClient` you will use to send the message. If you do not, your app will receive a `401: Unauthorized` response. See [the samples below](#net-example-from-this-sample).
+When creating proactive messages you **must** call `MicrosoftAppCredentials.TrustServiceUrl`, and pass in the service URL before creating the `ConnectorClient` you will use to send the message. If you do not, your app will receive a `401: Unauthorized` response. For more information, see [the samples below](#net-example-from-this-sample).
## Best practices for proactive messaging
Bots can create new conversations with an individual Microsoft Teams user by obt
* By [fetching the team roster](~/resources/bot-v3/bots-context.md#fetch-the-team-roster) from a channel your app is installed in. * By caching them when a user [interacts with your bot in a channel](~/resources/bot-v3/bot-conversations/bots-conv-channel.md). * When a users is [@mentioned in a channel conversation](~/resources/bot-v3/bot-conversations/bots-conv-channel.md#-mentions) the bot is a part of.
-* By caching them when you [receive the `conversationUpdate`](~/resources/bot-v3/bots-notifications.md#team-member-or-bot-addition) event when your app is installed in a personal scope, or new members are added to a channel or group chat that
+* By caching them when you [receive the `conversationUpdate`](~/resources/bot-v3/bots-notifications.md#team-member-or-bot-addition) event when your app is installed in a personal scope, or new members are added to a channel or group chat that.
### Proactively install your app using Graph
msg.text('Hello, this is a notification');
bot.send(msg); ```
-*See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
- ## Creating a channel conversation Your team-added bot can post into a channel to create a new reply chain. If you're using the Node.js Teams SDK, use `startReplyChain()` which gives you a fully-populated address with the correct activity id and conversation id. If you are using C#, see the example below.
-Alternatively, you can use the REST API and issue a POST request to [`/conversations`](https://docs.microsoft.com/azure/bot-service/rest-api/bot-framework-rest-connector-send-and-receive-messages?#start-a-conversation) resource.
+Alternatively, you can use the REST API and issue a POST request to [`/conversations`](/azure/bot-service/rest-api/bot-framework-rest-connector-send-and-receive-messages?#start-a-conversation) resource.
### .NET example (from [this sample](https://github.com/OfficeDev/microsoft-teams-sample-complete-csharp/blob/32c39268d60078ef54f21fb3c6f42d122b97da22/template-bot-master-csharp/src/dialogs/examples/teams/ProactiveMsgTo1to1Dialog.cs))
namespace Microsoft.Teams.TemplateBotCSharp.Dialogs
} } ```+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md)
platform Bots Conversations https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bot-conversations/bots-conversations.md
A conversation is a series of messages sent between your bot and one or more use
A bot behaves slightly differently depending on what kind of conversation it is involved in:
-* [Bots in channel and group chat conversations](~/resources/bot-v3/bot-conversations/bots-conv-channel.md) require the user to @ mention the bot to invoke it in a channel.
-* [Bots in single user conversations](~/resources/bot-v3/bot-conversations/bots-conv-personal.md) do not require an @ mention - the user can just type.
+* [Bots in channel and group chat conversations](~/resources/bot-v3/bot-conversations/bots-conv-channel.md) require the user to @mention the bot to invoke it in a channel.
+* [Bots in single user conversations](~/resources/bot-v3/bot-conversations/bots-conv-personal.md) do not require an @mention - the user can just type.
In order for the bot to work in a particular scope it should be listed as supporting that scope in the manifest. Scopes are defined and discussed further in the [Manifest Reference](~/resources/schem).
Bots can participate in a conversation or initiate one. Most communication is in
Each message is an `Activity` object of type `messageType: message`. When a user sends a message, Teams posts the message to your bot; specifically, it sends a JSON object to your bot's messaging endpoint. Your bot examines the message to determine its type and responds accordingly.
-Bots also support event-style messages. See [Handle bot events in Microsoft Teams](~/resources/bot-v3/bots-notifications.md) for more details. Speech is currently not supported.
+Bots also support event-style messages. For more information, see [Handle bot events in Microsoft Teams](~/resources/bot-v3/bots-notifications.md). Speech is currently not supported.
Messages are for the most part the same in across all scopes, but there are differences in how the bot is accessed in the UI and differences behind the scenes which you will need to know about.
Your bot can send rich text, pictures, and cards. Users can send rich text and p
| Format | From user to bot | From bot to user | Notes | | | :: | :: | | | Rich text | Γ£ö | Γ£ö | |
-| Pictures | ✔ | ✔ | Maximum 1024×1024 and 1 MB in PNG, JPEG, or GIF format; animated GIF are not supported |
-| Cards | Γ£û | Γ£ö | See the [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md) for supported cards |
-| Emojis | Γ£û | Γ£ö | Teams currently supports emojis via UTF-16 (such as U+1F600 for grinning face) |
+| Pictures | ✔ | ✔ | Maximum 1024×1024 and 1 MB in PNG, JPEG, or GIF format; animated GIF are not supported. |
+| Cards | Γ£û | Γ£ö | See the [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md) for supported cards. |
+| Emojis | Γ£û | Γ£ö | Teams currently supports emojis via UTF-16 such as, U+1F600 for grinning face. |
|
-For more information on the types of bot interaction supported by the Bot Framework (which bots in teams are based on), see the Bot Framework documentation on [conversation flow](/azure/bot-service/dotnet/bot-builder-dotnet-manage-conversation-flow?view=azure-bot-service-3.0&preserve-view=true) and related concepts in the documentation for [the Bot Builder SDK for .NET](/azure/bot-service/dotnet/bot-builder-dotnet-overview?view=azure-bot-service-3.0&preserve-view=true) and [the Bot Builder SDK for Node.js](/azure/bot-service/nodejs/bot-builder-nodejs-overview?view=azure-bot-service-3.0&preserve-view=true).
+For more information on the types of bot interaction supported by the Bot Framework, which bots in teams are based on, see the Bot Framework documentation on [conversation flow](/azure/bot-service/dotnet/bot-builder-dotnet-manage-conversation-flow?view=azure-bot-service-3.0&preserve-view=true) and related concepts in the documentation for [the Bot Builder SDK for .NET](/azure/bot-service/dotnet/bot-builder-dotnet-overview?view=azure-bot-service-3.0&preserve-view=true) and [the Bot Builder SDK for Node.js](/azure/bot-service/nodejs/bot-builder-nodejs-overview?view=azure-bot-service-3.0&preserve-view=true).
## Message formatting
You can set the optional [`TextFormat`](/azure/bot-service/dotnet/bot-builder-do
For detailed information on how Teams supports text formatting in teams see [Text formatting in bot messages](~/resources/bot-v3/bots-text-formats.md).
-For information on formatting cards in messages, see [Card formatting](~/task-modules-and-cards/cards/cards-format.md).
+For more information on formatting cards in messages, see [Card formatting](~/task-modules-and-cards/cards/cards-format.md).
## Picture messages
For incoming messages, your bot receives an [`Activity`](/azure/bot-service/rest
Your bot receives a payload that contains the user message `Text` as well as other information about the user, the source of the message, and Teams information. Of note:
-* `timestamp` The date and time of the message in Coordinated Universal Time (UTC)
-* `localTimestamp` The date and time of the message in the time zone of the sender
+* `timestamp` The date and time of the message in Coordinated Universal Time (UTC).
+* `localTimestamp` The date and time of the message in the time zone of the sender.
* `channelId` Always "msteams". This refers to a bot framework channel, not a teams channel.
-* `from.id` A unique and encrypted ID for that user for your bot; suitable as a key if your app needs to store user data. It is unique for your bot and cannot be directly used outside your bot instance in any meaningful way to identify that user
+* `from.id` A unique and encrypted ID for that user for your bot; suitable as a key if your app needs to store user data. It is unique for your bot and cannot be directly used outside your bot instance in any meaningful way to identify that user.
* `channelData.tenant.id` The tenant ID for the user. > [!NOTE]
The `channelData` object is not included in messages in personal conversations s
A typical channelData object in an activity sent to your bot contains the following information:
-* `eventType` Teams event type; passed only in cases of [channel modification events](~/resources/bot-v3/bots-notifications.md#channel-updates)
-* `tenant.id` Azure Active Directory tenant ID; passed in all contexts
+* `eventType` Teams event type; passed only in cases of [channel modification events](~/resources/bot-v3/bots-notifications.md#channel-updates).
+* `tenant.id` Azure Active Directory tenant ID; passed in all contexts.
* `team` Passed only in channel contexts, not in personal chat.
- * `id` GUID for the channel
- * `name` Name of the team; passed only in cases of [team rename events](~/resources/bot-v3/bots-notifications.md#team-name-updates)
-* `channel` Passed only in channel contexts when the bot is mentioned or for events in channels in teams where the bot has been added
- * `id` GUID for the channel
+ * `id` GUID for the channel.
+ * `name` Name of the team; passed only in cases of [team rename events](~/resources/bot-v3/bots-notifications.md#team-name-updates).
+* `channel` Passed only in channel contexts when the bot is mentioned or for events in channels in teams where the bot has been added.
+ * `id` GUID for the channel.
* `name` Channel name; passed only in cases of [channel modification events](~/resources/bot-v3/bots-notifications.md#channel-updates). * `channelData.teamsTeamId` Deprecated. This property is included only for backwards compatibility. * `channelData.teamsChannelId` Deprecated. This property is included only for backwards compatibility.
platform Bots Cards https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-cards.md
Last updated 03/29/2018
A *card* is a user-interface (UI) container for short or related pieces of information. Cards can have multiple properties and attachments. Teams support cards in bots, connectors and messaging extensions. See [Cards](~/task-modules-and-cards/what-are-cards.md) for an overview of what cards are and how Teams uses them.
-Bots use cards as part of conversations. See [Bot Conversations](~/resources/bot-v3/bot-conversations/bots-conversations.md) for the details.
+Bots use cards as part of conversations. For more information, see [Bot Conversations](~/resources/bot-v3/bot-conversations/bots-conversations.md).
The [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md) lists all cards supported by bots and discusses how to use them.
platform Bots Context https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-context.md
connector.fetchMembers(
); ```
-Also, see [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
- ## Fetch user profile or roster in personal or group chat You can make the API call for any personal chat to obtain the profile information of the user chatting with your bot.
var connector = new ConnectorClient(new Uri(context.Activity.ServiceUrl));
await context.PostAsync($"ClientInfo: clientinfo "); } ```+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
platform Bots Create https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-create.md
Last updated 12/07/2018
All bots created using the Microsoft Bot Framework are configured and ready to work in Microsoft Teams.
-See the [Bot Framework Documentation](/azure/bot-service/?view=azure-bot-service-3.0&preserve-view=true) for general information on bots.
+For more information, see [Bot Framework Documentation](/azure/bot-service/?view=azure-bot-service-3.0&preserve-view=true) for general information on bots.
## Create a bot for Microsoft Teams
-*Teams App Studio* is a tool that can help create your bot, and an app package that references your bot. It also contains a React control library and configurable samples for cards. See [Getting started with Teams App Studio](~/concepts/build-and-test/app-studio-overview.md). The steps that follow assume that you are hand configuring your bot and not using *Teams App Studio*.
+**Teams App Studio** is a tool that can help create your bot, and an app package that references your bot. It also contains a React control library and configurable samples for cards. For more information, see [Getting started with Teams App Studio](~/concepts/build-and-test/app-studio-overview.md). The steps that follow assume that you are hand configuring your bot and not using **Teams App Studio**:
1. Create the bot using this link: https://dev.botframework.com/bots/new. **Be sure to add Microsoft Teams as a channel from the featured channels list after creating your bot.** Feel free to re-use any Microsoft App ID you generated if you've already created your app package/manifest. ![Bot Framework registration page](~/assets/images/bots/bfregister.png) > [!NOTE]
-> If you do not wish to create your bot in Azure, you **must** use this link to create a new bot: https://dev.botframework.com/bots/new. If you click on the *Create a bot* button in the Bot Framework portal instead, you will [create your bot in Microsoft Azure](#bots-and-microsoft-azure) instead.
+> If you do not wish to create your bot in Azure, you **must** use this link to create a new bot: https://dev.botframework.com/bots/new. If you click on the **Create a bot** in the Bot Framework portal instead, you will [create your bot in Microsoft Azure](#bots-and-microsoft-azure) instead.
-2. Build the bot using the [Microsoft.Bot.Connector.Teams](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams) NuGet package, the [Bot Framework SDK](https://github.com/microsoft/botframework-sdk), or the [Bot Connector API](https://docs.microsoft.com/bot-framework/rest-api/bot-framework-rest-connector-api-reference). *See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
+2. Build the bot using the [Microsoft.Bot.Connector.Teams](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams) NuGet package, the [Bot Framework SDK](https://github.com/microsoft/botframework-sdk), or the [Bot Connector API](/bot-framework/rest-api/bot-framework-rest-connector-api-reference).
-3. Test the bot using the [Bot Framework Emulator](https://docs.microsoft.com/bot-framework/debug-bots-emulator).
+3. Test the bot using the [Bot Framework Emulator](/bot-framework/debug-bots-emulator).
4. Deploy the bot to a cloud service, such as [Microsoft Azure](https://azure.microsoft.com/). Alternatively, run your app locally and use a tunneling service such [ngrok](https://ngrok.com) to expose an https:// endpoint for your bot, such as `https://45az0eb1.ngrok.io/api/messages`.
See the [Bot Framework Documentation](/azure/bot-service/?view=azure-bot-service
![Edit Bot Properties](~/assets/images/bots/bf-migrate-bot-to-azure.png) > * If you register your bot using Microsoft Azure, your bot code does not need to be *hosted* on Microsoft Azure. > * If you do register a bot using Microsoft Azure portal, you must have a Microsoft Azure account. You can [create one for free](https://azure.microsoft.com/free/). To verify your identity when you create one, you must provide a credit card, but it won't be charged; it's always free to create and use bots with Microsoft Teams.
-> * You can now use App Studio to register/update app and bot information directly within Microsoft Teams. You'll only have to use the Microsoft Azure portal for adding/configuring other Bot Framework channels such as Direct Line, Web Chat, Skype, and Facebook Messenger.
+> * You can now use App Studio to register/update app and bot information directly within Microsoft Teams. You'll only have to use the Microsoft Azure portal for adding or configuring other Bot Framework channels such as Direct Line, Web Chat, Skype, and Facebook Messenger.
+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
platform Bots Files https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-files.md
The following table describes the content properties of the attachment:
### Basic example in C#
-The following sample shows how you can handle file uploads and send file consent requests in your bot's dialog.
+The following sample shows how you can handle file uploads and send file consent requests in your bot's dialog:
```csharp
platform Bots Menus https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-menus.md
When a user selects a menu item, the command string is inserted into the text bo
## Bot menu support on Teams mobile app > [!NOTE]
-> Bot menus are not displayed on mobile devices
+> Bot menus are not displayed on mobile devices.
## App manifest
-To create a bot menu, add a new [`commandLists`](~/resources/schem#botscommandlists) object to your app manifest under the bot section. You can declare individual menus with separate commands for each scope your bot supports (`personal`, `groupChat` or `team`) Each menu supports up to 10 commands.
+To create a bot menu, add a new [`commandLists`](~/resources/schem#botscommandlists) object to your app manifest under the bot section. You can declare individual menus with separate commands for each scope your bot supports (`personal`, `groupChat`, or `team`) Each menu supports up to 10 commands.
### Manifest excerpt - single menu for both scopes
platform Bots Message Format https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-message-format.md
Microsoft Teams supports the following formatting options:
| TextFormat value | Description | | | |
-| plain | The text should be treated as raw text with no formatting applied at all |
-| markdown | The text should be treated as Markdown formatting and rendered on the channel as appropriate; see [Formatting text content](#formatting-text-content) for supported styles |
-| xml | The text is simple XML markup; see [Formatting text content](#formatting-text-content) for supported styles |
+| plain | The text should be treated as raw text with no formatting applied at all. |
+| markdown | The text should be treated as Markdown formatting and rendered on the channel as appropriate; see [Formatting text content](#formatting-text-content) for supported styles. |
+| xml | The text is simple XML markup; see [Formatting text content](#formatting-text-content) for supported styles. |
## Formatting text content
Microsoft Teams supports a subset of Markdown and XML (HTML) formatting tags.
Currently, the following limitations apply:
-* Text-only messages do not support table formatting
-* Rich cards support formatting in the text property only, not in the title or subtitle properties
-* Rich cards do not support Markdown or table formatting
+* Text-only messages do not support table formatting.
+* Rich cards support formatting in the text property only, not in the title or subtitle properties.
+* Rich cards do not support Markdown or table formatting.
## Cross-platform support
Support for text formatting varies by type of message and by platform.
### Cards
-See [Card Formatting](~/task-modules-and-cards/cards/cards-format.md) for support in cards.
+For more information, see [Card Formatting](~/task-modules-and-cards/cards/cards-format.md) for support in cards.
platform Bots Notification Only https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-notification-only.md
To enable this, set `isNotificationOnly` to `true`.
## Best practices and limitations
-* Notification-only bots use proactive messaging to communicate with the user. See [Proactive messaging for bots](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md) for more details.
+* Notification-only bots use proactive messaging to communicate with the user. For more information, see [Proactive messaging for bots](~/resources/bot-v3/bot-conversations/bots-conv-proactive.md).
platform Bots Notifications https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-notifications.md
Microsoft Teams sends notifications to your bot for changes or events that happen in scopes where your bot is active. You can use these events to trigger service logic, such as the following:
-* Trigger a welcome message when your bot is added to a team
-* Query and cache group information when the bot is added to a group chat
-* Update cached information on team membership or channel information
-* Remove cached information for a team if the bot is removed
-* When a bot message is liked by a user
+* Trigger a welcome message when your bot is added to a team.
+* Query and cache group information when the bot is added to a group chat.
+* Update cached information on team membership or channel information.
+* Remove cached information for a team if the bot is removed.
+* When a bot message is liked by a user.
Each bot event is sent as an `Activity` object in which `messageType` defines what information is in the object. For messages of type `message`, see [Sending and receiving messages](~/resources/bot-v3/bot-conversations/bots-conversations.md).
The following table lists the events that your bot can receive and take action o
## Team member or bot addition
-The [`conversationUpdate`](/azure/bot-service/dotnet/bot-builder-dotnet-activities?view=azure-bot-service-3.0#conversationupdate&preserve-view=true) event is sent to your bot when it receives information on membership updates for teams where it has been added. It also receives an update when it has been added for the first time specifically for personal conversations. Note that the user information (`Id`) is unique for your bot and can be cached for future use by your service (such as sending a message to a specific user).
+The [`conversationUpdate`](/azure/bot-service/dotnet/bot-builder-dotnet-activities?view=azure-bot-service-3.0#conversationupdate&preserve-view=true) event is sent to your bot when it receives information on membership updates for teams where it has been added. It also receives an update when it has been added for the first time specifically for personal conversations. Note that the user information (`Id`) is unique for your bot and can be cached for future use by your service, such as, sending a message to a specific user.
### Bot or user added to a team
Your bot is notified when a channel is created, renamed, or deleted in a team wh
The channel events are as follows:
-* **channelCreated**&emsp;A user adds a new channel to the team
-* **channelRenamed**&emsp;A user renames an existing channel
-* **channelDeleted**&emsp;A user removes a channel
+* **channelCreated**&emsp;A user adds a new channel to the team.
+* **channelRenamed**&emsp;A user renames an existing channel.
+* **channelDeleted**&emsp;A user removes a channel.
### Full schema example: channelCreated
platform Bots Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-overview.md
Build and connect intelligent bots to interact with Microsoft Teams users natura
A bot appears just like any other team member you interact with in a conversation except that it has a hexagonal avatar icon and is always online.
-A bot behaves differently depending on what kind of conversation it is involved in. Bots in Teams support several kinds of conversations (called scopes in the [app manifest](~/resources/schem)).
+A bot behaves differently depending on what kind of conversation it is involved in. Bots in Teams support several kinds of conversations called scopes in the [app manifest](~/resources/schem).
-* `teams` Also called channel conversations
-* `personal` Conversations between a bot and a single user
-* `groupChat` A conversation between a bot and 2 or more users
+* `teams` Also called channel conversations.
+* `personal` Conversations between a bot and a single user.
+* `groupChat` A conversation between a bot and 2 or more users.
-See [Have a conversation with a Microsoft Teams bot](~/resources/bot-v3/bot-conversations/bots-conversations.md) for more information.
+For more information, see [Have a conversation with a Microsoft Teams bot](~/resources/bot-v3/bot-conversations/bots-conversations.md).
With Microsoft Teams apps, you can make the bot the star of your experience, or just a helper. Bots are distributed as part of your broader app package which can include other capabilities such as [tabs](~/tabs/what-are-tabs.md) or [messaging extensions](~/messaging-extensions/what-are-messaging-extensions.md).
With Microsoft Teams apps, you can make the bot the star of your experience, or
Microsoft Teams supports most of the [Microsoft Bot Framework](https://dev.botframework.com/). (If you already have a bot that's based on the Bot Framework, you can easily adapt it to work in Microsoft Teams.) We recommend you use either C# or Node.js to take advantage of our [SDKs](/microsoftteams/platform/#pivot=sdk-tools). These packages extend the basic Bot Builder SDK classes and methods:
-* Using specialized card types like the Office 365 Connector card
-* Consuming and setting Teams-specific channel data on activities
-* Processing messaging extension requests
+* Using specialized card types like the Office 365 Connector card.
+* Consuming and setting Teams-specific channel data on activities.
+* Processing messaging extension requests.
The SDK extensions install dependencies, including the Bot Builder SDK. * **.NET** To use the Microsoft Teams extensions for the Bot Builder SDK for .NET, install the [Microsoft.Bot.Connector.Teams](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams) NuGet package in your Visual Studio project. For Node.js development, the BotBuilder for Microsoft Teams functionality has been incorporated into the [Bot Framework SDK](https://github.com/microsoft/botframework-sdk) as of v4.6.
-*See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
- > [!IMPORTANT] > You can develop Teams apps in any other web-programming technology and call the [Bot Framework REST APIs](/bot-framework/rest-api/bot-framework-rest-overview) directly, but you must perform all token handling yourself.
The SDK extensions install dependencies, including the Bot Builder SDK.
## Outgoing webhooks
-Outgoing webhooks allow you to create a simple bot for basic interaction, like kicking off a workflow or other simple commands you may need. Outgoing webhooks live only in the team in which you create them and are intended for simple processes specific to your company's workflow. See [outgoing webhooks](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md) for more information.
+Outgoing webhooks allow you to create a simple bot for basic interaction, like kicking off a workflow or other simple commands you may need. Outgoing webhooks live only in the team in which you create them and are intended for simple processes specific to your company's workflow. For more information, see [outgoing webhooks](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md).
## Build a great Teams bot
-The following topics will guide you through the process of creating a great bot for Teams.
+The following topics will guide you through the process of creating a great bot for Teams:
* [Create a bot](~/resources/bot-v3/bots-create.md): Take advantage of the great tools, documentation, and community provided by the Bot Framework team. * [Talk to your bot](~/resources/bot-v3/bot-conversations/bots-conversations.md): Add basic conversation flow and leverage channel-specific functionality. If you develop in .NET or Node.js, use our extensions for the Bot Builder SDK to simplify your work.
-* [Using cards in your bot](~/resources/bot-v3/bots-cards.md) Design cards to communicate and accept user response.
-* [Respond to bot events](~/resources/bot-v3/bots-notifications.md).
-* [Notification-only bots](~/resources/bot-v3/bots-notification-only.md) Using bots to send notifications for your app.
-* [Get context](~/resources/bot-v3/bots-context.md) Get information about the user.
-* [Bot menus](~/resources/bot-v3/bots-menus.md) Using menus in bots.
-* [Bots and files](~/resources/bot-v3/bots-files.md) Sending and receiving files from bots.
-* [Using tabs with bots](~/resources/bot-v3/bots-with-tabs.md) Making tabs and bots work together.
+* [Using cards in your bot](~/resources/bot-v3/bots-cards.md): Design cards to communicate and accept user response.
+* [Respond to bot events](~/resources/bot-v3/bots-notifications.md)
+* [Notification-only bots](~/resources/bot-v3/bots-notification-only.md): Using bots to send notifications for your app.
+* [Get context](~/resources/bot-v3/bots-context.md): Get information about the user.
+* [Bot menus](~/resources/bot-v3/bots-menus.md): Using menus in bots.
+* [Bots and files](~/resources/bot-v3/bots-files.md): Sending and receiving files from bots.
+* [Using tabs with bots](~/resources/bot-v3/bots-with-tabs.md): Making tabs and bots work together.
* [Test your bot](~/resources/bot-v3/bots-test.md): Add your bot for personal or team conversations to see it in action.+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
platform Bots Test https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-test.md
There are two methods for uploading your app. You can either use [App Studio](~/
## Debug your bot locally
-If you are hosting your bot locally during development you'll need to use a tunneling service like [ngrok](https://ngrok.com/) in order to test your bot. Once you've downloaded and installed ngrok, run the below command to start the tunneling service (you may need to add ngrok to your path).
+If you are hosting your bot locally during development you'll need to use a tunneling service like [ngrok](https://ngrok.com/) in order to test your bot. Once you've downloaded and installed ngrok, run the below command to start the tunneling service. You may need to add ngrok to your path.
```bash ngrok http <port> -host-header=localhost:<port>
To remove your bot completely from Teams, go to your Bot Dashboard and edit the
## Removing your bot from AppSource
-If you want to remove your bot from your Teams app in AppSource (formerly Office Store), you must remove the bot from your app manifest and resubmit your app for validation. See [Publish your Microsoft Teams app to AppSource](~/concepts/deploy-and-publish/apps-publish.md) for more information.
+If you want to remove your bot from your Teams app in AppSource (previously Office Store), you must remove the bot from your app manifest and resubmit your app for validation. For more information, see [Publish your Microsoft Teams app to AppSource](~/concepts/deploy-and-publish/apps-publish.md).
platform Bots Text Formats https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-text-formats.md
Last updated 03/29/2018
[!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-bots.md)]
-You can set the optional [`TextFormat`](https://docs.microsoft.com/bot-framework/dotnet/bot-builder-dotnet-create-messages#customizing-a-message) property to control how your message's text content is rendered.
+You can set the optional [`TextFormat`](/bot-framework/dotnet/bot-builder-dotnet-create-messages#customizing-a-message) property to control how your message's text content is rendered.
Microsoft Teams supports the following formatting options: | TextFormat value | Description | | | |
-| plain | The text should be treated as raw text with no formatting applied at all |
-| markdown | The text should be treated as Markdown formatting and rendered on the channel as appropriate; see [Formatting text content](#formatting-text-content) for supported styles |
-| xml | The text is simple XML markup; see [Formatting text content](#formatting-text-content) for supported styles |
+| plain | The text should be treated as raw text with no formatting applied at all. |
+| markdown | The text should be treated as Markdown formatting and rendered on the channel as appropriate; see [Formatting text content](#formatting-text-content) for supported styles. |
+| xml | The text is simple XML markup; see [Formatting text content](#formatting-text-content) for supported styles. |
## Formatting text content
Currently, the following limitations apply:
* Text-only messages do not support table formatting
-For information on formatting in cards see the [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md).
+For information on formatting in cards, see [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md).
### Cross-platform support
platform Bots With Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-with-tabs.md
This flow works best if your identity provider implements the OAuth 2.0 protocol
## Constructing deep links to tabs in messages from your bot
-You may want to use tabs to show more content than can fit inside of a card, or provide a way to complete complex form-filling tasks using the tab canvas. For example, consider navigating the user to the tab when he or she clicks on the card from your bot. For this to happen, youΓÇÖll need to encode your botΓÇÖs message to include a [deep link](~/concepts/build-and-test/deep-links.md) URL, either via markup or as the target of the openUrl action.
+You may want to use tabs to show more content than can fit inside of a card, or provide a way to complete complex form-filling tasks using the tab canvas. For example, consider navigating the user to the tab when he or she clicks on the card from your bot. For this to happen, youΓÇÖll need to encode your botΓÇÖs message to include a [deep link](~/concepts/build-and-test/deep-links.md) URL, either through markup or as the target of the openUrl action.
-Deep links rely on an entityId, which is an opaque value that maps to a unique entity in your system. When the tab is created, you ideally store some simple state (e.g. flag) on your backend indicating the tab has been created in the channel. When your bot constructs a message, it can target the entityId associated with that tab.
+Deep links rely on an entityId, which is an opaque value that maps to a unique entity in your system. When the tab is created, you ideally store some simple state, For example, flag on your backend indicating the tab has been created in the channel. When your bot constructs a message, it can target the entityId associated with that tab.
-**Note:** in personal chats, because tabs are ΓÇ£staticΓÇ¥ and installed with the app, you can always assume their existence and thus construct deep links accordingly.
+> [!NOTE]
+> in personal chats, because tabs are ΓÇ£staticΓÇ¥ and installed with the app, you can always assume their existence and thus construct deep links accordingly.
## Sending notifications for tab updates
platform Create Extensions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/messaging-extension-v3/create-extensions.md
To initiate actions from a messaging extension set the `type` parameter to `act
### Initiate actions from messages
-In addition to initiating actions from the compose message area, you can also use your messaging extension to initiate an action from a message. This will allow you to send the contents of the message to your bot for processing, and optionally reply to that message with a response using the method described in [Responding to submit](#responding-to-submit). The response will be inserted as a reply to the message that your users can edit before submitting. Your users can access your messaging extension from the overflow `...` menu and then selecting `Take action` as in the image below.
+In addition to initiating actions from the compose message area, you can also use your messaging extension to initiate an action from a message. This will allow you to send the contents of the message to your bot for processing, and optionally reply to that message with a response using the method described in [Responding to submit](#responding-to-submit). The response will be inserted as a reply to the message that your users can edit before submitting. Your users can access your messaging extension from the overflow `...` menu and then selecting `Take action` as in the following image:
![Example of initiating an action from a message](~/assets/images/compose-extensions/messageextensions_messageaction.png)
Below is an example of the `value` object containing the message details that wi
### Test via uploading
-You can test your messaging extension by uploading your app. See [Uploading your app in a team](~/concepts/deploy-and-publish/apps-upload.md) for details.
+You can test your messaging extension by uploading your app. For more information, see [Uploading your app in a team](~/concepts/deploy-and-publish/apps-upload.md).
To open your messaging extension, navigate to any of your chats or channels. Choose the **More options** (**&#8943;**) button in the compose box, and choose your messaging extension.
There are three ways to collect information from an end user in Teams.
In this method, all you need to do is define a static list of parameters in the manifest as shown above in the "Create To Do" command. To use this method ensure `fetchTask` is set to `false` and that you define your parameters in the manifest.
-When a user chooses a command with static parameters, Teams will generate a form in a Task Module with the parameters defined in the manifest. On hitting Submit a `composeExtension/submitAction` is sent to the bot. See the topic [Responding to submit](#responding-to-submit) for more information on the expected set of responses.
+When a user chooses a command with static parameters, Teams will generate a form in a Task Module with the parameters defined in the manifest. On hitting Submit a `composeExtension/submitAction` is sent to the bot. For more information on the expected set of responses, see [Responding to submit](#responding-to-submit).
### Dynamic input using an adaptive card In this method, your service can define a custom adaptive card to collect the end user input. For this approach, set the `fetchTask` parameter to `true` in the manifest. Note that if you set `fetchTask` to `true` any static parameters defined for the command will be ignored.
-In this method your service will receive a `composeExtension/fetchTask` event and needs to respond with an adaptive card based [task module response](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object). Below is an sample response with an adaptive card:
+In this method your service will receive a `composeExtension/fetchTask` event and needs to respond with an adaptive card based [task module response](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object). Following is a sample response with an adaptive card:
```json {
The bot can also respond with an auth/config response if the user needs to authe
In this method your service can show an `<iframe>` based widget to show any custom UI and collect user input. For this approach, set the `fetchTask` parameter to `true` in the manifest.
-Just like in the adaptive card flow your service will be send a `fetchTask` event and needs to respond with a URL based [task module response](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object). Below is an sample response with an Adaptive card:
+Just like in the adaptive card flow your service will be send a `fetchTask` event and needs to respond with a URL based [task module response](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object). Following is a sample response with an Adaptive card:
```json {
Just like in the adaptive card flow your service will be send a `fetchTask` even
If your app also contains a conversational bot, it may be necessary to ensure that your bot is installed in the conversation before loading your task module. This can be useful in situations where you need to get additional context for you task module. For example, you may need to fetch the roster to populate a people picker control, or the list of channels in a team.
-To facilitate this flow, when your messaging extension first receives the `composeExtension/fetchTask` invoke check to see if your bot is installed in the current context (you could accomplish this by attempting the get roster call, for example). If your bot is not installed, you return an Adaptive Card with an action that requests the user to install your bot See the example below. Note that this requires the user to have permission to install apps in that location; if they cannot they will be presented with a message asking them to contact their administrator.
+To facilitate this flow, when your messaging extension first receives the `composeExtension/fetchTask` invoke check to see if your bot is installed in the current context. You could accomplish this by attempting the get roster call, for example, If your bot is not installed, you return an Adaptive Card with an action that requests the user to install your bot See the example below. Note that this requires the user to have permission to install apps in that location; if they cannot they will be presented with a message asking them to contact their administrator.
Here's an example of the response:
This is used when your extension needs to chain dialogs together to get more inf
### Compose extension auth/config response
-This is used when your extension needs to either authenticate or configure in order to continue. See [authentication section](~/resources/messaging-extension-v3/search-extensions.md#authentication) in the search section for more details.
+This is used when your extension needs to either authenticate or configure in order to continue. For more information, see [authentication section](~/resources/messaging-extension-v3/search-extensions.md#authentication) in the search section.
### Compose extension result response
teamChatConnector.onComposeExtensionSubmitAction((
}); ```
-*See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
- # [C#/.NET](#tab/dotnet) This sample shows this flow using the [Microsoft.Bot.Connector.Teams SDK (v3)](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams).
public class MessagesController : ApiController
} ```+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md)
platform Search Extensions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/messaging-extension-v3/search-extensions.md
Last updated 07/20/2019
[!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-me.md)]
-Search based messaging extensions allow you to query your service and post that information in the form of a card, right into your message
+Search based messaging extensions allow you to query your service and post that information in the form of a card, right into your message.
![Example of messaging extension card](~/assets/images/compose-extensions/ceexample.png)
-The following sections describe how to do this.
+The following sections describe how to do this:
[!include[common content for creating extensions](~/includes/messaging-extensions/messaging-extensions-common.md)]
If you set `canUpdateConfiguration` to `true` in the manifest, you enable the **
A messaging extension receives an `onQuery` event when anything happens in the messaging extension window or is sent to the window.
-If your messaging extension uses a configuration page, your handler for `onQuery` should first check for any stored configuration information; if the messaging extension isn't configured, return a `config` response with a link to your configuration page. Be aware that the response from the configuration page is also handled by `onQuery`. (The sole exception is when the configuration page is called by the handler for `onQuerySettingsUrl`; see the following section.)
+If your messaging extension uses a configuration page, your handler for `onQuery` should first check for any stored configuration information; if the messaging extension isn't configured, return a `config` response with a link to your configuration page. Be aware that the response from the configuration page is also handled by `onQuery`. The sole exception is when the configuration page is called by the handler for `onQuerySettingsUrl`; see the following section:
If your messaging extension requires authentication, check the user state information; if the user isn't signed in, follow the instructions in the [Authentication](#authentication) section later in this topic.
The `onQuerySettingsUrl` and `onSettingsUpdate` events work together to enable t
![Screenshots of locations of Settings menu item](~/assets/images/compose-extensions/compose-extension-settings-menu-item.png)
-Your handler for `onQuerySettingsUrl` returns the URL for the configuration page; after the configuration page closes, your handler for `onSettingsUpdate` accepts and saves the returned state. (This is the one case in which `onQuery` *doesn't* receive the response from the configuration page.)
+Your handler for `onQuerySettingsUrl` returns the URL for the configuration page; after the configuration page closes, your handler for `onSettingsUpdate` accepts and saves the returned state. This is the one case in which `onQuery` *doesn't* receive the response from the configuration page.
## Receive and respond to queries
The request parameters itself are found in the value object, which includes the
| Property name | Purpose | ||| | `commandId` | The name of the command invoked by the user, matching one of the commands declared in the app manifest. |
-| `parameters` | Array of parameters. Each parameter object contains the parameter name, along with the parameter value provided by the user. |
+| `parameters` | Array of parameters: Each parameter object contains the parameter name, along with the parameter value provided by the user. |
| `queryOptions` | Pagination parameters: <br>`skip`: skip count for this query <br>`count`: number of elements to return | #### Request example
We support the following attachment types:
* [Office 365 Connector card](~/task-modules-and-cards/cards/cards-reference.md#office-365-connector-card) * [Adaptive card](~/task-modules-and-cards/cards/cards-reference.md#adaptive-card)
-See [Cards](~/task-modules-and-cards/what-are-cards.md) for an overview.
+For more information, see [Cards](~/task-modules-and-cards/what-are-cards.md) for an overview.
To learn how to use the thumbnail and hero card types, see [Add cards and card actions](~/task-modules-and-cards/cards/cards-actions.md).
To prompt an unauthenticated user to sign in, respond with a suggested action of
``` > [!NOTE]
-> For the sign-in experience to be hosted in a Teams pop-up, the domain portion of the URL must be in your appΓÇÖs list of valid domains. (See [validDomains](~/resources/schem#validdomains) in the manifest schema.)
+> For the sign-in experience to be hosted in a Teams pop-up, the domain portion of the URL must be in your appΓÇÖs list of valid domains. For more information, see [validDomains](~/resources/schem#validdomains) in the manifest schema.
### Start the sign-in flow
As with other embedded experiences running inside Microsoft Teams, your code ins
When the sign-in request completes and redirects back to your page, it should perform the following steps:
-1. Generate a security code. (This can be a random number.) You need to cache this code on your service, along with the credentials obtained through the sign-in flow (such as OAuth 2.0 tokens).
+1. Generate a security code. (This can be a random number.) You need to cache this code on your service, along with the credentials obtained through the sign-in flow such as, OAuth 2.0 tokens.
2. Call `microsoftTeams.authentication.notifySuccess` and pass the security code. At this point, the window closes and control is passed to the Teams client. The client now can reissue the original user query, along with the security code in the `state` property. Your code can use the security code to look up the credentials stored earlier to complete the authentication sequence and then complete the user request.
class App {
const app = new App(); app.run(); ```
-*See also* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
+
+## See also
+
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
platform Moodleinstructions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/moodleInstructions.md
Use the generated `AppID` and `Key` in your Microsoft 365 Moodle Plugins setup p
> [!NOTE] > Depending on your environment, you can select different options during this stage.
- 1. Switch to the **Sync Settings tab**
+1. Synchronize users between your Moodle server and Azure AD. Depending on your environment, you can select different options during this stage. To get started:
+ 1. Switch to the **Sync Settings tab**.
+ 1. In the **Sync users with Azure AD** section, select the checkboxes that apply to your environment. You must select the following: Γ£ö Create accounts in Moodle for users in Azure AD.
Use the generated `AppID` and `Key` in your Microsoft 365 Moodle Plugins setup p
## 3. Deploy the Moodle Assistant Bot to Azure
-The free Moodle assistant bot for Microsoft Teams helps teachers and students answer questions about their courses, assignments, grades, and other information in Moodle. The bot also sends Moodle notifications to students and teachers within Teams. The bot is an open-source project maintained by Microsoft and is available on [GitHub](https://github.com/microsoft/Moodle-Teams-Bot).
+The free Moodle assistant bot for Microsoft Teams helps teachers and students answer questions about their courses, assignments, grades, and other information in Moodle. The bot also sends Moodle notifications to students and teachers within Teams. The bot is an open-source project maintained by Microsoft, and is available on [GitHub](https://github.com/microsoft/Moodle-Teams-Bot).
> [!NOTE] >
The free Moodle assistant bot for Microsoft Teams helps teachers and students an
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**
+ 1. Go to the plugins administration page, and then select **Plugins**. Under **Microsoft 365 Integration**, select the **Teams Settings** tab. 1. Select the **Microsoft Application Registration Portal** link and sign in with your Microsoft ID.
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. > * 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.
platform Samesite Cookie Update https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/samesite-cookie-update.md
## Cookies in brief
- Cookies are text strings, sent from websites, and stored on a computer by the web browser. They're typically used for authentication and personalization, e.g., recalling stateful information, preserving user settings, recording browsing activity, and displaying relevant ads. Cookies are always linked to a particular domain and can be installed by various parties. They are categorized as follows:
+ Cookies are text strings, sent from websites, and stored on a computer by the web browser. They're typically used for authentication and personalization, For example, recalling stateful information, preserving user settings, recording browsing activity, and displaying relevant ads. Cookies are always linked to a particular domain and can be installed by various parties. They are categorized as follows:
|Cookie|Scope| | | |
- |**First-party cookie**|A first-party cookie is created by websites that a user visits and is used to save data such as shopping cart items, login credentials (e.g., authentication cookies), and other analytics.|
- |**Second-party cookie**|A second-party cookies is technically the same as a first-party cookie. The difference is that data is shared with a second party via a data partnership agreement (e.g., [Microsoft Teams analytics and reporting](/microsoftteams/teams-analytics-and-reports/teams-reporting-reference)). |
- |**Third-party cookie**|A third-party cookie is installed by a domain other than the one the user explicitly visited and is mainly used for tracking (e.g. "Like" buttons), ad serving, and live chats.|
+ |**First-party cookie**|A first-party cookie is created by websites that a user visits and is used to save data such as shopping cart items, login credentials. For example, authentication cookies, and other analytics.|
+ |**Second-party cookie**|A second-party cookies is technically the same as a first-party cookie. The difference is that data is shared with a second party via a data partnership agreement. For example, [Microsoft Teams analytics and reporting](/microsoftteams/teams-analytics-and-reports/teams-reporting-reference). |
+ |**Third-party cookie**|A third-party cookie is installed by a domain other than the one the user explicitly visited and is mainly used for tracking. For example, "Like" buttons, ad serving, and live chats.|
### Cookies and HTTP requests
Android WebView is a Chrome system component that allows Android apps to display
* For cookies that are only needed in a first-party context, you should declare them as `SameSite=Lax` or `SameSite=Strict`, as appropriate. * For cookies needed in a third-party context, you should ensure that they are declared as `SameSite=None; Secure`.
-## Learn more
+## See also
* [SameSite examples](https://github.com/GoogleChromeLabs/samesite-examples)
platform Manifest Schema Dev Preview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema-dev-preview.md
The object is an array (maximum of only 1 element&mdash;currently only one bot i
### bots.commandLists
-An optional list of commands that your bot can recommend to users. The object is an array (maximum of 2 elements) with all elements of type `object`; you must define a separate command list for each scope that your bot supports. See [Bot menus](~/bots/how-to/create-a-bot-commands-menu.md) for more information.
+An optional list of commands that your bot can recommend to users. The object is an array (maximum of 2 elements) with all elements of type `object`; you must define a separate command list for each scope that your bot supports. For more information, see [Bot menus](~/bots/how-to/create-a-bot-commands-menu.md).
|Name| Type| Maximum size | Required | Description| |||||| |`items.scopes`|array of enum|3|Γ£ö|Specifies the scope for which the command list is valid. Options are `team`, `personal`, and `groupchat`.|
-|`items.commands`|array of objects|10|Γ£ö|An array of commands the bot supports:<br>`title`: the bot command name (string, 32)<br>`description`: a simple description or example of the command syntax and its argument (string, 128)|
+|`items.commands`|array of objects|10|Γ£ö|An array of commands the bot supports:<br>`title`: the bot command name (string, 32).<br>`description`: a simple description or example of the command syntax and its argument (string, 128).|
## connectors
Each command item is an object with the following structure:
|Name| Type| Maximum size | Required | Description| ||||||
-|`id`|String|64 characters|Γ£ö|The ID for the command|
+|`id`|String|64 characters|Γ£ö|The ID for the command.|
|`type`|String|64 characters||Type of the command. One of `query` or `action`. Default: `query`|
-|`title`|String|32 characters|Γ£ö|The user-friendly command name|
-|`description`|String|128 characters||The description that appears to users to indicate the purpose of this command|
+|`title`|String|32 characters|Γ£ö|The user-friendly command name.|
+|`description`|String|128 characters||The description that appears to users to indicate the purpose of this command.|
|`initialRun`|Boolean|||A Boolean value that indicates whether the command should be run initially with no parameters. Default: `false`| |`context`|Array of Strings|3||Defines where the message extension can be invoked from. Any combination of `compose`, `commandBox`, `message`. Default is `["compose", "commandBox"]`|
-|`fetchTask`|Boolean|||A boolean value that indicates if it should fetch the task module dynamically|
-|`taskInfo`|Object|||Specify the task module to preload when using a messaging extension command|
-|`taskInfo.title`|String|64||Initial dialog title|
-|`taskInfo.width`|String|||Dialog width - either a number in pixels or default layout such as 'large', 'medium', or 'small'|
-|`taskInfo.height`|String|||Dialog height - either a number in pixels or default layout such as 'large', 'medium', or 'small'|
-|`taskInfo.url`|String|||Initial webview URL|
-|`messageHandlers`|Array of Objects|5||A list of handlers that allow apps to be invoked when certain conditions are met. Domains must also be listed in `validDomains`|
+|`fetchTask`|Boolean|||A boolean value that indicates if it should fetch the task module dynamically.|
+|`taskInfo`|Object|||Specify the task module to preload when using a messaging extension command.|
+|`taskInfo.title`|String|64||Initial dialog title.|
+|`taskInfo.width`|String|||Dialog width - either a number in pixels or default layout such as 'large', 'medium', or 'small'.|
+|`taskInfo.height`|String|||Dialog height - either a number in pixels or default layout such as 'large', 'medium', or 'small'.|
+|`taskInfo.url`|String|||Initial webview URL.|
+|`messageHandlers`|Array of Objects|5||A list of handlers that allow apps to be invoked when certain conditions are met. Domains must also be listed in `validDomains`.|
|`messageHandlers.type`|String|||The type of message handler. Must be `"link"`.| |`messageHandlers.value.domains`|Array of Strings|||Array of domains that the link message handler can register for.| |`parameters`|Array of object|5|Γ£ö|The list of parameters the command takes. Minimum: 1; maximum: 5| |`parameter.name`|String|64 characters|Γ£ö|The name of the parameter as it appears in the client. This is included in the user request.| |`parameter.title`|String|32 characters|Γ£ö|User-friendly title for the parameter.| |`parameter.description`|String|128 characters||User-friendly string that describes this parameterΓÇÖs purpose.|
-|`parameter.inputType`|String|128 characters||Defines the type of control displayed on a task module for `fetchTask: true`. One of `text`, `textarea`, `number`, `date`, `time`, `toggle`, `choiceset`|
-|`parameter.choices`|Array of Objects|10||The choice options for the `choiceset`. Use only when `parameter.inputType` is `choiceset`|
-|`parameter.choices.title`|String|128||Title of the choice|
-|`parameter.choices.value`|String|512||Value of the choice|
+|`parameter.inputType`|String|128 characters||Defines the type of control displayed on a task module for `fetchTask: true`. One of `text`, `textarea`, `number`, `date`, `time`, `toggle`, `choiceset`.|
+|`parameter.choices`|Array of Objects|10||The choice options for the `choiceset`. Use only when `parameter.inputType` is `choiceset`.|
+|`parameter.choices.title`|String|128||Title of the choice.|
+|`parameter.choices.value`|String|512||Value of the choice.|
## permissions
Each command item is an object with the following structure:
An array of `string` which specifies which permissions the app requests, which lets end users know how the extension will perform. The following options are non-exclusive:
-* `identity` &emsp; Requires user identity information
-* `messageTeamMembers` &emsp; Requires permission to send direct messages to team members
+* `identity` &emsp; Requires user identity information.
+* `messageTeamMembers` &emsp; Requires permission to send direct messages to team members.
Changing these permissions when updating your app will cause your users to repeat the consent process the first time they run the updated app.
platform Manifest Schema https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema.md
keywords: teams manifest schema
The Teams manifest describes how the app integrates into the Microsoft Teams product. Your manifest must conform to the schema hosted at [`https://developer.microsoft.com/json-schemas/teams/v1.10/MicrosoftTeams.schema.json`]( https://developer.microsoft.com/json-schemas/teams/v1.10/MicrosoftTeams.schema.json). Previous versions 1.0, 1.1,..., 1.6, and so on are also supported (using "v1.x" in the URL).
-The following schema sample shows all extensibility options.
+The following schema sample shows all extensibility options:
## Sample full manifest
A unique identifier for the app in reverse domain notation; for example, com.exa
**Optional** ΓÇö object
-Allows the specification of a default language, as well as pointers to additional language files. See [localization](~/concepts/build-and-test/apps-localization.md).
+Allows the specification of a default language, as well as pointers to additional language files. For more information, see [localization](~/concepts/build-and-test/apps-localization.md).
|Name| Maximum size | Required | Description| |||||
This item is an array (maximum of 16 elements) with all elements of the type `ob
> [!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, *see* [Get context for your Microsoft Teams tab](../../tabs/how-to/access-teams-context.md).
+> 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
An optional list of commands that your bot can recommend to users. The object is
|Name| Type| Maximum size | Required | Description| |||||| |`items.scopes`|array of enums|3|Γ£ö|Specifies the scope for which the command list is valid. Options are `team`, `personal`, and `groupchat`.|
-|`items.commands`|array of objects|10|Γ£ö|An array of commands the bot supports:<br>`title`: the bot command name (string, 32)<br>`description`: a simple description or example of the command syntax and its argument (string, 128)|
+|`items.commands`|array of objects|10|Γ£ö|An array of commands the bot supports:<br>`title`: the bot command name (string, 32)<br>`description`: a simple description or example of the command syntax and its argument (string, 128).|
### bots.commandLists.commands |Name| Type| Maximum size | Required | Description| ||||||
-|title|string|12|Γ£ö|The bot command name|
+|title|string|12|Γ£ö|The bot command name.|
|description|string|128 characters|Γ£ö|A simple text description or an example of the command syntax and its arguments.| ## connectors
The item is an array (maximum of 1 element) with all elements of type `object`.
|Name| Type | Maximum Size | Required | Description| |||||| |`botId`|string|64|Γ£ö|The unique Microsoft app ID for the bot that backs the messaging extension, as registered with the Bot Framework. This may well be the same as the overall App ID.|
-|`commands`|array of objects|10|Γ£ö|Array of commands the messaging extension supports|
+|`commands`|array of objects|10|Γ£ö|Array of commands the messaging extension supports.|
|`canUpdateConfiguration`|boolean|||A value indicating whether the configuration of a messaging extension can be updated by the user. Default: **false**.| |`messageHandlers`|array of Objects|5||A list of handlers that allow apps to be invoked when certain conditions are met.| |`messageHandlers.type`|string|||The type of message handler. Must be `"link"`.|
Each command item is an object with the following structure:
An array of `string` which specifies which permissions the app requests, which lets end users know how the extension performs. The following options are non-exclusive:
-* `identity` &emsp; Requires user identity information
-* `messageTeamMembers` &emsp; Requires permission to send direct messages to team members
+* `identity` &emsp; Requires user identity information.
+* `messageTeamMembers` &emsp; Requires permission to send direct messages to team members.
Changing these permissions during app update, causes your users to repeat the consent process after they run the updated app. See [Updating your app](~/concepts/deploy-and-publish/appsource/post-publish/overview.md) for more information.
Provides the native features on a user's device that your app requests access to
## validDomains
-**Optional**, except **Required** where noted
+**Optional**, except **Required** where noted.
A list of valid domains for websites the app expects to load within the Teams client. Domain listings can include wildcards, for example, `*.example.com`. This matches exactly one segment of the domain; if you need to match `a.b.example.com` then use `*.*.example.com`. If your tab configuration or content UI needs to navigate to any other domain besides the one use for tab configuration, that domain must be specified here.
platform Teams Contributor Reference https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/teams-contributor-reference.md
> > * Install [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git). > * Install [Visual Studio Code](https://code.visualstudio.com/) (VS Code).
-> * Install [Docs Authoring Pack](https://marketplace.visualstudio.com/items?itemName=docsmsft.docs-authoring-pack) directly from the VS Code Marketplace
+> * Install [Docs Authoring Pack](https://marketplace.visualstudio.com/items?itemName=docsmsft.docs-authoring-pack) directly from the VS Code Marketplace.
<br>&emsp;&emsp; or > [!div class="checklist"]
## Review the Microsoft Docs Contributors Guide
-The [contributors guide](/contribute) offers direction for creating, publishing, and updating technical content on the Microsoft Docs platform. *See also*, [Docs style and voice quick start](/contribute/style-quick-start) .
+The [contributors guide](/contribute) offers direction for creating, publishing, and updating technical content on the Microsoft Docs platform.
## Microsoft Writing, Style, and Content Guides
The [contributors guide](/contribute) offers direction for creating, publishing,
Setting a valid file path for hyperlinks in your documentation can be a challenge, especially when using relative paths and creating links to other docsets. Your build won't succeed on GitHub if the file path is incorrect or invalid.
-For more information on hyperlinks and file paths, please *see* [Use links in documentation](/contribute/how-to-write-links).
+For more information on hyperlinks and file paths, see [Use links in documentation](/contribute/how-to-write-links).
>[!IMPORTANT] > To reference an article that is *part of* the Teams platform docset:<br>
For more information on hyperlinks and file paths, please *see* [Use links in d
## Code Samples and Snippets
-Code samples play an important role in helping developers successfully use APIs and SDKs. Well-presented code samples can communicate how things work more clearly than descriptive text and instructional information alone. Your code samples should be accurate, concise, well-documented, and, most importantly, reader-friendly. Code that is easy-to-read is also easy to understand, test, debug, maintain, modify, and extend. *See* [How to include code in docs](/contribute/code-in-docs). For readability tips, please *see also* [Cutting Edge : Source Code Readability Tips](/archive/msdn-magazine/2014/october/cutting-edge-source-code-readability-tips).
+Code samples play an important role in helping developers successfully use APIs and SDKs. Well-presented code samples can communicate how things work more clearly than descriptive text and instructional information alone. Your code samples should be accurate, concise, well-documented, and, most importantly, reader-friendly. Code that is easy-to-read is also easy to understand, test, debug, maintain, modify, and extend. For more information, see [How to include code in docs](/contribute/code-in-docs).
+
+## See also
+
+* [Docs style and voice quick start](/contribute/style-quick-start)
+* [Cutting Edge : Source Code Readability Tips](/archive/msdn-magazine/2014/october/cutting-edge-source-code-readability-tips).
> [!div class="nextstepaction"] > [Get Microsoft Docs updates and the latest announcements](/teamblog)
platform App Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/app-templates.md
Classroom Drop-in is a Microsoft [Power Platform](https://powerapps.microsoft.co
## Company Communicator
-The Company Communicator app enables corporate teams to create and send messages intended for multiple teams or large number of employees over chat allowing organization to reach employees right where they collaborate. Utilize this template for multiple scenarios such as new initiative announcements, employee onboarding, modern learning and development or organization-wide broadcasts.
+The Company Communicator app enables corporate teams to create and send messages intended for multiple teams or large number of employees over chat allowing organization to reach employees right where they collaborate. Utilize this template for multiple scenarios such as new initiative announcements, employee onboarding, modern learning, and development or organization-wide broadcasts.
The app provides an easy interface for designated users to create, preview, collaborate and send messages.
CrowdSourcer is a [Microsoft Teams bot](../bots/what-are-bots.md) that gives tea
Self-expression is core to a healthy team culture. This app template is a [messaging extension](~/messaging-extensions/what-are-messaging-extensions.md) that enables your users to use custom stickers and GIFs within Microsoft Teams. This template provides an easy web-based configuration experience where anyone with configuration access can upload the GIFs, stickers, and images they want their users to have, allowing your entire team to use any set of stickers you choose.
-This app also enables easy sharing of images, GIFs, stickers across teams without needing access to SharePoint sites or individual channels as storage and sharing mechanisms. For example, product teams can easily share product images and GIFs to social media, marketing and sales teams programmatically. One can also extend this app by triggering a notification flow to specific teams or individuals when new images, and GIFs are made available.
+This app also enables easy sharing of images, GIFs, stickers across teams without needing access to SharePoint sites or individual channels as storage and sharing mechanisms. For example, product teams can easily share product images and GIFs to social media, marketing, and sales teams programmatically. One can also extend this app by triggering a notification flow to specific teams or individuals when new images, and GIFs are made available.
[Get it on GitHub](https://github.com/OfficeDev/microsoft-teams-stickers-app)
The Get Support app is used by organizations that are using Microsoft Teams, to
* Requesting assistance on different categories from a Power App. * Notifications sent to requestors informing them of who hare assigned. * Notifications sent to assigned supervisors informing them of who needs assistance.
-* Analyzing escalations and patterns in SharePoint and PowerBI.S
+* Analyzing escalations and patterns in SharePoint and PowerBI.S.
[Get it on GitHub](https://github.com/OfficeDev/microsoft-teams-app-get-support/)
To resolve this problem, the List Search app template is used. Many users use Sh
## Staff Check-ins
-Staff Check-ins is a [Power Apps](/powerapps/powerapps-overview) based app that enables oversight communication between your business and field personnel. Staff can easily provide time-critical information and status updates on either a scheduled or ad-hoc basis directly from Teams. The app supports real-time location, photos, notes, reminder notifications and automated workflows.
+Staff Check-ins is a [Power Apps](/powerapps/powerapps-overview) based app that enables oversight communication between your business and field personnel. Staff can easily provide time-critical information and status updates on either a scheduled or ad-hoc basis directly from Teams. The app supports real-time location, photos, notes, reminder notifications, and automated workflows.
[Get it on GitHub](https://github.com/OfficeDev/microsoft-teams-apps-staffcheckins)
platform Integrating Web Apps https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/integrating-web-apps.md
The different types of apps which you can integrate with Teams are as follows:
* **SharePoint**: A SharePoint page you want to surface in Teams. You can map and follow the appropriate guideline applicable to your integration scenario.
-This document gives an overview of Teams capabilities, share-point requirements for file and data storage, API requirements, authentication and deep-linking of your app with Teams.
+This document gives an overview of Teams capabilities, share-point requirements for file and data storage, API requirements, authentication, and deep-linking of your app with Teams.
## Get to know Teams platform capabilities
Following are the prerequisites to integrate your app with Teams.
***Integration scenarios**: SharePoint*
-To integrate an existing [SharePoint page](https://docs.microsoft.com/MicrosoftTeams/teams-standalone-static-tabs-using-spo-sites) as a Teams tab, you must consider the following:
+To integrate an existing [SharePoint page](/MicrosoftTeams/teams-standalone-static-tabs-using-spo-sites) as a Teams tab, you must consider the following:
* It must be a *modern* SharePoint online page. * Only personal tabs are supported. You cannot integrate your page as a channel tab.
-Alternatively, you can build a Teams tab [using the SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction).
+Alternatively, you can build a Teams tab [using the SharePoint Framework](/sharepoint/dev/spfx/integrate-with-teams-introduction).
## Aim towards multi-tenancy
If your app is used by multiple organizations, consider multi-tenant hosting tha
***Integration scenarios**: Standalone apps, collaboration apps*
-You must make your app's existing APIs and data structures support the app when integrating with Teams. To extend the support, you must augment the APIs and data structures with contextual information about Teams for [identity mapping](../concepts/authentication/configure-identity-provider.md), [deep-link support](../concepts/build-and-test/deep-links.md), and [incorporating Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview).
+You must make your app's existing APIs and data structures support the app when integrating with Teams. To extend the support, you must augment the APIs and data structures with contextual information about Teams for [identity mapping](../concepts/authentication/configure-identity-provider.md), [deep-link support](../concepts/build-and-test/deep-links.md), and [incorporating Microsoft Graph](/graph/teams-concept-overview).
Learn more about getting context for your Teams [tab](../tabs/how-to/access-teams-context.md) or [bot](../bots/how-to/get-teams-context.md).
Use a [bot](../bots/what-are-bots.md) in your Teams app for multi-threaded conve
Bots also allow you to send **proactive messages** to individual users or channels. The proactive messages are unprompted messages triggered by an outside event and not a message sent to a bot. For example, your bot sends a welcome message when it is installed or a new user joins a channel.
-Sending proactive messages requires Teams-specific identifiers. You can capture the information by [fetching roster or user profile data](../bots/how-to/get-teams-context.md#fetch-the-roster-or-user-profile), [subscribing to conversation events](../bots/how-to/conversations/subscribe-to-conversation-events.md), or using [Microsoft Graph](https://docs.microsoft.com/graph/teams-proactive-messaging).
+Sending proactive messages requires Teams-specific identifiers. You can capture the information by [fetching roster or user profile data](../bots/how-to/get-teams-context.md#fetch-the-roster-or-user-profile), [subscribing to conversation events](../bots/how-to/conversations/subscribe-to-conversation-events.md), or using [Microsoft Graph](/graph/teams-proactive-messaging).
Do not spam users with excessive messages. If the Teams capability supports it, the users can configure notification settings for your app. Following is an example of a notification message:
Following is an example of a notification message:
***Integration scenarios:** Standalone apps, collaboration apps, SharePoint pages*
-When a team is created, a [SharePoint site collection](https://docs.microsoft.com/microsoftteams/sharepoint-onedrive-interact) is also provisioned to support file and data storage for that team. Your app must leverage this feature if it interacts with files. Use the site collection to store raw data in SharePoint Lists and Excel.
+When a team is created, a [SharePoint site collection](/microsoftteams/sharepoint-onedrive-interact) is also provisioned to support file and data storage for that team. Your app must leverage this feature if it interacts with files. Use the site collection to store raw data in SharePoint Lists and Excel.
## See also
platform Teams Low Code Solutions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/teams-low-code-solutions.md
# Create low-code custom apps for Microsoft Teams
-Microsoft Teams is extensible and adaptive. This means that you can build custom applications for Teams that meet the distinct needs of your users. The low code custom apps save time, provide speedy solutions and meet the demand than the apps created from scratch. This document gives an overview of Microsoft Power Platform, Power Virtual Agents chatbot and Virtual Assistant.
+Microsoft Teams is extensible and adaptive. This means that you can build custom applications for Teams that meet the distinct needs of your users. The low code custom apps save time, provide speedy solutions and meet the demand than the apps created from scratch. This document gives an overview of Microsoft Power Platform, Power Virtual Agents chatbot, and Virtual Assistant.
-Low code platforms provide an intuitive approach to software development and require little or no coding to build applications and processes. They allow the developers without experience, to build custom apps easily with little or no coding, and professional developers to develop and deploy the app quickly. These platforms consist of a visual interface, connectors to backend services, and a built-in app lifecycle management system to build, debug, deploy and maintain applications. Microsoft Power Platform is the innovative gateway to rapidly build Teams compatible apps using low code attributes.
+Low code platforms provide an intuitive approach to software development and require little or no coding to build applications and processes. They allow the developers without experience, to build custom apps easily with little or no coding, and professional developers to develop and deploy the app quickly. These platforms consist of a visual interface, connectors to backend services, and a built-in app lifecycle management system to build, debug, deploy, and maintain applications. Microsoft Power Platform is the innovative gateway to rapidly build Teams compatible apps using low code attributes.
## Teams and Microsoft Power Platform
-Microsoft Power Platform combines four robust Microsoft technologies, such as Power BI, Power Apps, Power Automate, formerly Microsoft Flow and Power Virtual Agents in one powerful application platform. These technologies empower you to build solutions, automate processes, analyze data, and create virtual agents within a unified and integrated environment:
+Microsoft Power Platform combines four robust Microsoft technologies, such as Power BI, Power Apps, Power Automate, formerly Microsoft Flow, and Power Virtual Agents in one powerful application platform. These technologies empower you to build solutions, automate processes, analyze data, and create virtual agents within a unified and integrated environment:
:::image type="content" source="../assets/images/power-platform-and-teams/ms-power-platform.png" alt-text="Power platform services":::
platform Virtual Assistant https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/virtual-assistant.md
keywords: teams virtual assistant bots
# Create Virtual Assistant
-Virtual Assistant is a Microsoft open-source template that enables you to create a robust conversational solution while maintaining full control of user experience, organizational branding, and necessary data. The [Virtual Assistant core template](https://microsoft.github.io/botframework-solutions/overview/virtual-assistant-template) is the basic building block that brings together the Microsoft technologies required to build a Virtual Assistant, including the [Bot Framework SDK](https://github.com/microsoft/botframework-sdk), [Language Understanding (LUIS)](https://www.luis.ai/), [QnA Maker](https://www.qnamaker.ai/). It also brings together the essential capabilities including skills registration, linked accounts, basic conversational intent to offer a range of seamless interactions and experiences to users. In addition, the template capabilities include rich examples of reusable conversational [skills](https://microsoft.github.io/botframework-solutions/overview/skills). Individual skills are integrated in a Virtual Assistant solution to enable multiple scenarios. Using the Bot Framework SDK, skills are presented in source code form, enabling you to customize and extend as required. For more information on skills of Bot Framework, see [What is a Bot Framework skill](https://microsoft.github.io/botframework-solutions/overview/skills/). This document guides you on Virtual Assistant implementation considerations for organizations, how to create a Teams focused Virtual Assistant, related example, code sample and limitations of Virtual Assistant.
+Virtual Assistant is a Microsoft open-source template that enables you to create a robust conversational solution while maintaining full control of user experience, organizational branding, and necessary data. The [Virtual Assistant core template](https://microsoft.github.io/botframework-solutions/overview/virtual-assistant-template) is the basic building block that brings together the Microsoft technologies required to build a Virtual Assistant, including the [Bot Framework SDK](https://github.com/microsoft/botframework-sdk), [Language Understanding (LUIS)](https://www.luis.ai/), and [QnA Maker](https://www.qnamaker.ai/). It also brings together the essential capabilities including skills registration, linked accounts, basic conversational intent to offer a range of seamless interactions and experiences to users. In addition, the template capabilities include rich examples of reusable conversational [skills](https://microsoft.github.io/botframework-solutions/overview/skills). Individual skills are integrated in a Virtual Assistant solution to enable multiple scenarios. Using the Bot Framework SDK, skills are presented in source code form, enabling you to customize and extend as required. For more information on skills of Bot Framework, see [What is a Bot Framework skill](https://microsoft.github.io/botframework-solutions/overview/skills/). This document guides you on Virtual Assistant implementation considerations for organizations, how to create a Teams focused Virtual Assistant, related example, code sample, and limitations of Virtual Assistant.
The following image displays the overview of virtual assistant: ![Virtual Assistant overview diagram](../assets/images/bots/virtual-assistant/overview.png)
The decision to add a Virtual Assistant includes many determinants and differs f
* A central team manages all employee experiences. It has the capability to build a Virtual Assistant experience and manage updates to the core experience including the addition of new skills. * Multiple applications exist across business functions and the number is expected to grow in the future. * Existing applications are customizable, owned by the organization, and are converted into skills for a Virtual Assistant.
-* The central employee experiences team is able to influence customizations to existing apps. It also provides necessary guidance for integrating existing applications as skills in Virtual Assistant experience.
+* The central employee experiences team is able to influence customizations to existing apps. It also provides necessary guidance for integrating existing applications as skills in Virtual Assistant experience.
+ The following image displays the business functions of Virtual Assistant: ![Central team maintains the assistant, and business function teams contribute skills](../assets/images/bots/virtual-assistant/business-functions.png) ## Create a Teams-focused Virtual Assistant
-Microsoft has published a [Visual Studio template](https://marketplace.visualstudio.com/items?itemName=BotBuilder.VirtualAssistantTemplate) for building Virtual Assistants and skills. With the Visual Studio template, you can create a Virtual Assistant, powered by a text based experience with support for limited rich cards with actions. We have enhanced the Visual Studio base template to include Microsoft Teams platform capabilities and power great Teams app experiences. A few of the capabilities include support for rich Adaptive Cards, task modules, teams or group chats and messaging extensions. For more information on extending Virtual Assistant to Microsoft Teams, see [Tutorial: Extend Your Virtual Assistant to Microsoft Teams](https://microsoft.github.io/botframework-solutions/clients-and-channels/tutorials/enable-teams/1-intro/).
+Microsoft has published a [Visual Studio template](https://marketplace.visualstudio.com/items?itemName=BotBuilder.VirtualAssistantTemplate) for building Virtual Assistants and skills. With the Visual Studio template, you can create a Virtual Assistant, powered by a text based experience with support for limited rich cards with actions. We have enhanced the Visual Studio base template to include Microsoft Teams platform capabilities and power great Teams app experiences. A few of the capabilities include support for rich Adaptive Cards, task modules, teams or group chats, and messaging extensions. For more information on extending Virtual Assistant to Microsoft Teams, see [Tutorial: Extend Your Virtual Assistant to Microsoft Teams](https://microsoft.github.io/botframework-solutions/clients-and-channels/tutorials/enable-teams/1-intro/).
The following image displays the high level diagram of a Virtual Assistant solution: ![High-level diagram of a Virtual Assistant solution](../assets/images/bots/virtual-assistant/high-level-diagram.png)
A code snippet to extract `skillId` from card action data is shown in the follo
### Handle interruptions
-Virtual Assistant can handle interruptions in cases where a user tries to invoke a skill while another skill is currently active. `TeamsSkillDialog`, and `TeamsSwitchSkillDialog`are introduced based on Bot Framework's [SkillDialog](https://github.com/microsoft/botframework-solutions/blob/5b46d73e220bbb4fba86c48be532e495535ca78a/sdk/csharp/libraries/microsoft.bot.solutions/Skills/SkillDialog.cs) and [SwitchSkillDialog](https://github.com/microsoft/botframework-solutions/blob/6d40fa8ae05f96b0c5e0464e01361a9e1deb696c/sdk/csharp/libraries/microsoft.bot.solutions/Skills/Dialogs/SwitchSkillDialog.cs). They enable users to switch a skill experience from card actions. To handle this request, the Virtual Assistant prompts the user with a confirmation message to switch skills.
+Virtual Assistant can handle interruptions in cases where a user tries to invoke a skill while another skill is currently active. `TeamsSkillDialog`, and `TeamsSwitchSkillDialog`are introduced based on Bot Framework's [SkillDialog](https://github.com/microsoft/botframework-solutions/blob/5b46d73e220bbb4fba86c48be532e495535ca78a/sdk/csharp/libraries/microsoft.bot.solutions/Skills/SkillDialog.cs) and [SwitchSkillDialog](https://github.com/microsoft/botframework-solutions/blob/6d40fa8ae05f96b0c5e0464e01361a9e1deb696c/sdk/csharp/libraries/microsoft.bot.solutions/Skills/Dialogs/SwitchSkillDialog.cs). They enable users to switch a skill experience from card actions. To handle this request, the Virtual Assistant prompts the user with a confirmation message to switch skills:
![Confirmation prompt when switching to a new skill](../assets/images/bots/virtual-assistant/switch-skills-prompt.png)
The corresponding Virtual Assistant manifest file code snippet is shown in the f
.... ```
-Once the commands are invoked by a user, the Virtual Assistant can identify an associated skill by parsing the command ID, update the activity by removing the extra suffix `:<skill_id>` from the command ID, and forward it to the corresponding skill. The code for a skill doesnot need to handle the extra suffix. Thus, conflicts between command IDs across skills are avoided. With this approach, all the search and action commands of a skill within all contexts, such as **compose**, **commandBox** and **message** are powered by a Virtual Assistant.
+Once the commands are invoked by a user, the Virtual Assistant can identify an associated skill by parsing the command ID, update the activity by removing the extra suffix `:<skill_id>` from the command ID, and forward it to the corresponding skill. The code for a skill doesnot need to handle the extra suffix. Thus, conflicts between command IDs across skills are avoided. With this approach, all the search and action commands of a skill within all contexts, such as **compose**, **commandBox**, and **message** are powered by a Virtual Assistant.
```csharp const string MessagingExtensionCommandIdSeparator = ":";
Some messaging extension activities do not include the command ID. For example,
## Example The following example shows how to convert the Book-a-room app template to a Virtual Assistant skill:
-Book-a-room is a Microsoft Teams that allows users quickly to find and reserve a meeting room for 30, 60, or 90 minutes starting from the current time. The default time is 30 minutes. The Book-a-room bot scopes to personal o**r 1:1 conversations.
+Book-a-room is a Microsoft Teams that allows users quickly to find and reserve a meeting room for 30, 60, or 90 minutes starting from the current time. The default time is 30 minutes. The Book-a-room bot scopes to personal or 1:1 conversations.
The following image displays a Virtual Assistant with a **book a room** skill: ![Virtual Assistant with a "book a room" skill](../assets/images/bots/virtual-assistant/book-a-room-skill.png)
The allowed callers array can restrict which skill consumers can access the skil
"AllowedCallers": [ "*" ], ```
-For more information on adding claims validation to a skill, see [add claims validation to skill](https://docs.microsoft.com/azure/bot-service/skill-implement-skill?view=azure-bot-service-4.0&tabs=cs#claims-validator&preserve-view=true).
+For more information on adding claims validation to a skill, see [add claims validation to skill](/azure/bot-service/skill-implement-skill?view=azure-bot-service-4.0&tabs=cs#claims-validator&preserve-view=true).
### Limitation of card refresh
For more information refer [this](https://msteams-captain.visualstudio.com/xGrow
} ```
-You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-solutions/tree/master/skills/csharp) or create a new skill altogether from scratch. For creating a new skill, see [tutorials to create a new skill](https://microsoft.github.io/botframework-solutions/overview/skills/). For Virtual Assistant and skills architecture documentation, see[Virtual Assistant and skills architecture](https://docs.microsoft.com/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true).
+You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-solutions/tree/master/skills/csharp) or create a new skill altogether from scratch. For creating a new skill, see [tutorials to create a new skill](https://microsoft.github.io/botframework-solutions/overview/skills/). For Virtual Assistant and skills architecture documentation, see[Virtual Assistant and skills architecture](/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true).
## Limitations of Virtual Assistant
You can also leverage existing skills from [Bot Framework Solutions repository](
* Configuration of messaging extensions is not scoped to individual commands but for the entire extension itself. This limits configuration for each individual skill through Virtual Assistant. * Messaging extensions command IDs have a maximum length of [64 characters](../resources/schem#composeextensions) and 37 characters are used for embedding skill information. Thus, updated constraints for command ID are limited to 27 characters.
-You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-solutions/tree/master/skills/csharp) or create a new skill altogether from scratch. Tutorials for the later can be found [here](https://microsoft.github.io/botframework-solutions/overview/skills/). Please refer to [documentation](https://docs.microsoft.com/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true) for Virtual Assistant and skills architecture.
+You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-solutions/tree/master/skills/csharp) or create a new skill altogether from scratch. Tutorials for the later can be found [here](https://microsoft.github.io/botframework-solutions/overview/skills/). Please refer to [documentation](/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true) for Virtual Assistant and skills architecture.
## Code sample
platform Tabs Mobile https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs-mobile.md
Grids are useful for showing elements which are highly visual. It helps to inclu
### Tabs with bots on mobile
-The following example is a personal app that has tabs and a bot.
+The following example is a personal app that has tabs and a bot:
:::image type="content" source="../../assets/images/tabs/mobile-tab-with-bot.png" alt-text="Illustration showing how mobile Teams app that has tabs and a bot." border="false":::
Apps listed on the Teams store must be approved for mobile use to function prope
#### Apps on Teams store approved for mobile
-The following table describes tab availability and behavior when the app is listed on the Teams store and approved for mobile use.
+The following table describes tab availability and behavior when the app is listed on the Teams store and approved for mobile use:
|Capability |Mobile availability? |Mobile behavior| |-|--||
The following table describes tab availability and behavior when the app is list
#### Apps on Teams store not approved for mobile
-The following table describes tab availability and behavior when the app is listed on the Teams store but not approved for mobile use.
+The following table describes tab availability and behavior when the app is listed on the Teams store but not approved for mobile use:
-|Capability |Mobile availability?|Mobile behavior|
+| Capability | Mobile availability? | Mobile behavior |
|-|--||
-|Channel and group tab|Yes|Tab opens in the device's default browser instead of the Teams mobile client using your app's `websiteUrl` configuration (which also must be included in your source code's `setSettings()` [function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest#functions)). However, users can still view the tab in the Teams mobile client by selecting **More** next to the app and choosing **Open**, which triggers your appΓÇÖs `contentUrl` configuration.|
+|Channel and group tab|Yes|Tab opens in the device's default browser instead of the Teams mobile client using your app's `websiteUrl` configuration, which also must be included in your source code's `setSettings()` [function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest#functions&preserve-view=true). However, users can still view the tab in the Teams mobile client by selecting **More** next to the app and choosing **Open**, which triggers your appΓÇÖs `contentUrl` configuration.|
|Personal app|No|Not applicable| #### Apps not on Teams store
platform Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs.md
You can add a tab from the Teams store (AppSource) or in one of the following co
* Channel * Meeting (before, during, or after the meeting)
-The following example shows how a tab is added in a channel.
+The following example shows how a tab is added in a channel:
:::image type="content" source="../../assets/images/tabs/design-add-tab.png" alt-text="Example shows a tab being added in a channel." border="false":::
There's a short setup process to add an app as a channel, chat, or meeting tab.
|-|--| |1|**App logo**: Full color app logo of your app.| |2|**App name**: Full name of your app.|
-|3|**iframe**: Responsive space for your appΓÇÖs content (for example, tab settings or authentication).|
+|3|**iframe**: Responsive space for your appΓÇÖs content. For example, tab settings or authentication.|
|4|**About link**: Opens a dialog showing more information about the app, such as a full description, permissions required by the app, and links to your privacy policy and terms of service. |5|**Close button**: Closes the modal.| |6|**Notify team members option**: The modal asks if you want to create a post letting others know you added a tab.|
Notify users of tab activity one of the following ways:
## Best practices
-Use these recommendations to create a quality app experience.
+Use these recommendations to create a quality app experience:
### Collaboration
platform Access Teams Context https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/access-teams-context.md
keywords: teams tabs user context
# Get context for your Microsoft Teams tab
-Your tab might require contextual information to display relevant content.
+Your tab must require contextual information to display relevant content:
-* Your tab might need basic information about the user, team, or company.
-* Your tab might need locale and theme information.
-* Your tab might need to read the `entityId` or `subEntityId` that identifies what is in this tab.
+* Basic information about the user, team, or company.
+* Locale and theme information.
+* Read the `entityId` or `subEntityId` that identifies what is in this tab.
## User context
-Context about the user, team or company can be especially useful when
+Context about the user, team or company can be especially useful when:
-* You need to create or associate resources in your app with the specified user or team.
-* You want to initiate an authentication flow against Azure Active Directory or other identity provider, and you don't want to require the user to enter their username again. (For more information on authenticating within your Microsoft Teams tab, see [Authenticate a user in your Microsoft Teams tab](~/concepts/authentication/authentication.md).)
+* You create or associate resources in your app with the specified user or team.
+* You initiate an authentication flow against Azure Active Directory or other identity provider, and you don't want to require the user to enter their username again. For more information on authenticating within your Microsoft Teams tab, see [Authenticate a user in your Microsoft Teams tab](~/concepts/authentication/authentication.md).
> [!IMPORTANT] > Although this user information can help provide a smooth user experience, you should *not* use it as proof of identity. For example, an attacker could load your page in a "bad browser" and render harmful information or requests.
Context about the user, team or company can be especially useful when
You can access context information in two ways:
-* Insert URL placeholder values
-* Use the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client)
+* Insert URL placeholder values.
+* Use the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
### Getting context by inserting URL placeholder values
Use placeholders in your configuration or content URLs. Microsoft Teams replaces
* {theme}: The current UI theme such as `default`, `dark`, or `contrast`. * {groupId}: The ID of the Office 365 Group in which the tab resides. * {tid}: The Azure AD tenant ID of the current user.
-* {locale}: The current locale of the user formatted as languageId-countryId (for example, en-us).
+* {locale}: The current locale of the user formatted as languageId-countryId. For example, en-us.
>[!NOTE] >The previous `{upn}` placeholder is now deprecated. For backward compatibility, it is currently a synonym for `{loginHint}`.
-For example, suppose in your tab manifest you set the `configURL` attribute to
+For example, suppose in your tab manifest you set the `configURL` attribute to `"https://www.contoso.com/config?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}"`, the signed-in user has the following attributes:
-`"https://www.contoso.com/config?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}"`
+* Their username is 'user@example.com'.
+* Their company tenant ID is 'e2653c-etc'.
+* They are a member of the Office 365 group with id '00209384-etc'.
+* The user has set their Teams theme to 'dark'.
-And the signed-in user has the following attributes:
-
-* Their username is 'user@example.com'
-* Their company tenant ID is 'e2653c-etc'
-* They are a member of the Office 365 group with id '00209384-etc'
-* The user has set their Teams theme to 'dark'
-
-When they configure your tab, Teams calls this URL:
+When they configure your tab, Teams calls the following URL:
`https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=00209384-etc&theme=dark`
When they configure your tab, Teams calls this URL:
You can also retrieve the information listed above using the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client) by calling `microsoftTeams.getContext(function(context) { /* ... */ })`.
-The context variable will look like the following example.
+The context variable looks like the following example:
```json {
The context variable will look like the following example.
When your content page is loaded in a private channel, the data you receive from the `getContext` call will be 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 the values below, you'll need to check the `channelType` field to determine if your page is loaded in a private channel, and respond appropriately.
-* `groupId` - Undefined for private channels
-* `teamId` - Set to the threadId of the private channel
-* `teamName` - Set to the name of the private channel
-* `teamSiteUrl` - Set to the URL of a distinct, unique SharePoint site for the private channel
-* `teamSitePath` - Set to the path of a distinct, unique SharePoint site for the private channel
-* `teamSiteDomain` - Set to the domain of a distinct, unique SharePoint site domain for the private channel
+* `groupId`: Undefined for private channels
+* `teamId`: Set to the threadId of the private channel
+* `teamName`: Set to the name of the private channel
+* `teamSiteUrl`: Set to the URL of a distinct, unique SharePoint site for the private channel
+* `teamSitePath`: Set to the path of a distinct, unique SharePoint site for the private channel
+* `teamSiteDomain`: Set to the domain of a distinct, unique SharePoint site domain for the private channel
> [!Note] > teamSiteUrl works well for standard channels also.
platform Auth Flow Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-flow-tab.md
Although the tab context provides helpful information regarding the user, do not
## Code sample
-Sample code showing the tab authentication process.
+Sample code showing the tab authentication process:
| **Sample name** | **Description** | **C#** | **Node.js** | |--|--|-||
platform Configuration Page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/configuration-page.md
A configuration page is a special type of [content page](content-page.md). The users configure some aspects of the Microsoft Teams app using the configuration page and use that configuration as part of the following:
-* A channel or group chat tab - Collect information from the users and set the `contentUrl` of the content page to display.
-* A [messaging extension](~/messaging-extensions/what-are-messaging-extensions.md)
-* An [Office 365 Connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md)
+* A channel or group chat tab: Collect information from the users and set the `contentUrl` of the content page to display.
+* A [messaging extension](~/messaging-extensions/what-are-messaging-extensions.md).
+* An [Office 365 Connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md).
## Configuring a channel or group chat tab
platform Content Page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/content-page.md
A content page is a webpage that is rendered within the Teams client. Typically these are part of:
-* A personal-scoped custom tab - In this instance the content page is the first page the user encounters.
-* A channel/group custom tab - After the user pins and configures the tab in the appropriate context, the content page is displayed.
-* A [task module](~/task-modules-and-cards/what-are-task-modules.md) - You can create a content page and embed it as a webview inside a task module. The page will be rendered inside the modal popup.
+* A personal-scoped custom tab: In this instance the content page is the first page the user encounters.
+* A channel/group custom tab: After the user pins and configures the tab in the appropriate context, the content page is displayed.
+* A [task module](~/task-modules-and-cards/what-are-task-modules.md): You can create a content page and embed it as a webview inside a task module. The page will be rendered inside the modal popup.
This article is specific to using content pages as tabs; however the majority of the guidance here would apply regardless of how the content page is presented to the end-user.
The [Teams client JavaScript SDK](~/tabs/how-to/using-teams-client-sdk.md) provi
### Deep links
-You can create deep links to entities in Teams. Typically, these are used to create links that navigate to content and information within your tab. See [Create deep links to content and features in Microsoft Teams](~/concepts/build-and-test/deep-links.md).
+You can create deep links to entities in Teams. Typically, these are used to create links that navigate to content and information within your tab. For more information, see [Create deep links to content and features in Microsoft Teams](~/concepts/build-and-test/deep-links.md).
### Task Modules
If you create a bot with a *personal* scope, it will show up in the first tab po
## Show a native loading indicator
-Starting with [manifest schema v1.7](../../../resources/schem).
+Starting with [manifest schema v1.7](../../../resources/schem).
> [!NOTE]
-> 1. The behavior on mobile clients is not configurable through this manifest property. Mobile clients show a native loading 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.
-> 2. If you indicate `"showLoadingIndicator : true` in your app manifest, then all tab configuration, content, and removal pages and all iframe-based task modules must follow the mandatory protocol, below:
--
-1. To show the loading indicator, add `"showLoadingIndicator": true` to your manifest.
-2. Remember to call `microsoftTeams.initialize();`.
-3. **Optional**. If you're ready to print to the screen and wish to lazy load the rest of your application's content, you can manually hide the loading indicator by calling `microsoftTeams.appInitialization.notifyAppLoaded();`
-4. **Mandatory**. Finally, call `microsoftTeams.appInitialization.notifySuccess()` to notify Teams that your app has successfully loaded. Teams will then hide the loading indicator if applicable. If `notifySuccess` is not called within 30 seconds, it will be assumed that your app timed out and an error screen with a retry option will appear.
-5. If your application fails to load, you can call `microsoftTeams.appInitialization.notifyFailure(reason);` to let Teams know there was an error. An error screen will then be shown to the user:
-
-```typescript
-``
-/* List of failure reasons */
-export const enum FailedReason {
- AuthFailed = "AuthFailed",
- Timeout = "Timeout",
- Other = "Other"
-}
-```
->
+> * The behavior on mobile clients is not configurable through this manifest property. Mobile clients show a native loading 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, and removal pages and all iframe-based task modules must follow the mandatory protocol, below:
+
+**To show the loading indicator**
+
+* Add `"showLoadingIndicator": true` to your manifest.
+* Remember to call `microsoftTeams.initialize();`.
+* **Optional**: If you're ready to print to the screen and wish to lazy load the rest of your application's content, you can manually hide the loading indicator by calling `microsoftTeams.appInitialization.notifyAppLoaded();`
+* **Mandatory**: Finally, call `microsoftTeams.appInitialization.notifySuccess()` to notify Teams that your app has successfully loaded. Teams will then hide the loading indicator if applicable. If `notifySuccess` is not called within 30 seconds, it will be assumed that your app timed out and an error screen with a retry option will appear.
+* If your application fails to load, you can call `microsoftTeams.appInitialization.notifyFailure(reason);` to let Teams know there was an error. An error screen will then be shown to the user:
+
+ ```typescript
+ ``
+ /* List of failure reasons */
+ export const enum FailedReason {
+ AuthFailed = "AuthFailed",
+ Timeout = "Timeout",
+ Other = "Other"
+ }
+ ```
+ >
platform Removal Page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/removal-page.md
When a user selects **Remove** from the tab's drop-down menu, Teams will load th
Following the execution of the remove handler, `removeEvent.notifySuccess()` or `removeEvent.notifyFailure()` notifies Teams of the content removal outcome. >[!NOTE]
->To ensure that an authorized user's control over a tab is not inhibited, Teams will remove the tab in both success and failure cases.\
->Teams enables the **Remove** button after 5 seconds, even if your tab hasn't called `setValidityState()`.\
->When the user selects **Remove** Teams removes the tab after 30 seconds regardless of whether your actions have completed.
+> * To ensure that an authorized user's control over a tab is not inhibited, Teams will remove the tab in both success and failure cases.\
+> * Teams enables the **Remove** button after 5 seconds, even if your tab hasn't called `setValidityState()`.\
+> * When the user selects **Remove** Teams removes the tab after 30 seconds regardless of whether your actions have completed.
platform Tab Requirements https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/tab-requirements.md
Teams tabs must adhere to the following requirements:
* Set header: `Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com` * For Internet Explorer 11 compatibility, set `X-Content-Security-Policy` as well. * Alternatively, set header `X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/`. This header is deprecated but still respected by most browsers.
-* Typically, as a safeguard against click-jacking, login pages don't render in iFrames. Therefore, your authentication logic needs to use a method other than redirect (e.g., use token-based or cookie-based authentication).
+* Typically, as a safeguard against click-jacking, login pages don't render in iFrames. Therefore, your authentication logic needs to use a method other than redirect. For example, use token-based or cookie-based authentication.
> [!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).
+> 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. For more information, see [SameSite cookie attribute (2020 update)](../../resources/samesite-cookie-update.md).
* Browsers adhere to a same-origin policy restriction that prevents a webpage from making requests to a different domain than the one that served a web page. However, you may need to redirect the configuration or content page to a another domain or subdomain. Your cross-domain navigation logic should allow the Teams client to validate the origin against a static validDomains list in the app manifest when loading or communicating with the tab.
Teams tabs must adhere to the following requirements:
* For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.
-* If you choose to have your channel or group tab appear on Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property.
+* If you choose to have your channel or group tab appear on Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property.
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a custom personal tab using Node.js and the Yeoman Generator for Microsoft Teams](~/tabs/quickstarts/create-personal-tab-node-yeoman.md)
platform Using Teams Client Sdk https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/using-teams-client-sdk.md
For example, the SDK can make your [tab react to theme changes](../../build-your
Do one of the following depending on your development preferences: - * [Install the SDK with npm or Yarn](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) ## Common SDK functions -
-See the following tables to understand commonly used SDK functions. The [SDK reference documentation](/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true) provides more comprehensive information.
+See the following tables to understand commonly used SDK functions. The [SDK reference documentation](/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true) provides more comprehensive information:
### Basic functions | Function | Description | Documentation| | -- | -- | -- |
-| `microsoftTeams.initialize()` | Initializes the SDK. This function must be called before any other SDK calls.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initialize-any-&preserve-view=true)|
-|`microsoftTeams.getContext(callback: (context: Context)`| Gets the current state in which the page is running. The callback retrieves the **Context** object.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getcontext--context--context--void-&preserve-view=true)<br/>[context obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true)|
-| `microsoftTeams.initializeWithContext({contentUrl: string, websiteUrl: string})` | Initializes the Teams library and sets the tab's [frame context](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website/reload functionality operates on the correct URL.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initializewithframecontext-framecontext--void--string&preserve-view=true)|
-| `microsoftTeams.setFrameContext({contentUrl: string, websiteUrl: string})` | Sets the tab's [frame context](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website/reload functionality operates on the correct URL.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#setframecontext-framecontext-&preserve-view=true)|
-| `microsoftTeams.registerFullScreenHandler(handler: (isFullScreen: boolean)` |The handler that is registered when the user toggles a tab's full-screen/windowed view.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerfullscreenhandler--isfullscreen--boolean--void-&preserve-view=true)<br/>[boolean](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerFullScreenHandler__isFullScreen__boolean_____void_&preserve-view=true)|
-|`microsoftTeams.registerChangeSettingsHandler()` |The handler that is registered when the user selects the enabled **Settings** button to reconfigure a tab.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerchangesettingshandler-void-&preserve-view=true)|
-| `microsoftTeams.getTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters,)` |Gets the tabs owned by the app. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#gettabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.getMruTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters)`|Gets the most recently used tabs for the user. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getmrutabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)<br/>[tabInstance obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/tabinstanceparameters?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.shareDeepLink(deepLinkParameters: DeepLinkParameters)`|Takes the **DeepLinkParameters** object as input and shares a deep link dialog box that a user can use to navigate to content *within the tab*.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#sharedeeplink-deeplinkparameters-&preserve-view=true)<br/>[deepLink obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/deeplinkparameters?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.executeDeepLink(deepLink: string, onComplete?: (status: boolean, reason?: string))`|Takes a required **deepLink** as input and navigates user to a URL or triggers a client actionΓÇösuch as opening or installingΓÇöan app *within Teams*.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#executedeeplink-stringstatus--boolean--reasonstring--void-&preserve-view=true)|
-|`microsoftTeams.navigateToTab(tabInstance: TabInstance, onComplete?: (status: boolean, reason?: string))`|Takes the **TabInstance** object as input and navigates to a specified tab instance.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#navigatetotab-tabinstance-&preserve-view=true)<br/>[tabInstance obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/tabinstance?view=msteams-client-js-latest&preserve-view=true)|
+| `microsoftTeams.initialize()` | Initializes the SDK. This function must be called before any other SDK calls.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initialize-any-&preserve-view=true)|
+|`microsoftTeams.getContext(callback: (context: Context)`| Gets the current state in which the page is running. The callback retrieves the **Context** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getcontext--context--context--void-&preserve-view=true)<br/>[context obj](/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true)|
+| `microsoftTeams.initializeWithContext({contentUrl: string, websiteUrl: string})` | Initializes the Teams library and sets the tab's [frame context](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website or reload functionality operates on the correct URL.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initializewithframecontext-framecontext--void--string&preserve-view=true)|
+| `microsoftTeams.setFrameContext({contentUrl: string, websiteUrl: string})` | Sets the tab's [frame context](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website or reload functionality operates on the correct URL.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#setframecontext-framecontext-&preserve-view=true)|
+| `microsoftTeams.registerFullScreenHandler(handler: (isFullScreen: boolean)` |The handler that is registered when the user toggles a tab's full-screen or windowed view.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerfullscreenhandler--isfullscreen--boolean--void-&preserve-view=true)<br/>[boolean](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerFullScreenHandler__isFullScreen__boolean_____void_&preserve-view=true)|
+|`microsoftTeams.registerChangeSettingsHandler()` |The handler that is registered when the user selects the enabled **Settings** button to reconfigure a tab.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerchangesettingshandler-void-&preserve-view=true)|
+| `microsoftTeams.getTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters,)` |Gets the tabs owned by the app. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#gettabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.getMruTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters)`|Gets the most recently used tabs for the user. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getmrutabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/tabinstanceparameters?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.shareDeepLink(deepLinkParameters: DeepLinkParameters)`|Takes the **DeepLinkParameters** object as input and shares a deep link dialog box that a user can use to navigate to content *within the tab*.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#sharedeeplink-deeplinkparameters-&preserve-view=true)<br/>[deepLink obj](/javascript/api/@microsoft/teams-js/deeplinkparameters?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.executeDeepLink(deepLink: string, onComplete?: (status: boolean, reason?: string))`|Takes a required **deepLink** as input and navigates user to a URL or triggers a client actionΓÇösuch as opening or installingΓÇöan app *within Teams*.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#executedeeplink-stringstatus--boolean--reasonstring--void-&preserve-view=true)|
+|`microsoftTeams.navigateToTab(tabInstance: TabInstance, onComplete?: (status: boolean, reason?: string))`|Takes the **TabInstance** object as input and navigates to a specified tab instance.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#navigatetotab-tabinstance-&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/tabinstance?view=msteams-client-js-latest&preserve-view=true)|
### Authentication namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.authentication.authenticate(authenticateParameters?: AuthenticateParameters)`|Initiates an authentication request that opens a new window with the parameters provided by the caller. Optional input values are defined by the **AuthenticateParameters** object.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)<br/>[auth obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/authenticateparameters?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.authentication.notifySuccess(result?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request was successful and closes the authentication window|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.authentication.notifyFailure(reason?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request failed and closes the authentication window.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.authenticate(authenticateParameters?: AuthenticateParameters)`|Initiates an authentication request that opens a new window with the parameters provided by the caller. Optional input values are defined by the **AuthenticateParameters** object.|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)<br/>[auth obj](/javascript/api/@microsoft/teams-js/authenticateparameters?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.notifySuccess(result?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request was successful and closes the authentication window|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.notifyFailure(reason?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request failed and closes the authentication window.|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
### Settings namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.settings.setValidityState(validityState: boolean)`|The initial value is false. Activates the **Save** or **Remove** button when the validity state is true.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.getSettings(callback: (instanceSettings: Settings)`|Gets the settings for the current instance. The callback retrieves the **Settings** object.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/_settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.setSettings(instanceSettings: Settings, onComplete?: (status: boolean, reason?: string)`|Configures the settings for the current instance. Valid settings are defined by the **Settings** object.|[function](/https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest)<br/>[settings obj](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.registerOnSaveHandler(handler: (evt: SaveEvent)`|The handler that is registered when the user selects the **Save** button. This handler should be used to create or update the underlying resource powering the content.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.registerOnRemoveHandler(handler: (evt: RemoveEvent)`|The handler that is registered when the user selects the **Remove** button. This handler should be used to remove the underlying resource powering the content.|[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.setValidityState(validityState: boolean)`|The initial value is false. Activates the **Save** or **Remove** button when the validity state is true.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.getSettings(callback: (instanceSettings: Settings)`|Gets the settings for the current instance. The callback retrieves the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/_settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.setSettings(instanceSettings: Settings, onComplete?: (status: boolean, reason?: string)`|Configures the settings for the current instance. Valid settings are defined by the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.registerOnSaveHandler(handler: (evt: SaveEvent)`|The handler that is registered when the user selects the **Save** button. This handler should be used to create or update the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.registerOnRemoveHandler(handler: (evt: RemoveEvent)`|The handler that is registered when the user selects the **Remove** button. This handler should be used to remove the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
### Task modules namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.tasks.startTask(taskInfo: TaskInfo, submitHandler?: (err: string, result: string)`|Takes the **TaskInfo** object as input and allows an app to open the task module. The optional **submitHandler** is registered when the task module is completed. |[function](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/tasks?view=msteams-client-js-latest&preserve-view=true)<br/>[taskInfo obj](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/taskinfo?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.tasks.startTask(taskInfo: TaskInfo, submitHandler?: (err: string, result: string)`|Takes the **TaskInfo** object as input and allows an app to open the task module. The optional **submitHandler** is registered when the task module is completed. |[function](/javascript/api/@microsoft/teams-js/tasks?view=msteams-client-js-latest&preserve-view=true)<br/>[taskInfo obj](/javascript/api/@microsoft/teams-js/taskinfo?view=msteams-client-js-latest&preserve-view=true)|
|`microsoftTeams.tasks.submitTask(result?: string | object, appIds?: string | string[])`|Submits the task module. The optional **result** string parameter is the result sent to the bot or the app and is typically a JSON object or serialization; The optional **appIds** string or string array parameter aids in validating that the call originated from the same appId as the one that invoked the task module.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest#submittask-stringobject--stringstring&preserve-view=true)|
platform Create Channel Group Tab Dotnet Core Mvc https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-channel-group-tab-dotnet-core-mvc.md
The controllers use the ViewBag property to transfer values dynamically to the V
- Open a command prompt in the root of your project directory and run the following command:
-```bash
-ngrok http https://localhost:443560 -host-header="localhost:44360"
-```
+ ```bash
+ ngrok http https://localhost:443560 -host-header="localhost:44360"
+ ```
- Ngrok will listen to requests from the internet and will route 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 http https://localhost:443560 -host-header="localhost:44360"
Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button fires `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have satisfied the configuration requirements and the installation can proceed. On save, the parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has successfully resolved. -
platform Create Channel Group Tab Dotnet Core https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-channel-group-tab-dotnet-core.md
localization_priority: Normal
-# Create a Custom Channel and Group Tab with ASP.NET Core
+# Create a Custom Channel and Group Tab with ASP.NETCore
In this quickstart we'll walk-through creating a custom channel/group tab with C# and ASP.Net Core Razor page. We'll also use [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) to finalize your app manifest and deploy your tab to Teams.
In the Visual Studio Solution Explorer window right-click on the project and sel
- Open a command prompt in the root of your project directory and run the following command:
-```bash
-ngrok http https://localhost:44355 -host-header="localhost:44355"
-```
+ ```bash
+ ngrok http https://localhost:44355 -host-header="localhost:44355"
+ ```
- Ngrok will listen to requests from the internet and will route 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.
Within *Tab.cshtml* the application presents the user with two option buttons fo
[!INCLUDE [dotnet-update-app](~/includes/tabs/dotnet-update-chan-grp-app.md)]
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a Custom Channel and Group Tab with ASP.NETCore MVC](~/tabs/quickstarts/create-channel-group-tab-dotnet-core-mvc.md)
platform Create Channel Group Tab Node Yeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-channel-group-tab-node-yeoman.md
localization_priority: Normal
-# Create a custom channel and group tab with Node.js and the Yeoman Generator for Microsoft Teams
+# Create a custom channel and group tab using Node.js and the Yeoman Generator for Microsoft Teams
>[!NOTE] >This quickstart follows the steps outlined in the [Build Your First Microsoft Teams App](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App) Wiki found in the Microsoft OfficeDev GitHub repository.
gulp ngrok-serve
- Return to your team, choose the channel where you would like to display the tab, select Γ₧ò from the tab bar, and choose your tab from the gallery. - Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab. - Select **Save** and your tab will be added to the channel's tab bar.+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a Custom Channel and Group Tab with ASP.NETCore](~/tabs/quickstarts/create-channel-group-tab-dotnet-core.md)
platform Create Personal Tab Dotnet Core Mvc https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-personal-tab-dotnet-core-mvc.md
localization_priority: Normal
-# Create a Custom Personal Tab with ASP. NET Core MVC
+# Create a Custom Personal Tab with ASP.NET Core MVC
-In this quickstart we'll walk-through creating a custom personal tab with C# and ASP. Net Core MVC. We'll also use [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) to finalize your app manifest and deploy your tab to Teams.
+In this quickstart we'll walk-through creating a custom personal tab with C# and ASP.Net Core MVC. We'll also use [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) to finalize your app manifest and deploy your tab to Teams.
[!INCLUDE [dotnet-core-prereq](~/includes/tabs/dotnet-core-prereq.md)]
In the Visual Studio Solution Explorer window right-click on the project and sel
### Models
-*PersonalTab.cs* presents a Message object and methods that will be called from *PersonalTabController* when a user selects a button in the *PersonalTab* View.
+**PersonalTab.cs** presents a Message object and methods that will be called from *PersonalTabController* when a user selects a button in the **PersonalTab** View.
### Views #### Home
-ASP. NET Core treats files called *Index* as the default/home page for the site. When your browser URL points to the root of the site, *Index.cshtml* will be displayed as the home page for your application.
+ASP. NET Core treats files called **Index** as the default or home page for the site. When your browser URL points to the root of the site, **Index.cshtml** will be displayed as the home page for your application.
#### Shared
The controllers use the ViewBag property to transfer values dynamically to the V
* Open a command prompt in the root of your project directory and run the following command:
-``` bash
-ngrok http https://localhost:44345 -host-header="localhost:44345"
-```
+ ``` bash
+ ngrok http https://localhost:44345 -host-header="localhost:44345"
+ ```
* Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44325. It should resemble `https://y8rPrT2b.ngrok.io/` where *y8rPrT2b* is replaced by your ngrok alpha-numeric HTTPS URL. * Be sure to keep the command prompt with ngrok running, and to make a note of the URL ΓÇö you'll need it later.
-* Verify that *ngrok* is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.
+* Verify that **ngrok** is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.
-> [! TIP]
+> [!TIP]
> You need to have both your application in Visual Studio and ngrok running to complete this quickstart. If you need to stop running your application in Visual Studio to work on it, **keep ngrok running**. It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service it will return a new URL and you'll have to update every place that uses that URL. ### Run your application
ngrok http https://localhost:44345 -host-header="localhost:44345"
* In Visual Studio press **F5** or choose **Start Debugging** from your application's **Debug** menu. [!INCLUDE [dotnet-personal-use-appstudio](~/includes/tabs/dotnet-personal-use-appstudio.md)]+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a custom channel and group tab using Node.js and the Yeoman Generator for Microsoft Teams](~/tabs/quickstarts/create-channel-group-tab-node-yeoman.md)
platform Create Personal Tab Dotnet Core https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-personal-tab-dotnet-core.md
localization_priority: Normal
-# Create a personal tab with ASP.NET Core
+# Create a personal tab using ASP.NETCore
In this quickstart, we'll walk-through creating a custom personal tab with C# and ASP.Net Core Razor pages. We'll also use [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) to finalize your app manifest and deploy your tab to Teams.
To build and run your application press **F5** or choose **Start Debugging** fro
### 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 doesn't enable serving static content by default, so the static files middleware is added to the `Configure()` method:
+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 doesn't enable serving static content by default, so the static files middleware is added to the `Configure()` method:
```csharp public void ConfigureServices(IServiceCollection services)
In the Visual Studio Solution Explorer window, right-click on the project and se
- Open a command prompt in the root of your project directory and run the following command:
-```bash
-ngrok http https://localhost:44325 -host-header="localhost:44325"
-```
+ ```bash
+ ngrok http https://localhost:44325 -host-header="localhost:44325"
+ ```
- Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44325. It should resemble `https://y8rPrT2b.ngrok.io/` where *y8rPrT2b* is replaced by your ngrok alpha-numeric HTTPS URL. - Be sure to keep the command prompt with ngrok running, and to make a note of the URL ΓÇö you'll need it later. -- Verify that *ngrok* is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.
+- Verify that **ngrok** is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.
>[!TIP] >You need to have both your application in Visual Studio and ngrok running to complete this quickstart. If you need to stop running your application in Visual Studio to work on it, **keep ngrok running**. It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service it will return a new URL and you'll have to update every place that uses that URL.
ngrok http https://localhost:44325 -host-header="localhost:44325"
- In Visual Studio press **F5** or choose **Start Debugging** from your application's **Debug** menu. [!INCLUDE [dotnet-personal-use-appstudio](~/includes/tabs/dotnet-personal-use-appstudio.md)]+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a Custom Personal Tab with ASP.NETCore MVC](~/tabs/quickstarts/create-personal-tab-dotnet-core-mvc.md)
platform Create Personal Tab Node Yeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-personal-tab-node-yeoman.md
localization_priority: Normal
-# Quickstart: Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams
+# Create a custom personal tab using Node.js and the Yeoman Generator for Microsoft Teams
>[!NOTE] >This quickstart follows the steps outlined in the [Build Your First Microsoft Teams App](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App) Wiki found in the Microsoft OfficeDev GitHub repository.
In this quickstart we'll walk-through creating a custom personal tab using the [
[!INCLUDE [node-js-yeoman-prereq](~/includes/tabs/node-js-yeoman-prereq.md)]
-**Do you want to create a configurable or static tab?**
+**Create a configurable or static tab**
Use the arrow keys to select static tab.
To add a personal tab to this application you'll create a content page and updat
- In your code editor, create a new HTML file, **personal.html** and add the following markup:
-```html
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="UTF-8">
- <title>
- <!-- Todo: add your a title here -->
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- inject:css -->
- <!-- endinject -->
- </head>
- <body>
- <h1>Personal Tab</h1>
- <p><img src="/assets/icon.png"></p>
- <p>This is your personal tab!</p>
- </body>
-</html>
-```
+ ```html
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="UTF-8">
+ <title>
+ <!-- Todo: add your a title here -->
+ </title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <!-- inject:css -->
+ <!-- endinject -->
+ </head>
+ <body>
+ <h1>Personal Tab</h1>
+ <p><img src="/assets/icon.png"></p>
+ <p>This is your personal tab!</p>
+ </body>
+ </html>
+ ```
- Save **personal.html** in your application's **web** folder:
-```bash
-./src/app/web/<yourDefaultTabNameTab>/personal.html
-```
+ ```bash
+ ./src/app/web/<yourDefaultTabNameTab>/personal.html
+ ```
- Open **manifest.json** in your code editor:
-```bash
-./src/manifest/manifest.json/
-```
+ ```bash
+ ./src/manifest/manifest.json/
+ ```
Add the following to the empty `staticTabs` array (`staticTabs":[]`) and add the following JSON object:
Remember to update the **"contentURL"** path component **yourDefaultTabNameTab**
- Your content page must be served in an IFrame. Open **Tab.ts** in your code editor:
- ```bash
-./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
-```
+ ```bash
+ ./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
+ ```
- Add the following to the list of IFrame decorators:
-```typescript
- @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
-```
+ ```typescript
+ @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
+ ```
- Make sure to save the updated **Tab.ts** file. Your tab code is complete.
gulp ngrok-serve
``` > [!IMPORTANT]
-> After your tab has been uploaded to Microsoft teams, via *ngrok*, and successfully saved, you can view it in Teams until your tunnel session ends.
+> After your tab has been uploaded to Microsoft teams, via **ngrok**, and successfully saved, you can view it in Teams until your tunnel session ends.
## Upload your application to Teams - Open the Microsoft Teams client. If you use the [web based version](https://teams.microsoft.com) you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).-- In the *YourTeams* panel on the left, select the `...` menu next to the team that you're using to test your tab and choose **Manage team**.
+- In the **YourTeams** panel on the left, select the `...` menu next to the team that you're using to test your tab and choose **Manage team**.
- In the main panel select **Apps** from the tab bar and choose **Upload a custom app** located in the lower right-hand corner of the page. - Open your project directory, browse to the **./package** folder, select the zip folder, right-click, and choose **Open**. Your tab will upload into Teams. ## View your personal tabs In the navbar located at the far-left of the Teams client, select the `...` menu and choose your app from the list.+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a personal tab using ASP.NETCore](~/tabs/quickstarts/create-personal-tab-dotnet-core.md)
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/what-are-tabs.md
localization_priority: Normal
-# What are Microsoft Teams tabs?
+# Microsoft Teams tabs
-Tabs are Teams-aware webpages embedded in Microsoft Teams. They are simple HTML <iframe\> tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. *See* [Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
+Tabs are Teams-aware webpages embedded in Microsoft Teams. They are simple HTML <iframe\> tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. For more information, see [Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
There are two types of tabs available in Teams ΓÇö channel/group and personal. Channel/group tabs deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. Personal tabs, along with personally-scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left navigation bar for easy access.
-## Lesser known tab features
+## Tab features
> [!div class="checklist"] >
There are two types of tabs available in Teams ΓÇö channel/group and personal. C
**Scenario:** Provide access to items that your users interact with regularly for cooperative dialogue and collaboration. \ **Example:** You create a channel/group tab with deep linking to individual items.
-## How do tabs work?
+## Understand how tabs work
A custom tab is declared in the app manifest of your app package. For each webpage you want included as a tab in your app, you define a URL and a scope. Additionally, you need to add the [Teams JavaScript client SDK](/javascript/api/overview/msteams-client) to your page, and call `microsoftTeams.initialize()` after your page loads. Doing so will tell Teams to display your page, give you access to Teams-specific information (for example if the Teams client is running the *dark theme*), and allow you to take action based on the results.
Apps [distributed through the Teams store](~/concepts/deploy-and-publish/appsour
* [Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md) * [Integrate a QR or barcode scanner](../concepts/device-capabilities/qr-barcode-scanner-capability.md) * [Integrate location capabilities](../concepts/device-capabilities/location-capability.md)+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Tab requirements](~/tabs/how-to/tab-requirements.md)
platform Cards Actions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-actions.md
Cards used by bots and messaging extensions in Teams support the following activ
| Type | Action | | | | | `openUrl` | Opens a URL in the default browser. |
-| `messageBack` | Sends a message and payload to the bot (from the user who clicked the button or tapped the card) and sends a separate message to the chat stream. |
-| `imBack`| Sends a message to the bot (from the user who clicked the button or tapped the card). This message (from user to bot) is visible to all conversation participants. |
-| `invoke` | Sends a message and payload to the bot (from the user who clicked the button or tapped the card). This message is not visible. |
+| `messageBack` | Sends a message and payload to the bot from the user who clicked the button or tapped the card and sends a separate message to the chat stream. |
+| `imBack`| Sends a message to the bot from the user who clicked the button or tapped the card. This message (from user to bot) is visible to all conversation participants. |
+| `invoke` | Sends a message and payload to the bot from the user who clicked the button or tapped the card. This message is not visible. |
| `signin` | Initiates OAuth flow, allowing bots to connect with secure services. | > [!NOTE] >* Teams does not support `CardAction` types not listed in the preceding 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/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.
->* If you're using a card action as part of a messaging extension, the actions will be not work until the card is submitted to the channel (they will not work while the card is in the compose message box).
+>* If you are using a card action as part of a messaging extension, the actions do not work until the card is submitted to the channel. They do not work while the card is in the compose message box.
Teams also supports [Adaptive Cards actions](~/task-modules-and-cards/cards/cards-actions.md#adaptive-cards-actions), which are only used by Adaptive Cards. These actions are listed in their own section at the end of this reference.
Adaptive Cards support four action types:
* [Action.OpenUrl](http://adaptivecards.io/explorer/Action.OpenUrl.html) * [Action.Submit](http://adaptivecards.io/explorer/Action.Submit.html) * [Action.ShowCard](http://adaptivecards.io/explorer/Action.ShowCard.html)
-* [Action.Execute](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#actionexecute)
+* [Action.Execute](/adaptive-cards/authoring-cards/universal-action-model#actionexecute)
In addition to the actions mentioned above, you can modify the Adaptive Card `Action.Submit` payload to support existing Bot Framework actions using a `msteams` property in the `data` object of `Action.Submit`. The below sections detail how to use existing Bot Framework actions with Adaptive Cards.
To include a `signin` action with an Adaptive Card include the following details
| Property | Description | | | |
-| `type` | Set to `signin` |
-| `value` | Set to the URL that you want to redirect to |
+| `type` | Set to `signin`. |
+| `value` | Set to the URL that you want to redirect to. |
#### Example
platform Cards Format https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-format.md
Cards support formatting in the text property only, not in the title or subtitle
Formatting support differs between different card types, and rendering of the card can differ slightly between the desktop and the mobile Teams clients, as well as Teams in the desktop browser.
-You can include an inline image with any Teams card. Images an be formatted as `.png`, `.jpg`, or `.gif` files and must not exceed 1024 ×1024 px or 1 MB. Animated GIF is not officially supported. *See* [Cards reference](./cards-reference.md#inline-card-images)
+You can include an inline image with any Teams card. Images an be formatted as `.png`, `.jpg`, or `.gif` files and must not exceed 1024 ×1024 px or 1 MB. Animated GIF is not officially supported. For more information, see [Cards reference](./cards-reference.md#inline-card-images).
## Formatting cards with Markdown
To include a mention in an Adaptive Card your app needs to include the following
* `<at>username</at>` in the supported Adaptive card elements. * The `mention` object inside of an `msteams` property in the card content, which includes the Teams user id of the user being mentioned.
-* The `userId` is unique to your bot ID and a particular user. It can be used to @mention a particular user. The `userId` can be retrieved using one of the options mentioned in [get the user ID](https://docs.microsoft.com/microsoftteams/platform/bots/how-to/conversations/send-proactive-messages?tabs=dotnet#get-the-user-id-team-id-or-channel-id).
+* The `userId` is unique to your bot ID and a particular user. It can be used to @mention a particular user. The `userId` can be retrieved using one of the options mentioned in [get the user ID](/microsoftteams/platform/bots/how-to/conversations/send-proactive-messages?tabs=dotnet#get-the-user-id-team-id-or-channel-id).
#### Sample Adaptive card with a mention
platform Cards Reference https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-reference.md
The cards listed in this document are supported in bots for Microsoft Teams. The
You can find additional information on how to use cards in the documentation for the Bot Builder SDK v3. Code samples are also available in the Microsoft/BotBuilder-Samples repository on GitHub. * .NET
- * [Add cards as attachments to messages](/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=csharp#send-an-adaptive-card&preserve-view=true)
- * [Cards sample code Bot Builder v4](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/06.using-cards)
+ * [Add cards as attachments to messages](/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=csharp#send-an-adaptive-card&preserve-view=true).
+ * [Cards sample code Bot Builder v4](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/06.using-cards).
* Node.js
- * [Add cards as attachments to messages](/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=javascript#send-an-adaptive-card&preserve-view=true)
- * [Cards sample code Bot Builder v4](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/06.using-cards)
+ * [Add cards as attachments to messages](/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=javascript#send-an-adaptive-card&preserve-view=true).
+ * [Cards sample code Bot Builder v4](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/06.using-cards).
## Types of cards
For more information on text formatting in cards, see [card formatting](~/task-m
## Adaptive card
-An adaptive card is a customizable card that can contain any combination of text, speech, images, buttons, and input fields. See [adaptive cards v1.2.0](https://github.com/microsoft/AdaptiveCards/releases/tag/v1.2.0).
+An adaptive card is a customizable card that can contain any combination of text, speech, images, buttons, and input fields. For more information, see [adaptive cards v1.2.0](https://github.com/microsoft/AdaptiveCards/releases/tag/v1.2.0).
### Support for adaptive cards
platform Task Modules Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/task-modules/task-modules-bots.md
There are two ways of invoking task modules:
>[!IMPORTANT] >To ensure secure communications, each `url` and `fallbackUrl` must implement the HTTPS encryption protocol.
-## Invoking a task module via task/fetch
+## Invoking a task module through task/fetch
When the `value` object of the `invoke` card action or `Action.Submit` is initialized in the proper way (explained in more detail below), when a user presses the button an `invoke` message is sent to the bot. In the HTTP response to the `invoke` message, there's a [TaskInfo object](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object) embedded in a wrapper object, which Teams uses to display the task module.
When the `value` object of the `invoke` card action or `Action.Submit` is initia
Let's look at each step in a bit more detail: 1. This example shows a Bot Framework Hero card with a "Buy" `invoke` [card action](~/task-modules-and-cards/cards/cards-actions.md#invoke). The value of the `type` property is `task/fetch` - the rest of the `value` object can be whatever you like.
-2. The bot receives the `invoke` HTTP POST message.
-3. The bot creates a response object and returns it in the body of the POST response with an HTTP 200 response code. The schema for responses is described [below in the discussion on task/submit](#the-flexibility-of-tasksubmit), but the important thing to remember now is that the body of the HTTP response contains a [TaskInfo object](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object) embedded in a wrapper object, e.g.:
+1. The bot receives the `invoke` HTTP POST message.
+1. The bot creates a response object and returns it in the body of the POST response with an HTTP 200 response code. The schema for responses is described [below in the discussion on task/submit](#the-flexibility-of-tasksubmit), but the important thing to remember now is that the body of the HTTP response contains a [TaskInfo object](~/task-modules-and-cards/what-are-task-modules.md#the-taskinfo-object) embedded in a wrapper object. For example:
```json {
Let's look at each step in a bit more detail:
``` The `task/fetch` event and its response for bots is similar, conceptually, to the `microsoftTeams.tasks.startTask()` function in the client SDK.
-4. Microsoft Teams displays the task module.
+1. Microsoft Teams displays the task module.
## Submitting the result of a task module
private async onInvoke(event: builder.IEvent, cb: (err: Error, body: any, status
} ```
-*See also*, [Microsoft Teams task module sample code ΓÇö nodejs](https://github.com/OfficeDev/microsoft-teams-sample-task-module-nodejs/blob/master/src/TeamsBot.ts) and [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
- ## Example: Receiving and responding to task/fetch and task/submit invoke messages - C# In C# bots, `invoke` messages are processed by an `HttpResponseMessage()` controller processing an `Activity` message. The `task/fetch` and `task/submit` requests and responses are JSON. In C#, it's not as convenient to deal with raw JSON as it is in Node.js, so you need wrapper classes to handle the serialization to and from JSON. There's no direct support for this in the Microsoft Teams [C# SDK](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams) yet, but you can see an example of what these simple wrapper classes would look like in the [C# sample app](https://github.com/OfficeDev/microsoft-teams-sample-task-module-csharp/blob/master/Microsoft.Teams.Samples.TaskModule.Web/Models/TaskModel.cs).
The schema for Bot Framework card actions is slightly different from Adaptive ca
| Bot Framework card action | Adaptive card Action.Submit action | | | | | <pre>{<br/> "type": "invoke",<br/> "title": "Buy",<br/> "value": {<br/> "type": "task/fetch",<br/> &lt;...&gt;<br/> }<br/>}</pre> | <pre>{<br/> "type": "Action.Submit",<br/> "id": "btnBuy",<br/> "title": "Buy",<br/> "data": {<br/> &lt;...&gt;,<br/> "msteams": {<br/> "type": "task/fetch"<br/> }<br/> }<br/>}</pre> |+
+## See also
+
+* [Microsoft Teams task module sample code ΓÇö nodejs](https://github.com/OfficeDev/microsoft-teams-sample-task-module-nodejs/blob/master/src/TeamsBot.ts)
+* [Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md).
platform What Are Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/what-are-task-modules.md
localization_priority: Normal
-# What are task modules?
+# Task modules
Task modules allow you to create modal popup experiences in your Teams application. Inside the popup you can run your own custom HTML/JavaScript code, show an `<iframe>`-based widget such as a YouTube or Microsoft Stream video or display an [Adaptive card](/adaptive-cards/). They are especially useful for initiating and completing tasks or displaying rich information like videos or Power BI dashboards. A popup experience is often more natural for users initiating and completing tasks compared to a tab or a conversation-based bot experience.
Task modules build on the foundation of Microsoft Teams tabs; they are essential
Task modules can be invoked in three ways:
-* **Channel or personal tabs.** Using the Microsoft Teams Tabs SDK you can invoke task modules from buttons, links or menus on your tab. [This is covered in detail here.](~/task-modules-and-cards/task-modules/task-modules-tabs.md)
-* **Bots.** Buttons on [cards](~/task-modules-and-cards/cards/cards-reference.md) sent from your bot. This is particularly useful when you don't need everyone in a channel to see what you are doing with a bot. For example, when having users respond to a poll in a channel it's not terribly useful to see a record of that poll being created. [This is covered in detail here.](~/task-modules-and-cards/task-modules/task-modules-bots.md)
-* **Outside of Teams from a deep link.** You can also create URLs to invoke a task module from anywhere. [This is covered in detail here.](#task-module-deep-link-syntax)
+* **Channel or personal tabs**: Using the Microsoft Teams Tabs SDK you can invoke task modules from buttons, links or menus on your tab. [This is covered in detail here.](~/task-modules-and-cards/task-modules/task-modules-tabs.md)
+* **Bots**: Buttons on [cards](~/task-modules-and-cards/cards/cards-reference.md) sent from your bot. This is particularly useful when you don't need everyone in a channel to see what you are doing with a bot. For example, when having users respond to a poll in a channel it's not terribly useful to see a record of that poll being created. [This is covered in detail here.](~/task-modules-and-cards/task-modules/task-modules-bots.md)
+* **Outside of Teams from a deep link**: You can also create URLs to invoke a task module from anywhere. [This is covered in detail here.](#task-module-deep-link-syntax)
-## What a task module looks like
+## Task module looks like
Here's what a task module looks like when invoked from a bot (without the colored rectangles and numbered circles, of course):
Here's what a task module looks like when invoked from a bot (without the colore
Let's walk through it: 1. Your app's [`color` icon](~/resources/schem#icons).
-2. Your app's [`short` name](~/resources/schem#name).
-3. The task module's title specified in the `title` property of the [TaskInfo object](#the-taskinfo-object).
-4. The task module's close/cancel button. If the user presses this, your app will receive an `err` event as described [here](~/task-modules-and-cards/task-modules/task-modules-tabs.md#example-submitting-the-result-of-a-task-module). (**Note:** It is currently not possible to detect this event when a task module is invoked from a bot.)
-5. The blue rectangle is the where your web page appears if you are loading your own web page using the `url` property of the [TaskInfo object](#the-taskinfo-object). More detail is in the [task module sizing](#task-module-sizing) section below.
-6. If you are displaying an Adaptive card via the `card` property of the [TaskInfo object](#the-taskinfo-object) the padding is added for you, otherwise you'll need to [handle this yourself](#task-module-css-for-htmljavascript-task-modules).
-7. Adaptive card buttons will render here. If you're using your own page you must create your own buttons.
+1. Your app's [`short` name](~/resources/schem#name).
+1. The task module's title specified in the `title` property of the [TaskInfo object](#the-taskinfo-object).
+1. The task module's close/cancel button. If the user presses this, your app will receive an `err` event as described [here](~/task-modules-and-cards/task-modules/task-modules-tabs.md#example-submitting-the-result-of-a-task-module).
+ > [!Note]
+ > It is currently not possible to detect this event when a task module is invoked from a bot.
+1. The blue rectangle is the where your web page appears if you are loading your own web page using the `url` property of the [TaskInfo object](#the-taskinfo-object). More detail is in the [task module sizing](#task-module-sizing) section below.
+1. If you are displaying an Adaptive card via the `card` property of the [TaskInfo object](#the-taskinfo-object) the padding is added for you, otherwise you'll need to [handle this yourself](#task-module-css-for-htmljavascript-task-modules).
+1. Adaptive card buttons will render here. If you're using your own page you must create your own buttons.
## Overview of invoking and dismissing task modules
Task modules can be invoked from tabs, bots or deep links and what appears in on
| **Invoked via...** | **Task module is HTML/JavaScript** | **Task module is Adaptive card** | | | | |
-| **JavaScript in a tab** | 1. Use the Teams client SDK function `tasks.startTask()` with an optional `submitHandler(err, result)` callback function <br/><br/> 2. In the task module code, when the user is finished, call the Teams SDK function `tasks.submitTask()` with a `result` object as a parameter. If a `submitHandler` callback was specified in `tasks.startTask()`, Teams calls it with `result` as a parameter.<br/><br/> 3. If there was an error when invoking `tasks.startTask()`, the `submitHandler` function is called with an `err` string instead. <br/><br/> 4. You can also specify a `completionBotId` when calling `teams.startTask()` - in that case `result` is sent to the bot instead. | 1. Call the Teams client SDK function `tasks.startTask()` with a [TaskInfo object](#the-taskinfo-object) and `TaskInfo.card` containing the JSON for the Adaptive card to show in the task module popup. <br/><br/> 2. If a `submitHandler` callback was specified in `tasks.startTask()`, Teams calls it with an `err` string if there was an error when invoking `tasks.startTask()` or if the user closes the task module popup using the X at the upper right. <br/><br/> 3. If the user presses an Action.Submit button then its `data` object is returned as the value of `result`. |
-| **Bot card button** | 1. Bot card buttons, depending on the type of button, can invoke task modules in two ways: a deep link URL or by sending a `task/fetch` message. See below for how deep link URLs work. <br/><br/> 2. If the button's action `type` is `task/fetch` (`Action.Submit` button type for Adaptive cards), a `task/fetch invoke` event (an HTTP POST under the covers) is sent to the bot, and the bot responds to the POST with HTTP 200 and the response body containing a wrapper around the [TaskInfo object](#the-taskinfo-object). This is explained in detail in [invoking a task module via task/fetch](~/task-modules-and-cards/task-modules/task-modules-bots.md#invoking-a-task-module-via-taskfetch).<br/><br/> 3. Teams displays the task module; when the user is finished, call the Teams SDK function `tasks.submitTask()` with a `result` object as a parameter. <br/><br/> 4. The bot receives a `task/submit invoke` message that contains the `result` object. You have three different ways to respond to the `task/submit` message: by doing nothing (the task completed successfully), by displaying a message to the user in a popup window, or by invoking another task module window (i.e. creating a wizard-like experience). These three options are discussed more [in the detailed discussion on task/submit](~/task-modules-and-cards/task-modules/task-modules-bots.md#the-flexibility-of-tasksubmit). | 1. Like buttons on Bot Framework cards, buttons on Adaptive cards support two ways of invoking task modules: deep link URLs with `Action.openUrl` buttons, and via `task/fetch` using `Action.Submit` buttons. <br/><br/> 2. Task modules with Adaptive cards work very similarly to the HTML/JavaScript case (see left). The major difference is that since there's no JavaScript when you're using Adaptive cards, there's no way to call `tasks.submitTask()`. Instead, Teams takes the `data` object from `Action.Submit` and returns it as the payload of in the `task/submit` event, as described [here](~/task-modules-and-cards/task-modules/task-modules-bots.md#the-flexibility-of-tasksubmit). |
+| **JavaScript in a tab** | 1. Use the Teams client SDK function `tasks.startTask()` with an optional `submitHandler(err, result)` callback function. <br/><br/> 2. In the task module code, when the user is finished, call the Teams SDK function `tasks.submitTask()` with a `result` object as a parameter. If a `submitHandler` callback was specified in `tasks.startTask()`, Teams calls it with `result` as a parameter.<br/><br/> 3. If there was an error when invoking `tasks.startTask()`, the `submitHandler` function is called with an `err` string instead. <br/><br/> 4. You can also specify a `completionBotId` when calling `teams.startTask()` - in that case `result` is sent to the bot instead. | 1. Call the Teams client SDK function `tasks.startTask()` with a [TaskInfo object](#the-taskinfo-object) and `TaskInfo.card` containing the JSON for the Adaptive card to show in the task module popup. <br/><br/> 2. If a `submitHandler` callback was specified in `tasks.startTask()`, Teams calls it with an `err` string if there was an error when invoking `tasks.startTask()` or if the user closes the task module popup using the X at the upper right. <br/><br/> 3. If the user presses an Action.Submit button then its `data` object is returned as the value of `result`. |
+| **Bot card button** | 1. Bot card buttons, depending on the type of button, can invoke task modules in two ways: a deep link URL or by sending a `task/fetch` message. See below for how deep link URLs work. <br/><br/> 2. If the button's action `type` is `task/fetch` (`Action.Submit` button type for Adaptive cards), a `task/fetch invoke` event (an HTTP POST under the covers) is sent to the bot, and the bot responds to the POST with HTTP 200 and the response body containing a wrapper around the [TaskInfo object](#the-taskinfo-object). This is explained in detail in [invoking a task module via task/fetch](~/task-modules-and-cards/task-modules/task-modules-bots.md#invoking-a-task-module-through-taskfetch).<br/><br/> 3. Teams displays the task module; when the user is finished, call the Teams SDK function `tasks.submitTask()` with a `result` object as a parameter. <br/><br/> 4. The bot receives a `task/submit invoke` message that contains the `result` object. You have three different ways to respond to the `task/submit` message: by doing nothing (the task completed successfully), by displaying a message to the user in a popup window, or by invoking another task module window (i.e. creating a wizard-like experience). These three options are discussed more [in the detailed discussion on task/submit](~/task-modules-and-cards/task-modules/task-modules-bots.md#the-flexibility-of-tasksubmit). | 1. Like buttons on Bot Framework cards, buttons on Adaptive cards support two ways of invoking task modules: deep link URLs with `Action.openUrl` buttons, and via `task/fetch` using `Action.Submit` buttons. <br/><br/> 2. Task modules with Adaptive cards work very similarly to the HTML/JavaScript case (see left). The major difference is that since there's no JavaScript when you're using Adaptive cards, there's no way to call `tasks.submitTask()`. Instead, Teams takes the `data` object from `Action.Submit` and returns it as the payload of in the `task/submit` event, as described [here](~/task-modules-and-cards/task-modules/task-modules-bots.md#the-flexibility-of-tasksubmit). |
| **Deep link URL** <br/>[URL syntax](#task-module-deep-link-syntax) | 1. Teams invokes the task module; the URL that appears inside the `<iframe>` specified in the `url` parameter of the deep link. There is no `submitHandler` callback. <br/><br/> 2. Within the JavaScript of the page in the task module, call `tasks.submitTask()` to close it with a `result` object as a parameter, the same as when invoking it from a tab or a bot card button. Completion logic is slightly different, however. If your completion logic resides on the client (i.e. if there is no bot) there is no `submitHandler` callback, so any completion logic must be in the code preceding the call to `tasks.submitTask()`. Invocation errors are only reported via the console. If you have a bot, then you can specify a `completionBotId` parameter in the deep link to send the `result` object via a `task/submit` event. | 1. Teams invokes the task module; the JSON card body of the Adaptive card is specified as a URL-encoded value of the `card` parameter of the deep link. <br/><br/> 2. The user closes the task module by clicking on the X at the upper right of the task module or by pressing an `Action.Submit` button on the card. Since there is no `submitHandler` to call, you must have a bot to send the value of the Adaptive card fields to. You use the `completionBotId` parameter in the deep link to specify the bot to send the data to via a `task/submit invoke` event. | ## The TaskInfo object
-The `TaskInfo` object contains the metadata for a task module. The object definition is below. You **must** define either `url` (for an embedded iFrame) or `card` (for an Adaptive Card).
+The `TaskInfo` object contains the metadata for a task module. The object definition is below. You **must** define either `url` for an embedded iFrame or `card` for an Adaptive Card.
| Attribute | Type | Description | | | | |
-| `title` | string | Appears below the app name and to the right of the app icon |
+| `title` | string | Appears below the app name and to the right of the app icon. |
| `height` | number or string | This can be a number representing the task module's height in pixels, or `small`, `medium`, or `large`. [See below for how height and width are handled](#task-module-sizing). | | `width` | number or string | This can be a number representing the task module's width in pixels, or `small`, `medium`, or `large`. [See below for how height and width are handled](#task-module-sizing). | | `url` | string | The URL of the page loaded as an `<iframe>` inside the task module. The URL's domain must be in the app's [validDomains array](~/resources/schem#validdomains) in your app's manifest. |
Microsoft Teams will ensure that keyboard navigation works properly from the tas
|Task module sample (Bots-V4) | 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 + Bots-V3) | 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)|
+## See also
-
-> [!div class="nextstepaction"]
-> [Learn more: Request device permissions](../concepts/device-capabilities/native-device-permissions.md)
-
-> [!div class="nextstepaction"]
-> [Learn more: Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md)
-
-> [!div class="nextstepaction"]
-> [Learn more: Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)
-
-> [!div class="nextstepaction"]
-> [Learn more: Integrate location capabilities in Teams](../concepts/device-capabilities/location-capability.md)
+* [Request device permissions](../concepts/device-capabilities/native-device-permissions.md)
+* [Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md)
+* [Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)
+* [Integrate location capabilities in Teams](../concepts/device-capabilities/location-capability.md)
platform Visual Studio Code Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/toolkit/visual-studio-code-overview.md
The Microsoft Teams Toolkit for Visual Studio Code is available for download fro
## Set up a new Teams project
-1. Create a workspace/folder for your project in your local environment.
+1. Create a workspace or folder for your project in your local environment.
1. In Visual Studio Code, select the Teams icon ![Teams icon](../assets/icons/favicon-16x16.png) from the activity bar on the left side of the window. 1. Select **Open the Microsoft Teams Toolkit** from the command menu. 1. Select **Create a new Teams app** from the command menu.
The Microsoft Teams Toolkit for Visual Studio Code is available for download fro
At its core, the Teams app embraces three components: 1. The Microsoft Teams client (web, desktop or mobile) where users interact with your app.
- 1. A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
+ 1. A server that responds to requests for content that will be displayed in Teams. For example, HTML tab content or a bot adaptive card.
1. A Teams [app package](/concepts/build-and-test/apps-package.md) consisting of three files:
- > [!div class="checklist"]
- >
- > - The manifest.json
- > - A [color icon](../resources/schem#icons) for your app to display in the public or organization app catalog
- > - An [outline icon](../resources/schem#icons) for display on the Teams activity bar.
+ > [!div class="checklist"]
+ >
+ > - The manifest.json.
+ > - A [color icon](../resources/schem#icons) for your app to display in the public or organization app catalog.
+ > - An [outline icon](../resources/schem#icons) for display on the Teams activity bar.
When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located. 1. To configure your app, navigate to the **Microsoft Teams Toolkit** tab in Visual Studio Code. 1. Select **Edit app package** to view the **App details** page.
-1. Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. *See* [App Studio manifest editor](https://aka.ms/teams-toolkit-manifest)
+1. Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. For more information, See [App Studio manifest editor](https://aka.ms/teams-toolkit-manifest)
## Package your app
Modifying the **app details** page, **manifest**, or **.env** files in your app'
### Install and run your app locally
-Refer to the **Build and Run* content in your project homepage for detailed instructions on how to package and test your app. In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.
+Refer to the **Build and Run** content in your project homepage for detailed instructions on how to package and test your app. In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.
### Enable development from localhost
Prerequisites: [Enable Teams developer preview mode](https://aka.ms/teams-toolki
1. Select the **Run** icon to display the **Run and Debug** view. 1. You can also use the keyboard shortcut `Ctrl+Shift+D`.
+## Next step
+ > [!div class="nextstepaction"]
-> [Next step: Maintaining and supporting your published app](../concepts/deploy-and-publish/appsource/post-publish/overview.md)
+> [Maintaining and supporting your published app](../concepts/deploy-and-publish/appsource/post-publish/overview.md)
platform Visual Studio Code Tab Sso https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/toolkit/visual-studio-code-tab-sso.md
If you would like to learn more about how your Azure app registration will be pr
> [!TIP] > You may not see the app install dialogue in the browser if pop-up windows are disabled for your browser. If this happens, enable pop-up windows and refresh the page.
-> [!div class="nextstepaction"]
-> [Learn more: Build apps with the Microsoft Teams Toolkit and Visual Studio Code](visual-studio-code-overview.md)
+## See also
+
+- [Build apps with the Microsoft Teams Toolkit and Visual Studio Code](visual-studio-code-overview.md)
platform Visual Studio Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/toolkit/visual-studio-overview.md
The Microsoft Teams Toolkit enables you to create custom Teams apps directly wit
## Prerequisites
-1. [Enable developer preview](../resources/dev-preview/developer-preview-intro.md#enable-developer-preview)
+1. [Enable developer preview](../resources/dev-preview/developer-preview-intro.md#enable-developer-preview).
1. Make sure that the **<span>ASP.NE</span>T and web development module** has been added to your Visual Studio instance. You can check by following the steps in the [Modify Visual Studio by adding or removing workloads and component](/visualstudio/install/modify-visual-studio?view=vs-2019&preserve-view=true) documentation.
At its core, the Teams app embraces three components:
1. The Microsoft Teams client (web, desktop or mobile) where users interact with your app. 1. A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
- 1. A Teams [app package](/concepts/build-and-test/apps-package.md) consisting of three files:
+ 1. A Teams app package consists of three files:
- > [!div class="checklist"]
- >
- > - The manifest.json
- > - A [color icon](../resources/schem#icons) for your app to display in the public or organization app catalog
- > - An [outline icon](../resources/schem#icons) for display on the Teams activity bar.
+ > [!div class="checklist"]
+ >
+ > - The manifest.json
+ > - A [color icon](../resources/schem#icons) for your app to display in the public or organization app catalog
+ > - An [outline icon](../resources/schem#icons) for display on the Teams activity bar.
When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located. > [!NOTE] >If you haven't done so already, you will need to sign in to your Microsoft 365 or account to continue with the development process. >
-> If you don't have a Microsoft 365 account, you can sign up for a [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) subscription. It's *free* for 90 days and will continually renew as long as you're using it for development activity. If you have a Visual Studio *Enterprise* or *Professional* subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits), active for the life of your Visual Studio subscription. *See* [Set up a Microsoft 365 developer subscription](https://docs.microsoft.com/office/developer-program/office-365-developer-program-get-started).
+> If you don't have a Microsoft 365 account, you can sign up for a [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) subscription. It's *free* for 90 days and will continually renew as long as you're using it for development activity. If you have a Visual Studio *Enterprise* or *Professional* subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits), active for the life of your Visual Studio subscription. For more information, See [Set up a Microsoft 365 developer subscription](/office/developer-program/office-365-developer-program-get-started).
> ### Configuration steps
-1. To configure your app, on the **Microsoft Teams Toolkit** landing page, select **Edit app package** .
+1. To configure your app, on the **Microsoft Teams Toolkit** landing page, select **Edit app package**.
1. From the **My Environments** drop-down menu, select **development**. 1. You will land on the **App details** page where you can edit your app's property fields. 1. Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. [Learn more](https://aka.ms/teams-toolkit-manifest)
Modifying the **app details** page or updating the **manifest**, or **.env** fil
## Install and run your app locally
-1. From the **Solution Configurations** dropdown menu, select **Deploy**.
+1. From the **Solution Configurations** dropdown menu, select **Deploy** as shown in the following image:
-![Solution configurations menu](../assets/images/solution-configurations.png)
+ ![Solution configurations menu](../assets/images/solution-configurations.png)
2. Select the **IIS Express + Teams** button.
The **Validate** page allows you to check your app package before submitting you
Γ£ö 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.
+## Next step
+ > [!div class="nextstepaction"]
-> [Next step: Maintaining and supporting your published app](../concepts/deploy-and-publish/appsource/post-publish/overview.md)
+> [Maintaining and supporting your published app](../concepts/deploy-and-publish/appsource/post-publish/overview.md)
>
platform Get Started Dotnet App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-dotnet-app-studio.md
After the repo is cloned, use Visual Studio to open the solution file **Microsof
When the app starts, a browser window opens with the root of the app launched. You can go to the following URLs to verify that all the app URLs are loading: -- [https://localhost:44327/](https://localhost:44327/)-- [https://localhost:44327/hello](https://localhost:44327/hello)-- [https://localhost:44327/first](https://localhost:44327/first)-- [https://localhost:44327/second](https://localhost:44327/second)
+- `https://localhost:44327/`
+- `https://localhost:44327/hello`
+- `https://localhost:44327/first`
+- `https://localhost:44327/second`
<a name="HostSample"></a>
The app is only available during the current session on your computer. If the ma
Microsoft Azure hosts your .NET application on a free tier using shared infrastructure. This is sufficient to run the `Hello World` sample. For more information, see [creating a new free Azure account](https://azure.microsoft.com/free/).
-Visual Studio has built-in support for app deployment to different providers, including Azure.
+Visual Studio has built-in support for app deployment to different providers, including Azure:
<img width="530px" alt="Visual Studio" src="~/assets/images/get-started/publishtoazure1.png"/>
platform Get Started Nodejs App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-nodejs-app-studio.md
When the hello-world app starts, it displays `App started listening on port 3333
At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading: -- [http://localhost:3333](http://localhost:3333)-- [http://localhost:3333/hello](http://localhost:3333/hello)-- [http://localhost:3333/first](http://localhost:3333/first)-- [http://localhost:3333/second](http://localhost:3333/second)
+- `http://localhost:3333`
+- `http://localhost:3333/hello`
+- `http://localhost:3333/first`
+- `http://localhost:3333/second`
<a name="HostSample"></a>
Remember that apps in Microsoft Teams are web applications exposing one or more
For local testing you can run the app on your local machine and create a tunnel to it with a web endpoint. [ngrok](https://ngrok.com) is a free tool that lets you do just that. With *ngrok* you can get a web address such as `https://d0ac14a5.ngrok.io` (this URL is just an example). You can [download and install](https://ngrok.com/download) *ngrok* for your environment. Make sure you add it to a location in your `PATH`.
-Once you install it, you can open a new terminal window and run the following command to create a tunnel. The sample uses port 3333, so be sure to specify it here.
+Once you install it, you can open a new terminal window and run the following command to create a tunnel. The sample uses port 3333, so be sure to specify it here:
```bash ngrok http 3333 -host-header=localhost:3333
For either method you will need the following:
## Update your hosted app
-The sample app requires the following environment variables to be set to the values you made a note of earlier.
+The sample app requires the following environment variables to be set to the values you made a note of earlier:
``` MICROSOFT_APP_ID=<YOUR BOT'S APP ID>
NODE_CONFIG_DIR points to the directory at the root of the repository (by defaul
## Configure the app tab
-Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on `Save` you can see the `Hello World` tab loaded with the tab you chose.
+Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on `Save` you can see the `Hello World` tab loaded with the tab you chose:
<img width="430px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png"/> ### Test your bot in Teams
-You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`, followed by your message. This is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply.
+You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`, followed by your message. This is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply:
<img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png"/>
You can now interact with the bot in Teams. Choose a channel in the team where y
### Test your messaging extension
-To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the **'Hello World'** app in it. When you click it, you will see a number of random texts. You can choose any one of them and it will be inserted it into your conversation.
+To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the **'Hello World'** app in it. When you click it, you will see a number of random texts. You can choose any one of them and it will be inserted it into your conversation:
<img width="430px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu.png" /> <img width="430px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result.png" />
-Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.
+Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom:
<img width="430px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />
platform Get Started Yeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-yeoman.md
This section walks you through the steps for generating your project.
**To generate your project** 1. Open up a command prompt and create a new directory where you want to create your project, and in that directory run the command `yo teams`. The generator starts.
-1. Respond to the set of questions prompted by the generator.
+1. Respond to the set of questions prompted by the generator:
![yo teams](~/assets/yeoman-images/teams-first-app-1.png)
This section walks you through the steps for generating your project.
1. In the next question, type the title of your project. This title will be used in the manifest and description of your app. 1. Next, you will be asked for a company name, which also will be used in the manifest. 1. The fifth question asks you about what version of the manifest you want to use. For this tutorial select `v1.5`, which is the current general available schema.
- 1. Next, the generator will ask you for what items you want to add to your project. You can select a single one or any combination of items. For this tutorials, just select *a Tab*.
+ 1. Next, the generator will ask you for what items you want to add to your project. You can select a single one or any combination of items. For this tutorials, just select *a Tab*:
![item selection](~/assets/yeoman-images/teams-first-app-2.png)
To build your solution you use the `gulp build` command. This will transpile you
To run your app you use the `gulp serve` command. This will build and start a local web server for you to test your app. The command will also rebuild the application whenever you save a file in your project.
-You should now be able to browse to `http://localhost:3007/myFirstAppTab/` to ensure that your tab is rendering. However, not in Microsoft Teams yet.
+You should now be able to browse to `http://localhost:3007/myFirstAppTab/` to ensure that your tab is rendering. However, not in Microsoft Teams yet:
![view your site in a browser](~/assets/yeoman-images/teams-first-app-3.png)
Microsoft Teams does not allow you to have your app hosted on localhost, so you
Good news is that the scaffolded project has this built-in. When you run `gulp ngrok-serve` the ngrok service will be started in the background, with a unique and public DNS entry and it will also package the manifest with that unique URL and then do the exact same thing as `gulp serve`.
-After running `gulp ngrok-serve`, create a new Microsoft Teams team and when it is created click on the Team name, to go to the teams settings and then select *Apps*. In the lower right corner you should see a link *Upload a custom app*, select it and then browse to your project folder and the subfolder called `package`. Select the zip file in that folder and choose open. Your App is now sideloaded into Microsoft Teams.
+After running `gulp ngrok-serve`, create a new Microsoft Teams team and when it is created click on the Team name, to go to the teams settings and then select *Apps*. In the lower right corner you should see a link *Upload a custom app*, select it and then browse to your project folder and the subfolder called `package`. Select the zip file in that folder and choose open. Your App is now sideloaded into Microsoft Teams:
![sideloaded app](~/assets/yeoman-images/teams-first-app-4.png)
-Go back to the *General* channel and select *+* to add a new Tab. You should see your tab in the list of tabs.
+Go back to the *General* channel and select *+* to add a new Tab. You should see your tab in the list of tabs:
![configure tab](~/assets/yeoman-images/teams-first-app-5.png)
You can also upgrade your current Microsoft Teams version to the latest version
```PowerShell yo ```
-3. Use the arrow keys to choose **Update your Generators**.
+3. Use the arrow keys to choose **Update your Generators**:
![image of YoSelectUpdatGen](~/assets/images/Update-Teams/YoSelectUpdateGen.png)
-4. Select the generator you want from the list of generators.
+4. Select the generator you want from the list of generators:
> [!NOTE] > Use the space bar to select or clear a selected Teams version from the available options.
platform Add Incoming Webhook https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/add-incoming-webhook.md
Incoming webhooks are special type of Connector in Teams that provide a simple w
| Feature | Description | | - | -- |
-|Scoped Configuration|Incoming webhooks are scoped and configured at the channel level (e.g., outgoing webhooks are scoped and configured at the team level).|
+|Scoped Configuration|Incoming webhooks are scoped and configured at the channel level. For example, outgoing webhooks are scoped and configured at the team level.|
|Secure resource definitions|Messages are formatted as JSON payloads. This declarative messaging structure prevents the injection of malicious code as there is no code execution on the client.| |Actionable messaging support|If you choose to send messages via cards, you must use the **actionable message card** format. Actionable message cards are supported in all Office 365 groups including Teams. Here are links to the [Legacy actionable message card reference](/outlook/actionable-messages/message-card-reference) and the [Message card playground](https://messagecardplayground.azurewebsites.net).| |Independent HTTPS messaging support| Cards are a great way to present information in a clear and consistent way. Any tool or framework that can send HTTPS POST requests can send messages to Teams via an incoming webhook.|
Incoming webhooks are special type of Connector in Teams that provide a simple w
> [!Important] > If your team's **Settings** => **Member permissions** => **Allow members to create, update, and remove connectors** is selected, any team member can add, modify, or delete a connector.
+**To add an incoming webhook**
+ 1. Navigate to the channel where you want to add the webhook and select (&#8226;&#8226;&#8226;) *More Options* from the top navigation bar. 1. Choose **Connectors** from the drop-down menu and search for **Incoming Webhook**. 1. Select the **Configure** button, provide a name, and, optionally, upload an image avatar for your webhook.
Incoming webhooks are special type of Connector in Teams that provide a simple w
## Remove an incoming webhook from a Teams channel
+**To remove an incoming webhook**
+ 1. Navigate to the channel where the webhook was added and select (&#8226;&#8226;&#8226;) *More Options* from the top navigation bar. 1. Choose **Connectors** from the drop-down menu. 1. On the left, under **Manage**, choose **Configured**.
You have three options for distributing your incoming webhook:
* Add a configuration page and wrap your incoming webhook in a [O365 Connector](~/webhooks-and-connectors/how-to/connectors-creating.md) * Package and publish your Connector as part of your [AppSource](~/concepts/deploy-and-publish/office-store-guidance.md) submission.
-## Learn more
+## See also
-* [Sending messages to Connectors and Webhooks](~/webhooks-and-connectors/how-to/connectors-using.md)
+[Sending messages to Connectors and Webhooks](~/webhooks-and-connectors/how-to/connectors-using.md)
platform Add Outgoing Webhook https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/add-outgoing-webhook.md
keywords: teams tabs outgoing webhook actionable message verify webhook
# Add custom bots to Teams with outgoing webhooks
-## What are outgoing webhooks in Teams?
+## Outgoing webhooks in Teams
Webhooks are an eminent way for Teams to integrate with external apps. A webhook is essentially a POST request sent to a callback URL. Outgoing webhooks allow users to send messages to your web service without going through the full process of creating bots via the [Microsoft Bot Framework](https://dev.botframework.com/).
Responses from your outgoing webhooks appear in the same reply chain as the orig
1. From the window's lower right corner select **Create an outgoing webhook**. 1. In the resulting popup window complete the required fields:
->* **Name** - The webhook title and @mention tap.
->* **Callback URL** - The HTTPS endpoint that accepts JSON payloads and receives POST requests from Teams.
->* **Description** - A detailed string that appear in the profile card and the team-level App dashboard.
->* **Profile Picture** an optional app icon for your webhook.
+>* **Name**: The webhook title and @mention tap
+>* **Callback URL**: The HTTPS endpoint that accepts JSON payloads and receives POST requests from Teams
+>* **Description**: A detailed string that appear in the profile card and the team-level App dashboard
+>* **Profile Picture**: An optional app icon for your webhook
>* Select the **Create** button from the lower right corner of the pop-up window and the outgoing webhook are added to the current team's channels. >* The next dialog window displays an [Hash-based Message Authentication Code (HMAC)](https://security.stackexchange.com/questions/20129/how-and-when-do-i-use-hmac/20301) security token that is used to authenticate calls between Teams and the designated outside service. >* The outgoing webhook is available to the team's users, only if the URL is valid and the server and client authentication tokens are equal for example, an HMAC handshake.
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
Here's a sample HTML to create a Connector configuration page without the CSS:
|-|| | `entityId` | The entity ID, as set by your code when calling `setSettings()`. | | `configName` | The configuration name, as set by your code when calling `setSettings()`. |
-| `contentUrl` | The URL of the configuration page, as set by your code when calling `setSettings()` |
+| `contentUrl` | The URL of the configuration page, as set by your code when calling `setSettings()`. |
| `webhookUrl` | The webhook URL created for this connector. Persist the webhook URL and use it to POST structured JSON to send cards to the channel. The `webhookUrl` is returned only when application returns successfully. | | `appType` | The values returned can be `mail`, `groups` or `teams` corresponding to the Office 365 Mail, Office 365 Groups or Microsoft Teams respectively. | | `userObjectId` | This is the unique id corresponding to the Office 365 user who initiated setup of the connector. It should be secured. This value can be used to associate the user in Office 365 who set up the configuration to the user in your service. |
platform Connectors Using https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-using.md
You can also use this JSON to create cards containing rich inputs, such as text
} ```
-This message produces the following card in the channel.
+This message produces the following card in the channel:
![Screenshot of a Connector card](~/assets/images/connectors/connector_message.png)
For more information on Connector card actions, see **[Actions]**(/outlook/actio
## Setting up a custom incoming webhook
-Follow these steps to see how to send a simple card to a Connector.
+Follow these steps to see how to send a simple card to a Connector:
1. In Microsoft Teams, choose **More options** (**&#8943;**) next to the channel name and then choose **Connectors**.
-2. Scroll through the list of Connectors to **Incoming Webhook**, and choose **Add**.
-3. Enter a name for the webhook, upload an image to associate with data from the webhook, and choose **Create**.
-4. Copy the webhook to the clipboard and save it. You'll need the webhook URL for sending information to Microsoft Teams.
-5. Choose **Done**.
+1. Scroll through the list of Connectors to **Incoming Webhook**, and choose **Add**.
+1. Enter a name for the webhook, upload an image to associate with data from the webhook, and choose **Create**.
+1. Copy the webhook to the clipboard and save it. You'll need the webhook URL for sending information to Microsoft Teams.
+1. Choose **Done**.
### Post a message to the webhook using cURL
The following steps use [cURL](https://curl.haxx.se/). We assume that you have t
curl.exe -H "Content-Type:application/json" -d "{'text':'Hello World'}" <YOUR WEBHOOK URL> ```
-2. If the POST succeeds, you should see a simple **1** output by `curl`.
-3. Check the Microsoft Team client. You should see the new card posted to the team.
+1. If the POST succeeds, you should see a simple **1** output by `curl`.
+1. Check the Microsoft Team client. You should see the new card posted to the team.
### Post a message to the webhook using PowerShell
The following steps use PowerShell. We assume that you have this installed and a
Invoke-RestMethod -Method post -ContentType 'Application/Json' -Body '{"text":"Hello World!"}' -Uri <YOUR WEBHOOK URL> ```
-2. If the POST succeeds, you should see a simple **1** output by `Invoke-RestMethod`.
-3. Check the Microsoft Teams channel associated with the webhook URL. You should see the new card posted to the channel.
+1. If the POST succeeds, you should see a simple **1** output by `Invoke-RestMethod`.
+1. Check the Microsoft Teams channel associated with the webhook URL. You should see the new card posted to the channel.
- [Include two icons](../../concepts/build-and-test/apps-package.md#app-icons). - Modify the `icons` portion of the manifest to refer to the file names of the icons instead of URLs.
-The following manifest.json file contains the basic elements needed to test and submit your app.
+The following manifest.json file contains the basic elements needed to test and submit your app:
> [!NOTE] > Replace `id` and `connectorId` in the following example with the GUID of your Connector.
The following manifest.json file contains the basic elements needed to test and
### The flow for sending [adaptive cards](../../task-modules-and-cards/cards/cards-reference.md#adaptive-card) via an incoming webhook is as follows:
-**1.** [Setup a custom webhook](#setting-up-a-custom-incoming-webhook) in Teams.</br></br>
-**2.** Create your adaptive card JSON file:
+1. [Setup a custom webhook](#setting-up-a-custom-incoming-webhook) in Teams.</br></br>
+1. Create your adaptive card JSON file:
-```json
-{
- "type":"message",
- "attachments":[
- {
- "contentType":"application/vnd.microsoft.card.adaptive",
- "contentUrl":null,
- "content":{
- "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
- "type":"AdaptiveCard",
- "version":"1.2",
- "body":[
- {
- "type": "TextBlock",
- "text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)"
- }
- ]
- }
- }
- ]
-}
-```
+ ```json
+ {
+ "type":"message",
+ "attachments":[
+ {
+ "contentType":"application/vnd.microsoft.card.adaptive",
+ "contentUrl":null,
+ "content":{
+ "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
+ "type":"AdaptiveCard",
+ "version":"1.2",
+ "body":[
+ {
+ "type": "TextBlock",
+ "text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ```
-> [!div class="checklist"]
->
-> - The `"type"` field must be `"message"`.
-> - The `"attachments"` array contains a set of card objects.
-> - The `"contentType"` field must be set to adaptive card type.
-> - The `"content"` object is the card formatted in JSON.
+ > [!div class="checklist"]
+ >
+ > - The `"type"` field must be `"message"`.
+ > - The `"attachments"` array contains a set of card objects.
+ > - The `"contentType"` field must be set to adaptive card type.
+ > - The `"content"` object is the card formatted in JSON.
-**3.** Test your adaptive card with Postman
+1. Test your adaptive card with Postman.
You can test your adaptive card using [Postman](https://www.postman.com) to send a POST request to the URL that you created when you setup your incoming webhook. Paste your JSON file in the body of the request and view your adaptive card message in Teams.
You can test your adaptive card using [Postman](https://www.postman.com) to send
## Testing your connector
-To test your Connector, upload it to a team as you would with any other app. You can create a .zip package using the manifest file from the Connectors Developer Dashboard (modified as directed in the preceding section) and the two icon files.
+To test your Connector, upload it to a team as you would with any other app. You can create a .zip package using the manifest file from the Connectors Developer Dashboard which was modified as directed in the preceding section and the two icon files.
-After you upload the app, open the Connectors list from any channel. Scroll to the bottom to see your app in the **Uploaded** section.
+After you upload the app, open the Connectors list from any channel. Scroll to the bottom to see your app in the **Uploaded** section:
![Screenshot of uploaded section in Connector dialog box](~/assets/images/connectors/connector_dialog_uploaded.png)
Application rate limits control the traffic that a connector or an incoming webh
| 7200 | 150 | | 86400 | 1800 |
-*See also* [Office 365 Connectors ΓÇö Microsoft Teams](https://docs.microsoft.com/connectors/teams/)
- A [retry logic with exponential back-off](/azure/architecture/patterns/retry) like below would mitigate rate limiting for cases where requests are exceeding the limits within a second. Refer [HTTP 429 responses](../../bots/how-to/rate-limit.md#handle-http-429-responses) to avoid hitting the rate limits. ```csharp
try
``` These limits are in place to reduce spamming a channel by a connector and ensures an optimal experience to your end users.+
+## See also
+
+[Office 365 Connectors ΓÇö Microsoft Teams](/connectors/teams/)
platform What Are Webhooks And Connectors https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/what-are-webhooks-and-connectors.md
Outgoing webhooks allow your users to send text messages from a channel to your
Outgoing webhooks are configured on a per-team basis, cannot be included as part of a normal Teams app. They are best suited for completing team-specific workloads that don't require large amounts of information to be collected or exchanged.
-See [Create an outgoing webhook](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md).
+For more information, see [Create an outgoing webhook](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md).
## Connectors
Connectors allow users to subscribe to receive notifications and messages from y
Incoming webhooks are the simplest type of connector. For any channel in team (if they are enabled for that team) you can choose to expose an HTTPS endpoint that will accept correctly formatted JSON and insert messages into that channel. They are a quick and easy way to connect a channel to your service, and are best used for scenarios that are unique to a particular team. For example, you could create an incoming webhook in your DevOps channel and configure your build, deployment and monitoring services to send alerts.
-See [Create an incoming webhook](~/webhooks-and-connectors/how-to/add-incoming-webhook.md).
+For more information, see [Create an incoming webhook](~/webhooks-and-connectors/how-to/add-incoming-webhook.md).
### Office 365 Connectors Office 365 Connectors allow you to create a custom configuration page for your incoming webhook, and package them as part of a Teams app. You can then distribute that app more broadly, or even to our app store. You send messages primarily using Office 365 Connector cards, and have the ability to add a limited set of card actions to them as well. A good example of this is a weather connector that allows users to choose a location and time of day to receive updates about tomorrow's weather. They are configured on a channel level, but are installed at a team level.
-See [Create an Office 365 Connector](~/webhooks-and-connectors/how-to/connectors-creating.md).
+For more information, see [Create an Office 365 Connector](~/webhooks-and-connectors/how-to/connectors-creating.md).
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
Microsoft Teams platform features that are available to all app developers.
|03/18/2021|Notice: Update to version 4.10 or above of the Bot Framework SDK, as we've started with the deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync`. | [Bot API Changes for Team/Chat Members](resources/team-chat-member-api-changes.md) | |03/05/2021|Notice: Tabs will no longer have margins surrounding their experiences. Tab developers should review and update their apps. | [Removing tab margins](resources/removing-tab-margins.md) | |03/05/2021|Default install scope and group capability is in developer preview.| [Default install scope and group capability](concepts/deploy-and-publish/add-default-install-scope.md) |
-|03/05/2021|Reorder personal app tabs|[Reorder the chat tab in personal apps](tabs/how-to/create-tab-pages/content-page.md#reorder-static-personal-tabs)|
+|03/05/2021|Reorder personal app tabs.|[Reorder the chat tab in personal apps](tabs/how-to/create-tab-pages/content-page.md#reorder-static-personal-tabs)|
|03/04/2021|Information masking in Adaptive cards.| [Information masking in Adaptive cards](task-modules-and-cards/cards/cards-format.md#information-masking-in-adaptive-cards) |
-|02/19/2021|Added location capabilities. <br/> Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities and QR or barcode scanner capability files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md), [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
-|02/18/2021|Added QR or barcode scanner capability. <br/> QR or barcode scanner capability information is added in the device capabilities overview, native device permissions and integrate media capabilities files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) |
+|02/19/2021|Added location capabilities. <br/> Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities, and QR or barcode scanner capability files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md), [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
+|02/18/2021|Added QR or barcode scanner capability. <br/> QR or barcode scanner capability information is added in the device capabilities overview, native device permissions, and integrate media capabilities files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) |
|02/09/2021|Added device capabilities overview. <br/> Microphone capability information is added in the native device permissions and integrate media capabilities files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md)| <br>
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Notes** | **Changed topics** | | -- | | |
-|11/30/2020|Identity platform integration with Teams Toolkit and Visual Studio Code for tabs|[Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs](toolkit/visual-studio-code-tab-sso.md)|
-|11/16/2020|Teams app manifest updated to version 1.8|[Reference: Manifest schema for Microsoft Teams](resources/schem)|
-|11/10/2020|Teams bot design guidelines|[Bot design guidelines](bots/design/bots.md)|
+|11/30/2020|Identity platform integration with Teams Toolkit and Visual Studio Code for tabs.|[Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs](toolkit/visual-studio-code-tab-sso.md)|
+|11/16/2020|Teams app manifest updated to version 1.8.|[Reference: Manifest schema for Microsoft Teams](resources/schem)|
+|11/10/2020|Teams bot design guidelines.|[Bot design guidelines](bots/design/bots.md)|
|09/30/2020|Sending and receiving files to bots on mobile devices is now supported.|[Send and receive files through your bot](resources/bot-v3/bots-files.md)| |09/22/2020|New information for getting started with Teams development.|[Build your first Teams app overview](build-your-first-app/build-first-app-overview.md)| |09/18/2020|Support for in-meeting Teams apps (Release Preview).|[Create apps for Teams meetings](apps-in-teams-meetings/create-apps-for-teams-meetings.md) and [Apps in Teams meetings](apps-in-teams-meetings/teams-apps-in-meetings.md)|
Microsoft Teams platform features that are available to all app developers.
|07/14/2020|Surfacing a native loading indicator documentation.|[Showing a native loading indicator](tabs/how-to/create-tab-pages/content-page.md#show-a-native-loading-indicator) |07/01/2020|Get started building Teams apps with the Visual Studio Code Toolkit.|[Build apps with the Microsoft Teams Toolkit and Visual Studio Code](toolkit/visual-studio-code-overview.md) | |07/01/2020|Single sign-on for tabs GA for Teams web and desktop clients.|[Single Sign-On (SSO)](tabs/how-to/authentication/auth-aad-sso.md)|
-|06/05/2020| Manifest Schema updated to version 1.7.| [Reference: Manifest schema for Microsoft Teams](resources/schem)|
+|06/05/2020| Manifest schema updated to version 1.7.| [Reference: Manifest schema for Microsoft Teams](resources/schem)|
|05/18/2020|Integrate Power Virtual Agents with Teams.|[Integrate a Power Virtual Agents chatbot with Microsoft Teams](bots/how-to/add-power-virtual-agents-bot-to-teams.md)| |04/01/2020|Integrate WFM systems with Shifts Connector for Teams.|[Microsoft Teams Shifts WFM connectors](samples/shifts-wfm-connectors.md) | 03/24/2020 | Added support for retrieving a single member of a conversation, and additional support for retrieving paged members. | [Get Teams context for your bot](~/bots/how-to/get-teams-context.md) |
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Notes** | **Changed topics** | | -- | | |
-| 12/26/2019 | The `replyToId` parameter in payloads sent to a bot is no longer encrypted, allowing you to use this value to construct deeplinks to these messages. Message payloads include the encrypted values in the parameter. `legacy.replyToId`. |
+| 12/26/2019 | The `replyToId` parameter in payloads sent to a bot is no longer encrypted, allowing you to use this value to construct deeplinks to these messages. Message payloads include the encrypted values in the parameter `legacy.replyToId`. |
| 11/05/2019 | Single sign-on using the Teams JavaScript SDK. | [Single sign-on](tabs/how-to/authentication/auth-aad-sso.md) | | 10/31/2019 | Conversational bots and messaging extension documentation updated to reflect the 4.6 Bot Framework SDK. Documentation for the v3 SDK is available in the Resources section. | All bot and messaging extension documentation. | | 10/31/2019 | New documentation structure, and major article refactoring. Please report any dead links or 404's by creating a GitHub Issue. | All of them! |
Microsoft Teams platform features that are available to all app developers.
| 11/09/2018 | You can now create deep links to private chats between users. | [Deep linking to a chat](concepts/build-and-test/deep-links.md#deep-linking-to-a-chat) | | 11/08/2018 | SharePoint Framework 1.7 has shipped and with it a new feature to use Microsoft Teams tab as a SharePoint Framework web part. | [Tabs in SharePoint](~/concepts/tabs/tabs-in-sharepoint.md) | | 11/05/2018 | The **task module** feature was released. A task module allows you to create modal popup experiences in your Teams application, from both bots and tabs. Inside the popup, you can run your own custom HTML/JavaScript code, show an `<iframe>`-based widget such as a YouTube or Microsoft Stream video, or display an [Adaptive card](/adaptive-cards/). | [Task module Overview](~/concepts/task-modules/task-modules-overview.md), [task module in tabs](~/concepts/task-modules/task-modules-tabs.md), [task module in bots](~/concepts/task-modules/task-modules-bots.md) |
-| 10/05/2018 | Formatting information for cards has been updated, and tested in the desktop, iOS and Android clients for Teams. | [Cards](~/concepts/cards/cards.md), [Card formatting](~/concepts/cards/cards-format.md) |
+| 10/05/2018 | Formatting information for cards has been updated and tested in the desktop, iOS, and Android clients for Teams. | [Cards](~/concepts/cards/cards.md), [Card formatting](~/concepts/cards/cards-format.md) |
| 09/24/2018 | Calls and online meetings APIs for Microsoft Graph were released to beta, and Teams apps can now interact with users in rich ways using voice and video. | [Calls and online meetings bots](~/concepts/calls-and-meetings/registering-calling-bot.md), [Real-time media concepts](~/concepts/calls-and-meetings/real-time-media-concepts.md), [Registering a calling bot](~/concepts/calls-and-meetings/registering-calling-bot.md), [Debugging and local testing](~/concepts/calls-and-meetings/debugging-local-testing-calling-meeting-bots.md), [Application-hosted media](~/concepts/calls-and-meetings/requirements-considerations-application-hosted-media-bots.md), [Handling incoming call notifications](~/concepts/calls-and-meetings/call-notifications.md) | | 09/11/2018 | Tab configuration pages are now significantly taller. | [Tab Design](tabs/design/tabs.md) | | 08/15/2018 | Adaptive cards are now supported in Teams.|[Adaptive card actions in Teams](task-modules-and-cards/cards/cards-reference.md#adaptive-card) |