Updates from: 04/29/2021 03:32:02
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
The post-meeting and pre-meeting configurations are equivalent.
|-|--|--|--| | Meetings extensibility | Microsoft Teams meeting extensibility sample for passing tokens. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/csharp) | | | Meeting content bubble bot | Microsoft Teams meeting extensibility sample for interacting with content bubble bot in a meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/nodejs)|
+| Meeting SidePanel | Microsoft Teams meeting extensibility sample for iteracting with the side panel in-meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-sidepanel/csharp) |
## See also
platform Channel And Group Conversations https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/channel-and-group-conversations.md
Do not send a message in the following cases:
## See also -- [Get teams context](~/bots/how-to/get-teams-context.md).
+[Get Teams context](~/bots/how-to/get-teams-context.md)
## Next step
platform What Are Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/what-are-bots.md
You can use the Teams bot APIs to get information for one or more members of a c
## See also -- [Create a bot for Teams](~/bots/how-to/create-a-bot-for-teams.md)
+[Create a bot for Teams](~/bots/how-to/create-a-bot-for-teams.md)
## Next step
platform Build And Run https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-and-run.md
Title: Get started - Build and run your first app-+ description: Quickly create a Microsoft Teams app that displays a "Hello, World!" message using the Microsoft Teams Toolkit.-
-localization_priority: Normal
Previously updated : 11/03/2020+ Last updated : 03/22/2021
-# Build and run your first Microsoft Teams app
+# Create your first Microsoft Teams app
-Start Microsoft Teams development by building a personal tab that displays "Hello, World!".
-Build and run your first Teams app using the following steps:
+This quickstart teaches you to build and run Microsoft Teams app that displays "Hello, World!"
+
+## Prerequisites
+
+Before you begin, you need to [set up your Teams development tenant](#set-up-your-teams-development-tenant) and [install your Teams development tools](#install-your-development-tools).
+
+### Set up your Teams development tenant
+
+A **tenant** is like a container for an organization. In Teams terms, a tenant is where people from that org chat, share files, and run meetings. As a developer, you need a tenant to sideload and test the Teams apps that you are building.
+
+# [Do not have a tenant](#tab/do-not-have-a-tenant)
+
+You can get a free Teams test account, which includes a tenant that allows app sideloading, by joining the Microsoft 365 developer program. The registration process takes approximately two minutes.
+
+**To get a tenant**
+
+1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).
+1. Select **Join Now** and follow the onscreen instructions.
+1. In the Welcome screen, select **Set up E5 subscription**.
+1. Set up your Microsoft 365 developer account.
+ After you finish, the following screen appears:
+
+ :::image type="content" source="../assets/images/build-your-first-app/dev-program-subscription.png" alt-text="Example of what you see after signing up for the Microsoft 365 developer program.":::
+
+1. Sign in to Teams with your new account.
+1. In the Teams client, select **Apps**.
+1. Verify that you can see the **Upload a custom app** option. If you do, this means you can sideload apps.
+
+ :::image type="content" source="../assets/images/build-your-first-app/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
+
+# [Have a tenant](#tab/have-a-tenant)
+
+If you already have a tenant, verify if you can sideload apps in Teams.
+
+**Verify that you can sideload your apps**
+
+1. In the Teams Client, select **Apps**.
+1. Verify that you can see the **Upload a custom app** option. If you do, this means you can sideload apps.
+
+ :::image type="content" source="../assets/images/build-your-first-app/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
+++
+### Install your development tools
+
+To build this app, you'll use the Teams Toolkit for Visual Studio Code to quickly get started. You can also build Teams apps with any ofyour preffered tools.
+
+> [!NOTE]
+> Teams displays app content only through HTTPS connections. To debug certain types of apps locally, such as a bot, you'll learn how to use ngrok to set up a secure tunnel between Teams and your app.
+>
+> Production Teams apps are hosted in the cloud.
+
+**To install Microsoft Teams tools**
+
+1. Install [Node.js](https://nodejs.org/en/).
+1. If you plan to build a bot or messaging extension, install [ngrok](https://ngrok.com/download) and [expose your localhost to the Internet using ngrok](../tutorials/get-started-dotnet-app-studio.md#tunnel-using-ngrok).
+1. Install the latest version of [Visual Studio Code](https://code.visualstudio.com/download).
+
+ > [!NOTE]
+ > The toolkit does not support earlier versions of Visual Studio Code.
+
+1. In the left activity bar, select **Extensions** :::image type="icon" source="../assets/icons/vs-code-extensions.png":::.
+1. In **Microsoft Teams Toolkit**, select **Install**.
+
+ :::image type="content" source="../assets/images/build-your-first-app/vsc-install-toolkit.png" alt-text="Illustration showing where in Visual Studio Code you can install the Microsoft Teams Toolkit extension.":::
## 1. Create your app project
-Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app project. Create your app project using the following steps:
+1. Open Visual Studio Code.
+1. Select **Microsoft Teams Toolkit** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: > **Create a new Teams app**.
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**.
-1. When prompted, sign in with your Microsoft 365 development account.
-1. On the **Add capabilities** screen, select **Tab** then **Next**.
-1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
-1. Check only the **Personal tab** option and select **Finish** at the bottom of the screen to configure your project.
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-02.png" alt-text="Screenshot showing how to create your app project with the Visual Studio Code Teams Toolkit.":::
+
+1. Sign in with your Microsoft 365 development account. Either the one you just created or the account you already had that allows app sideloading.
+1. On the **Select project** screen, go to **Personal app** and select **JS** (JavaScript) > **Next**.
-## 2. Understand important app project components
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-03.png" alt-text="Screenshot showing how to configure your app project with the Visual Studio Code Teams Toolkit.":::
-Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
+1. Enter a name for your Teams app.
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-04.png" alt-text="Screenshot showing how to add a name to your app project with the Visual Studio Code Teams Toolkit.":::
-### App scaffolding
+1. Select **Finish**.
+ Your project is now configured.
-The toolkit automatically creates scaffolding for you in the `src` directory based on the capabilities you added during setup.
+## 2. Understand your app project components
-If you create a tab during setup, for example, the `App.js` file in the `src/components` directory is important because it handles the initialization and routing of your app. It calls the [Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md) to establish communication between your app and Teams.
+After the toolkit configures your app project, you have the components to build your "Hello, World!" Teams app. The project's directories and files are located in the Visual Studio Code Explorer.
-### App ID
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-05.png" alt-text="Screenshot showing the scaffolding in your app project with the Visual Studio Code Teams Toolkit.":::
-Configure your app with App Studio using the Teams app ID. Find the ID in the `teamsAppId` object, which is located in your project's `package.json` file.
+The toolkit automatically creates app scaffolding in the `src` directory based on the capabilities you added during setup.
+Since you created a tab during setup, the `App.js` file in the `src/components` directory handles the initialization and routing of your app. The file also calls the Microsoft Teams JavaScript client SDK to establish communication between your app and Teams.
## 3. Build and run your app
-Build and run your app locally to save time. This information is also available in the toolkit `README`. Build and run your app using the following steps:
+Build and run your app locally to save time.
-1. In a terminal, go to the root directory of your app project and run `npm install`.
-1. Run `npm start`.
+**To build and run your app**
-Once complete, there's a **Compiled successfully!** message in the terminal. Your app is running on `https://localhost:3000`.
+1. In Visual Studio Code, select **View** > **Terminal**.
+1. Run `npm install`.
+1. Run `npm start`.
+
+ A **Compiled successfully!** message appears in the terminal. Your app is now running on your localhost at `https://localhost:3000`.
## 4. Sideload your app in Teams
-Your app is ready to test in Teams. To do this, you must have a Microsoft 365 development account that allows app sideloading. For more information on account opening, see [Teams development account](../build-your-first-app/build-first-app-overview.md#set-up-your-development-account).
+Sideloading is the process of installing an app in Teams that hasn't been approved by your admin or Microsoft. Sideloading is common when testing and debugging Teams apps.
-> [!TIP]
-> Check for issues before sideloading your app, using the [validation feature in App Studio](../concepts/deploy-and-publish/appsource/prepare/submission-checklist.md#teams-app-validation-tool), which is included in the toolkit. Fix the errors to successfully sideload the app.
+By default, Teams doesn't allow app sideloading. You can change this setting in the Teams admin center.
-Sideload your app in Teams using the following steps:
+**To enable app sideloading in Teams**
-> [!NOTE]
-> To enable sideloading before you sideload your app in Teams, follow the steps in [Turn on app sideloading](../concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
+1. Sign in to the [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials.
+1. Select **Show All** > **Teams**.
-1. Select the **F5** key to launch a Teams web client in Visual Studio Code.
-1. To display your app content in Teams, specify that where your app is running (`localhost`) is trustworthy:
- 1. Open a new tab in the same browser window (Google Chrome by default) which opened after pressing **F5**.
- 1. Go to `https://localhost:3000/tab` and proceed to the page.
-1. Go back to Teams. In the dialog, select **Add for me** to install your app.
+ ![image of admin center menu](~/assets/images/prepare-test-tenant/admin-center.png)
-🎉 Congratulations! Your app is running in Teams.
+ > [!Note]
+ > It can take up to 24 hours for the **Teams** option to appear.
-## Next step
+1. Go to **Teams apps** > **Setup policies** > **Global** (Org-wide default).
-Expand on the personal tab you just created or build another type of Teams app.
+ ![turn on sideload view](~/assets/images/prepare-test-tenant/turn-on-sideload.png)
+
+1. Turn on the **upload custom apps** toggle.
+
+1. Select **Save** to save the changes.
+
+ Your test tenant now allows custom app sideloading.
+
+ > [!Note]
+ > Check for issues before sideloading your app using the validation feature in App Studio, which is included in the toolkit. Fix the errors to successfully sideload the app.
++
+### Sideload your app
+
+1. In Visual Studio Code, open the Teams Toolkit.
+1. Go to **App Studio**.
+1. Select **Test and Distribute** > **Install**.
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-appstudio.png" alt-text="Screenshot showing how to sideload your app to Teams client with the Visual Studio Code Teams Toolkit.":::
+
+**Alternatively**
+
+1. Select the **F5** key to open browser window to install. This will skip the installation process in the **App Studio** and lauch Teams in your browser.
+1. In the installation dialog, select **Add** to install your app to Teams.
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-install.png" alt-text="Screenshot showing how to sideload your app to Teams client.":::
+
+ > [!Note]
+ > App Studio is also available as a stand-alone app for Teams client.
+
+### Troubleshoot sideloading issues
+
+**Installation failed**
+
+If the `Manifest parsing has failed` error message appears while installing your app, verify that the app information is correctly entered.
+
+**To verify the app information**
+
+* In the Teams Toolkit, go to **App Studio** > **App details** and verify that all the required information is correctly entered.
+* If you manually edited the `manifest.json` file, verify that the JSON is well-defined in the **App Manifest** tool in App Studio.
+
+**Tab content not displayed**
+
+Verify that your app is running. If it isn't, go to the terminal and run `npm start`.
+
+## See also
+
+* [Prepare your Microsoft 365 tenant](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant)
+* [Choosing a setup to test and debug your Microsoft Teams app](../concepts/build-and-test/debug.md)
+* [Building tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md)
+* [Prepare for AppSource submission](../concepts/deploy-and-publish/appsource/prepare/submission-checklist.md)
+* [Quickly develop apps with App Studio for Microsoft Teams](../concepts/build-and-test/app-studio-overview.md)
+* [Build a channel tab](../build-your-first-app/build-channel-tab.md)
+
+## Next step
> [!div class="nextstepaction"]
-> [Add to your personal tab](../build-your-first-app/build-personal-tab.md)
-> [!div class="nextstepaction"]
-> [Build a channel tab](../build-your-first-app/build-channel-tab.md)
-> [!div class="nextstepaction"]
-> [Build a bot](../build-your-first-app/build-bot.md)
+> [Build a personal tab for Microsoft Teams](../build-your-first-app/build-personal-tab.md)
platform Build Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-bot.md
Title: Get started - Build a bot-+ description: Quickly create a Microsoft Teams bot using the Microsoft Teams Toolkit.-
-localization_priority: Normal
Previously updated : 11/04/2020+ Last updated : 04/14/2020
-# Build a bot for Microsoft Teams
+# Create your first bot for Teams
-You'll build a basic *bot* app in this tutorial. A bot acts as an intermediary between Teams users and your web service. People can chat with a bot to quickly get information or initiate workflows and tasks performed by your service.
-
-## Your assignment
-
-Your workplace created a Teams app that uses [tabs](../build-your-first-app/build-personal-tab.md) to surface important contact information. For example, colleagues have quick access to the help desk phone number. But instead of calling, what if people could contact the help desk using a chatbot? Your boss asks you to look at how quickly you can get a basic conversational bot up and running in Teams.
+This tutorial teaches you to build a basic bot app. A bot acts as an intermediary between Teams users and your web app or service with a conversational interface. People can chat with a bot to quickly get information or initiate workflows and tasks performed by your service.
## What you'll learn
-> [!div class="checklist"]
->
-> * Create an app project and bot using the Microsoft Teams Toolkit for Visual Studio Code
-> * Identify some of the app configurations and scaffolding relevant to bots
-> * Host an app locally
-> * Configure a bot for Teams
-> * Sideload and test a bot in Teams
+* Create an app project and bot using the Microsoft Teams Toolkit for Visual Studio Code.
+* Understand the Teams app configurations relevant to bots.
+* Host and run an app locally using a localhost tunneling solution.
+* Sideload and test a bot in Teams.
-## Before you begin
+## Prerequisites
-If you haven't yet, make sure you [understand and install the Teams development prerequisites](build-first-app-overview.md#get-prerequisites).
+Ensure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
## 1. Create your app project
-The Microsoft Teams Toolkit helps you set up the following components for your app:
+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
-> [!TIP]
-> If you haven't created a Teams app project before, you might find it helpful to follow [these instructions](../build-your-first-app/build-and-run.md) that explain projects in more detail.
+**To create your app project**
1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**.
-1. When prompted, sign in with your Microsoft 365 development account.
-1. On the **Add capabilities** screen, select **Bot** then **Next**.
-1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
-1. Go to **Configure bot** and select **Create a new Bot** then **Create Bot Registration**. If successful, your new bot will have a **Registered** status.
-1. Select **Finish** at the bottom of the screen and choose a location to create your project.
-## 2. Identify relevant app project components
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-01.png" alt-text="Screenshot showing how to create an app in the Teams Toolkit.":::
+
+1. When prompted, sign in with your Microsoft 365 development account.
+1. On the Select project screen, select Conversation bots:
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-02.png" alt-text="Screenshot showing how to create a new bot in the Teams Toolkit.":::
+
+1. On the **Configure project** screen, enter a name for your bot. This is the default name for your app and also the name of the app project directory on your local machine.
+1. Select **Create a new Bot** > **Create Bot Registration** as shown in the following image:
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-03.png" alt-text="Screenshot showing naming new bot in the Teams Toolkit.":::
+
+ If successful, your new bot will have a **Registered** status. Now your bot is automatically registered with the Microsoft Azure Bot Service.
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-04.png" alt-text="Screenshot showing registering new bot in the Teams Toolkit.":::
+
+1. Select **Finish** at the bottom of the screen and save your project on your machine.
+
+## 2. Understand your app project components
-Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Let's look at the main components for building a bot.
+Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Let's look at the main components for building a bot:
-### App configurations
-To view or update your bot's configurations, select **App Studio** in the toolkit and go to **Bots**.
+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!
-### App scaffolding
+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 app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, for handling how your bot processes activities in Teams (for example, how the bot responds to specific messages such as "Hello").
+## 3. Securely expose your localhost to the internet
-## 3. Set up a secure tunnel to your app
+Take a look at the `index.js` file, which creates an HTTP server and handles routing to listen for incoming requests to your bot. The `/api/messages` is your app's endpoint URL to respond to client requests:
-For testing purposes, let's host your app on a local web server (port 3978).
+```JavaScript
+server.post('/api/messages', (req, res) => {
+ adapter.processActivity(req, res, async (context) => {
+ await botActivityHandler.run(context);
+ });
+});
+```
-1. If you haven't already, install [ngrok](https://ngrok.com/download).
-1. In a terminal, run `ngrok http -host-header=rewrite 3978`.
-1. Copy the HTTPS URL in the output (for example, `https://468b9ab725e9.ngrok.io`) since Teams requires HTTPS connections.
+To forward the requests to your bot's logic, you must set up a publicly accessible URL, such as `https://example.com/api/messages`, instead of `https://localhost`. Because your app is running from your localhost currently, you must *tunnel* the network.
-With this URL, Teams (which requires HTTPS connections) will be able tunnel to where you're hosting your app (`localhost` on port 3978).
+Tunneling is a protocol that allows you to transport data across a network. And localhost tunneling gives you a connection between your local machine and a remote connection. To securely expose your localhost to the internet, we recommend you to use the 3rd party tool called, **ngrok**. This will give you a secure URL.
-## 4. Configure your bot
+1. Go to the [ngrok.com](https://ngrok.com/download) site and follow the instruction to install and set up ngrok in your environment.
+
+ Add the full path to the ngrok.exe file that you installed to the system PATH environment variable. The exact steps are specific to the shell that you are using.
-To use a bot in Teams, you must register it with the Azure Bot Service. Lucky for you, this is done automatically when you set up your app using the Teams Toolkit.
+1. After you have finished setting it up, open a terminal and run `ngrok http -host-header=rewrite 3978`.
-You still must specify an endpoint address to receive and process user messages (i.e., requests) sent to the bot. Typically, the URL looks like `https://HOST_URL/api/messages`. You can configure this quickly in the toolkit.
+ Now ngrok provides you a public, secure URL that forwards to your localhost at port 3978, so copy the HTTPS URL, for example, `https://287a4f4223bc.ngrok.io` as shown in the screenshot below, since Teams requires HTTPS connections:
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Open Microsoft Teams Toolkit**.
-1. Go to **Bots > Existing bot registrations** and select the bot you created during setup.
-1. In the **Bot endpoint address** field, enter the ngrok URL (for example, `https://468b9ab725e9.ngrok.io`) where you're hosting the bot and append `/api/messages` to it.<br/>
- :::image type="content" source="../assets/images/build-your-first-app/bot-config-endpoint-url.png" alt-text="Illustration showing where you can configure the bot endpoint URL in the Teams Toolkit.":::
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-ngrok-06.png" alt-text="Screenshot showing tunnelling of localhost with ngrok.":::
-Your bot will be able to respond to messages in Teams.
+1. Register the URL in your app manifest.
+
+## 4. Register your bot endpoint
+
+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.
+
+1. In Visual Studio Code, open **Microsoft Teams Toolkit**.
+1. Select **Bots** > **Existing bot registrations** and select the bot you created during setup.
+1. In the **Bot endpoint address** field, enter the ngrok URL, for example, `https://287a4f4223bc.ngrok.io`, where you're hosting the bot and append `/api/messages` to it:
+
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-07.png" alt-text="Screenshot showing how to tunnel localhost with ngrok.":::
+
+ Your bot will be able to respond to messages in Teams, after you set up the endpoint correctly.
## 5. Build and run your app
You've set up a URL to host your bot and configured it to handle messages. It's
1. In a terminal, go to the root directory of your app project and run `npm install`. 1. Run `npm start`.
-If successful, you see the following message indicating your bot is listening for activity at your `localhost`:
+ If successful, you see the following message indicating your bot is listening for activity at your `localhost`:
-`Bot/ME service listening at http://localhost:3978`
+ `Bot/ME service listening at http://localhost:3978`
## 6. Sideload your bot in Teams
With your bot running, you can install it in Teams.
> [!TIP] > If you haven't sideloaded a Teams app before and run into issues, follow these [instructions](../build-your-first-app/build-and-run.md#4-sideload-your-app-in-teams).
-1. In Visual Studio Code, press the **F5** key to launch a Teams web client.
-1. In the app install dialog, select **Add for me**. (You could add the bot to a channel or chat, but it's less intrusive to others to test a bot in a one-on-one chat.)
+1. In Visual Studio Code, select the **F5** key to launch a Teams web client.
+1. In the app install dialog, select **Add for me**.
-## 7. Test your bot
+ > [!Note]
+ > By default, the app is added to your 1:1 direct chat message, however you can choose to install it to a team or chat by clicking the little arrow beside **Add for me**. In this tutorial, letΓÇÖs just click Add.
-Now for the fun part: Let's say "Hello" to your bot.
+ :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-install-08.png" alt-text="Screenshot showing tunnelling localhost with ngrok.":::
-1. In the compose box, send a `Hello` message.
+## 7. Test your bot
-Your bot replies with something like the following message.
+Let's say "Hello" to your bot.
+* In the compose box, send a `Hello` message.
+ Your bot replies with something like the following message:
-## Well done
+ :::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.":::
-Congratulations! You have 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) 🎉
-## Troubleshooting
+## 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). 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).
-## Learn more
+## See also
+* [Bot basics](../bots/bot-basics.md)
+* [Build a personal tab for Microsoft Teams](../build-your-first-app/build-personal-tab.md)
* [See what else Teams bots can do with one of our samples](https://github.com/microsoft/BotBuilder-Samples#teams-samples) * [Bot conversation basics](../bots/how-to/conversations/conversation-basics.md)
-* Follow our [design guidelines](../bots/design/bots.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
+* [Design guidelines](../bots/design/bots.md)
+* [Production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md)
* [Bot authentication in Teams](../bots/how-to/authentication/auth-flow-bot.md) * [Microsoft Bot Framework](https://dev.botframework.com/) * [Create a bot without the toolkit](../resources/bot-v3/bots-create.md)+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Build a messaging extension](../build-your-first-app/build-messaging-extension.md)
platform Build Channel Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-channel-tab.md
Title: Get started - Build a channel and group tab-+ description: Quickly create a Microsoft Teams channel and group tab using the Microsoft Teams Toolkit.-
-localization_priority: Normal
Previously updated : 10/09/2020+ Last updated : 03/22/2020+
-# Build a channel and group tab for Microsoft Teams
-
-In this tutorial, you'll build a basic *channel tab* (also known as a *group tab*), which is a full-screen page for a team channel or chat. Unlike a personal tab, users can configure some aspects of this kind of tab (for example, rename the tab so it's meaningful to their channel).
-
-## Your assignment
-
-Not long ago, your organization created a Teams app that uses a tab to display important contact information (help desk, HR, etc.). However, since it's a personal tab, each user must install the tab to see it and adoption is lower than expected. In other words, too many workers still don't know how to reach the help desk.
+# Build your first channel and group tab for Microsoft Teams
-You can make this information easier to find by building a channel tab, which will remove the burden of requiring everyone to install an app. Instead, one user can add the tab in a channel or chat for the benefit of an entire group.
+This tutorial teaches you to build a basic *channel tab* also known as a *group tab*, which is a full-screen page for a team channel or chat. You can also configure some aspects of this kind of tab, for example, rename the tab so it's meaningful to their channel, which you cannot do in a Personal Tab.
## What you'll learn
-> [!div class="checklist"]
->
-> * Create an app project using the Microsoft Teams Toolkit for Visual Studio Code
-> * Identify some of the app configurations and scaffolding relevant to channel tabs
-> * Create tab content
-> * Create content for a tab's configuration page
-> * Provide a suggested tab name
-> * Build and run your app locally
-> * Sideload your app in Teams for testing
+* Create an app project using the Microsoft Teams Toolkit for Visual Studio Code.
+* Understand the app configurations and scaffolding relevant to channel tabs.
+* Create tab content and tab configuration.
+* Build and run your app in teams for testing.
-## Before you begin
+## Prerequisites
-If you haven't yet, make sure you [understand and install the Teams development prerequisites](build-first-app-overview.md#get-prerequisites).
+Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
## 1. Create your app project
-The Microsoft Teams Toolkit helps configure your app and set up scaffolding relevant to channel and group tabs, including a basic configuration page and content page that displays a "Hello, World!" message.
-
-> [!TIP]
-> If you haven't created a Teams app project before, you might find it helpful to follow [these instructions](../build-your-first-app/build-and-run.md) that explain projects in more detail.
-
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**.
-1. When prompted, sign in with your Microsoft 365 development account.
-1. On the **Add capabilities** screen, select **Tab** then **Next**.
-1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
-Select **Group or Teams channel tab**.
-1. Select **Finish** at the bottom of the screen to configure your project.
+The Microsoft Teams Toolkit helps you to configure your app and set up the scaffolding relevant to channel and group tabs. It also contains a basic configuration page and content page that displays a "Hello, World!" message.
-## 2. Identify relevant app project components
+**To create your app project**
-Much of the app configurations and scaffolding are set up automatically when you create your project with the toolkit. Let's look at the main components for building a channel tab.
+1. Go to Visual Studio Code and select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar.
+1. Sign in with your Microsoft 365 development account when prompted to do so.
+1. On the **Select project** screen, select **JS** (JavaScript) under **Channel and group app**.
+1. Enter a name for your Teams app.
-### App configurations
+ > [!NOTE]
+ > This is the default name for your app and also the name of the app project directory on your local machine.
-In the toolkit, go to **App Studio** to view and update your app configurations.
+1. Select **Group or Teams channel tab**.
+1. Select **Finish** at the bottom of the screen to configure your project and save your project on your local machine.
-### App scaffolding
+## 2. Understand your app project components
-The app scaffolding provides the components for rendering your channel tab in Teams. There's a lot you can work with, but for now you only need to focus on the following:
+Much of the app configurations and scaffolding are set up automatically when you create your project with the toolkit. Let's look at the main components for building a channel tab.
-* Two files located in the `src/components` directory of your project:
- * `Tab.js` for rendering your tab's content page.
- * `TabConfig.js` for rendering your tab's configuration page.
-* Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.
+* **App configurations**: Open **App Studio** in the toolkit to view and update your app configurations.
+* **App scaffolding**: The app scaffolding provides the components needed for rendering your channel tab in Teams. There's a lot you can work with, however, for now let's focus on the following:
+ * The files located in the `src/components` directory of your project:
+ * `Tab.js` for rendering your tab's content page.
+ * `TabConfig.js` for rendering your tab's configuration page.
+ * Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.
## 3. Customize your tab content page
-Copy and update the following snippet with information that's relevant to your organization or, for the sake of time, use the code as is.
-
-```JSX
-<div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
-</div>
-```
-
-Go to the `src/components` directory and open `Tab.js`. Locate the `render()` function and paste your content inside `return()` (as shown).
-
-```JavaScript
-render() {
-
- let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";
-
- return (
+1. Copy and modify the following code sample with information that's relevant to your organization. You can also use the snippet as it is:
+ ```JSX
<div> <h1>Important Contacts</h1> <ul>
render() {
<li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li> </ul> </div>
- );
-}
-```
-
-Add the following rule to `App.css` (also located in `src/components`) so the email links are easier to read no matter which theme is used.
-
-```CSS
-a {
- color: inherit;
-}
-```
+ ```
+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() {
+
+ let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";
+
+ return (
+ <div>
+ <h1>Important Contacts</h1>
+ <ul>
+ <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
+ <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
+ <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
+ </ul>
+ </div>
+ );
+ }
+ ```
+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 {
+ color: inherit;
+ }
+ ```
## 4. Customize your tab configuration page
-Every tab in a channel or chat has a configuration page, a modal with at least one setup option that displays when users add your app. The configuration page by default asks users if they want to notify the channel or chat when the tab is installed.
+Every tab in a channel or chat has a configuration page, a modal with at least one setup option that displays when users add your app. The configuration page by default asks users if they want to notify the channel or chat when the tab is installed. You can customize the configuration page by adding custom content.
-Add some custom content to your configuration page. Go to your project's `src/components` directory, open `TabConfig.js`, and update the placeholder content inside `return()` (as shown in the following example).
+To add custom content, open `TabConfig.js` file from the `src/components` directory and update the placeholder content inside `return()` as shown in the following example:
-```JavaScript
-return (
- <div>
- <h1>Add My Contoso Contacts</h1>
+ ```JavaScript
+ return (
<div>
- Select <b>Save</b> to add our organization's important contacts to this workspace.
+ <h1>Add My Contoso Contacts</h1>
+ <div>
+ Select <b>Save</b> to add our organization's important contacts to this workspace.
+ </div>
</div>
- </div>
-);
-```
+ );
+ ```
> [!TIP]
-> At minimum, provide some brief information about your app on this page since this may be the first time users are learning about it. You also could include custom configuration options or an [authentication workflow](../tabs/how-to/authentication/auth-aad-sso.md), which is common on tab configuration pages.
+> Give a brief information about your app on this page since this would be the first time users are reading about it. You can also include custom configuration options or an [authentication workflow](../tabs/how-to/authentication/auth-aad-sso.md), which is common on tab configuration pages.
-## 5. Provide a suggested tab name
+## 5. Customize your tab name
-When you add a channel tab, by default the app name displays (for example, **first-app**).
+When you add a channel tab, the app name displays by default, for example, **first-app**. You can also provide a name that makes more sense in the context of group collaboration, for example, **Team Contacts**:
-This may be fine depending on what you call your app, but you may want to provide a name that makes more sense in the context of group collaboration (for example, **Team Contacts**).
+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:
-1. In `TabConfig.js`, go to `microsoftTeams.settings.setSettings`.
-2. Add the `suggestedDisplayName` property with the tab name you want to display by default.
-3. Use the name provided in the following example or type your name. (By default, users can change the name.)
-
-```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
-In the interest of time, you'll build and run your app locally.
-
-(This information is also available in the toolkit `README`.)
+This tutorial teaches you to build and run your app locally.
-1. In a terminal, go to the root directory of your app project and run `npm install`.
+1. Go to the root directory of your app project in Terminal.
+1. Run `npm install`.
1. Run `npm start`.
-Once complete, there's a **Compiled successfully!** message in the terminal. Your app is running on `https://localhost:3000`.
+This information is also present in the `README` section of the toolkit.
+Your app is running on `https://localhost:3000` after the **Compiled successfully!** message appears in the terminal.
## 7. Sideload your app in Teams
-Your app is ready to test in Teams. To do this, you must have an account that allows app sideloading. (If you aren't sure you have that, learn about getting a [Teams development account](../build-your-first-app/build-first-app-overview.md#set-up-your-development-account).)
+Your app is ready to test in Teams. To do this, you must have an account that allows app sideloading.
-1. In Visual Studio Code, press the **F5** key to launch a Teams web client.
-1. To display your app content in Teams, specify that where your app is running (`localhost`) is trustworthy:
- 1. Open a new tab in the same browser window (Google Chrome by default) which opened after pressing **F5**.
- 1. Go to `https://localhost:3000/tab` and proceed to the page.
-1. Go back to Teams. In the modal, select **Add to a team** or **Add to a chat** and locate a channel or chat you can use for testing.
-1. Select **Set up a tab**. The configuration page displays in a modal.<br/>
- :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content.png" alt-text="Screenshot of a channel tab configuration page.":::
-1. Select **Save** to configure the tab. The content page displays.<br/>
- :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content-installed.png" alt-text="Screenshot of a channel tab with static content view.":::
+1. Open a Teams web client in Visual Studio Code with the **F5** key.
+1. Add (`localhost`) as trustworthy by following these steps to enable your app content to display in Teams:
+
+ 1. Open a new tab in the same browser window (Google Chrome by default) which opened with the **F5** key.
+ 1. Open `https://localhost:3000/tab` and proceed to the page.
-## Well done
+1. Select **Add to a team** or **Add to a chat** and locate a channel or chat you can use for testing from the modal in Teams.
+1. Select **Set up a tab**. The configuration page displays in a modal.
-Congratulations! You have a Teams app with a tab for displaying useful content in channels and chats.
+ :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content.png" alt-text="Screenshot of a channel tab configuration page.":::
-## Learn more
+1. Select **Save** to configure the tab. The following content page appears:
-* Follow our [design guidelines](../tabs/design/tabs.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
-* Understand [mobile considerations](../tabs/design/tabs-mobile.md) for tabs.
-* [Add SSO authentication to your tab](../tabs/how-to/authentication/auth-aad-sso.md).
-* Utilize Teams data with [Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview).
-* [Create a tab without the toolkit](../tabs/quickstarts/create-channel-group-tab-node-yeoman.md)
+ :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content-installed.png" alt-text="Screenshot of a channel tab with static content view.":::
-## Next lesson
+## See also
-You know how to build a tab for collaboration. Want to try building a different kind of Teams app?
+* [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)
+* [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)
+* [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
> [!div class="nextstepaction"] > [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)
platform Build First App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-first-app-overview.md
Title: Get started - Build your first app overview and prerequisites-+ description: Learn how to get started with Microsoft Teams app development and set up your environment.-
-localization_priority: Normal
Previously updated : 11/03/2020+ Last updated : 03/18/2021+
-# Build your first Microsoft Teams app overview
-
-In the **get started** lessons, you learn how to create basic Teams apps. Each tutorial walks through how to build a simple, real-world Teams app while introducing you to common tools, fundamental concepts, and more advanced features.
-
-## What you'll learn
-
-Here's an idea of what you'll know after going through the lessons.
-
-> [!div class="checklist"]
- >
- > * **Get up and running quickly with the Teams Toolkit**: The Microsoft Teams Toolkit for Visual Studio Code takes care of creating your app project and scaffolding so you can have a running app in minutes.
- > * **Configure your app with App Studio**: Specify the capabilities and services your Teams app uses.
- > * **Scope your app's audience**: Build a Teams app for personal use, collaboration, or both.
-> * **Get experience with Teams tools and SDKs**: Customize your app with help from the Teams JavaScript client SDK. For example, change your app's color scheme to match the Teams theme. Also, learn about common tools for creating and managing bots.
- > * **Expand on your app**: Throughout the lessons, you'll find related topics you're probably interested in (such as authentication and design guidelines).
-
-## Teams app fundamentals
-
-Before you begin the tutorials, you should know the following about building apps for Teams.
-
-### Apps can have multiple capabilities and entry points
-
-A Teams app is made up of one or more [platform capabilities](../concepts/capabilities-overview.md) (how people use the app) and [entry points](../concepts/extensibility-points.md) (where people use the app).
-
-### Teams doesn't host your app
+# Get started with Microsoft Teams app development
-A Teams app includes the following important pieces:
+Build a simple app to learn the basics of Teams app development. Once you see "Hello, World!", try any of the other get started articles for more information on common tools, fundamental concepts, and advanced features.
-* The logic, data storage, and API calls that power your app. These services are not hosted by Teams and must be accessible via HTTPS.
-* The Teams client (web, desktop, or mobile) where people use your app.
-* Your app ID, which lets you configure your app with App Studio.
-## Get prerequisites
-Verify you have the right account for building Teams apps and install some recommended development tools.
-
-### Set up your development account
-
-You need a Teams account that allows custom app sideloading. (Your account may already provide this.)
-
-1. If you have a Teams account, verify if you can sideload apps in Teams:
- 1. In the Teams client, select **Apps**.
- 1. Look for an option to **Upload a custom app**.
+## What you'll learn
- :::image type="content" source="../assets/images/build-your-first-app/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
-
- If you don't see the button, you don't have permission to upload custom apps in your org. You can get this feature by signing up for a free Microsoft 365 developer subscription.
+* 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
-<!-- markdownlint-disable MD033 -->
-<details>
+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:
-<summary><b>Get your free Microsoft 365 developer subscription</b></summary>
+* Teams Toolkit, a Visual Studio Code extension
+* React.js for tabs
+* Node.js for bots and messaging extensions
-You can get a free Teams test account that allows app sideloading by joining the Microsoft 365 developer program. (The registration process takes approximately two minutes.)
-1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).
-1. Select **Join Now** and follow the onscreen instructions.
-1. When you get to the welcome screen, select **Set up E5 subscription**.
-1. Set up your administrator account. Once you finish, you should see a screen like this.
-1. Log in to Teams using the administrator account you just set up.
-1. Verify if you now have the **Upload a custom app** option.
+## Teams app fundamentals
-</details>
+You can build custom Teams apps for yourself, people in your org, or people all over the world. Before you begin, you should understand the following fundamental concepts about Teams app development:
-> [!Note]
-> If you still can't sideload apps, see [enable custom Teams apps and turn on custom app uploading](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
+### Common app use cases
-### Install your development tools
+Some typical scenarios that a custom Teams app can help with are:
-You can build Teams apps with your preferred tools, but these lessons show how you can get started quickly with the Microsoft Teams Toolkit for Visual Studio Code.
+* 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
-Teams displays app content only through HTTPS connections. To debug certain types of apps locally, such as a bot, you'll learn how to use [ngrok to set up a secure tunnel](../concepts/build-and-test/debug.md#locally-hosted) between Teams and your app. (Production Teams apps are hosted in the cloud.)
+### App capabilities and tools
-1. Install [Node.js](https://nodejs.org/en/).
-1. Install [ngrok](https://ngrok.com/download) if you are building a bot or messaging extension and [create a tunnel using ngrok](https://docs.microsoft.com/microsoftteams/platform/tutorials/get-started-dotnet-app-studio#tunnel-using-ngrok).
-1. Install the latest version of [Visual Studio Code](https://code.visualstudio.com/download). (Earlier versions might not work with the toolkit.)
-1. In Visual Studio Code, select **Extensions** :::image type="icon" source="../assets/icons/vs-code-extensions.png"::: on the left Activity Bar and install the **Microsoft Teams Toolkit**.
+An app is made up of one or more Teams capabilities and user interaction points. Your development toolset will vary depending on the capabilities you want.
- :::image type="content" source="../assets/images/build-your-first-app/vsc-install-toolkit.png" alt-text="Illustration showing where in Visual Studio Code you can install the Microsoft Teams Toolkit extension.":::
+| **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 Franework 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 |
-## About the tutorials
+### Teams doesn't host your app
-You can start with any of the Teams **get started** lessons. If you're not sure where to go first, follow our beginner friendly path and build a "Hello, World!" app.
+When a user installs your app in Teams, they only install an app package that contains a configuration file (also known as an app manifest) and your appΓÇÖs icons. Your appΓÇÖs logic and data storage are hosted elsewhere, such as Azure Web Services or localhost during development. Teams accesses these resources via HTTPS.
## Next step
-Once you set up your account and environment, you can start building.
-
-### Beginner friendly tutorial
-
-> [!div class="nextstepaction"]
-> [Build a "Hello, World!" app](../build-your-first-app/build-and-run.md)
-
-### Other tutorials
-
-> [!div class="nextstepaction"]
-> [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 and run your first Teams app](../build-your-first-app/build-and-run.md)
platform Build Messaging Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-messaging-extension.md
Title: Get started - Build a messaging extension-+ description: Quickly create a Microsoft Teams messaging extension using the Microsoft Teams Toolkit.-
-localization_priority: Normal
Previously updated : 11/04/2020+ Last updated : 03/25/2021+
-# Build a messaging extension for Microsoft Teams
+# Build your first messaging extension for Microsoft Teams
There are two types of Teams *messaging extensions*: [Search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) and [action commands](../messaging-extensions/how-to/action-commands/define-action-command.md).
-In this lesson, you'll create a *search command* (also known as a *search-based messaging extension*), which is a shortcut for finding external content and sharing it in Teams. Users can access search commands from the [Teams compose or command box](../messaging-extensions/what-are-messaging-extensions.md).
-
-## Your assignment
-
-Your organization's help desk communicates with users through Teams, but the tickets reside in a separate system. This means support staff must constantly go back and forth between apps. You'll investigate how you might reduce this much context switching by creating a simple search-based messaging extension for Teams.
+This tutorial teaches you to create a *search command* (also known as a *search-based messaging extension*), which is a shortcut for finding external content and sharing it in Teams. Users can access search commands from the Teams compose or command box.
## What you'll learn
-> [!div class="checklist"]
->
-> * Create an app project and messaging extension bot using the Microsoft Teams Toolkit for Visual Studio Code
-> * Identify the app configurations and some of the scaffolding relevant to messaging extensions
-> * Host an app locally
-> * Configure the bot for your messaging extension
-> * Sideload and test a messaging extension in Teams
+* Create an app project and messaging extension bot using the Microsoft Teams Toolkit for Visual Studio Code.
+* Understand the app configurations and the scaffolding relevant to messaging extensions.
+* Host an app locally.
+* Configure the bot for your messaging extension.
+* Sideload and test a messaging extension in Teams.
-## Before you begin
+## Prerequisites
-If you haven't yet, make sure you [understand and install the Teams development prerequisites](build-first-app-overview.md#get-prerequisites).
+Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
## 1. Create your app project
The Microsoft Teams Toolkit helps you set up the following components for your m
* **App configurations and scaffolding** relevant to messaging extensions * **Bot** for your messaging extension that's automatically registered with the Microsoft Azure Bot Service
-> [!TIP]
-> If you haven't created a Teams app project before, you might find it helpful to follow [these instructions](../build-your-first-app/build-and-run.md) that explain projects in more detail.
+**To create your app project**
1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**. 1. When prompted, sign in with your Microsoft 365 development account.
-1. On the **Add capabilities** screen, select **Messaging Extension** then **Next**.
-1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
-1. On the **Configure messaging extension** screen, do the following:
- 1. Choose only the **Search-based** option for the type of messaging extension.
- 1. Select **Create a new Bot** then **Create Bot Registration**. If successful, your new bot will have a **Registered** status.
- 1. For now, select **No** for the link unfurling option.
-1. Select **Finish** at the bottom of the screen to configure your project.
+1. On the **Select project** screen, at **Messaging Extensions** > **Search**, click **JS (JavaScript)**.
+1. Enter a name for your Teams app. This is the default name for your app and also the name of the app project directory on your local machine.
+1. Select **Create a new Bot** then click **Create Bot Registration** button. If successful, your new bot will have a *Registered* status. Now your bot is automatically registered with the Microsoft Azure Bot Service.
+1. Select **Finish** at the bottom of the screen to configure your project and save your project on your local machine.
-## 2. Identify relevant app project components
+## 2. Understand your app project components
Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit.
-### App configurations
-
-To view or update your messaging extension's configurations, select **App Studio** in the toolkit and go to **Messaging extensions**.
-
-### App scaffolding
-
-The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, for handling how your messaging extension (or technically, the [messaging extension's bot](#4-configure-the-bot-for-your-messaging-extension)) responds to search queries in Teams.
+* App configurations: To view or update your messaging extension's configurations, select **App Studio** in the toolkit and go to **Messaging extensions**.
+* App scaffolding: The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, for handling how your messaging extension (or technically, the [messaging extension's bot](#4-configure-the-bot-for-your-messaging-extension)) responds to search queries in Teams.
## 3. Set up a secure tunnel to your app
-For testing purposes, let's host your messaging extension on a local web server (port 3978).
+For testing purposes, let's host your messaging extension on a local web server (port 3978). You are going to use [ngrok](https://ngrok.com/download) to set up a secure tunnel to localhost. See [build your first bot for Microsoft Teams](../build-your-first-app/build-bot.md#3-securely-expose-your-localhost-to-the-internet) for details.
1. If you haven't already, install [ngrok](https://ngrok.com/download). 1. In a terminal, run `ngrok http -host-header=rewrite 3978`. 1. Copy the HTTPS URL in the output (for example, `https://468b9ab725e9.ngrok.io`) since Teams requires HTTPS connections.
-With this URL, Teams (which requires HTTPS connections) will be able tunnel to where you're hosting your app (`localhost` on port 3978).
+ With this URL, Teams (which requires HTTPS connections) will be able tunnel to where you're hosting your app (`localhost` on port 3978).
## 4. Configure the bot for your messaging extension
You still must specify a bot endpoint URL to receive and process search queries
1. Go to **Bots > Existing bot registrations** and select the bot you created during setup. 1. In the **Bot endpoint address** field, enter the ngrok URL (for example, `https://468b9ab725e9.ngrok.io`) where you're hosting the bot and append `/api/messages` to it.
-Your bot will be able to handle queries in your messaging extension.
+ Your bot will be able to handle queries in your messaging extension.
## 5. Build and run your app 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. In a terminal, go to the root directory of your app project and run `npm install`.
+1. Open terminal and go to the root directory of your app project
+1. Run `npm install`.
1. Run `npm start`.
-If successful, you see the following message indicating your messaging extension service is listening for activity at your `localhost`:
+ If successful, you see the following message indicating your messaging extension service is listening for activity at your `localhost`:
-`Bot/ME service listening at http://localhost:3978`
+ `Bot/ME service listening at http://localhost:3978`
## 6. Sideload your messaging extension in Teams
With your messaging extension running, you can install it in Teams.
> [!TIP] > If you haven't sideloaded a Teams app before and run into issues, follow these [instructions](../build-your-first-app/build-and-run.md#4-sideload-your-app-in-teams).
-1. In Visual Studio Code, press the **F5** key to launch a Teams web client.
+1. In Visual Studio Code, select the **F5** key to launch a Teams web client.
1. In the app install dialog, select **Add for me**. ## 7. Test your messaging extension Learn how messaging extensions work in a Teams chat.
-1. Start a new chat. In the compose box, select **More** :::image type="icon" source="../assets/icons/teams-client-more.png"::: and choose the messaging extension app you just sideloaded.
-1. Try searching for something (for example, **Tickets**). If your app is working, you'll see sample search results (you can add your own later).<br/>
- :::image type="content" source="../assets/images/build-your-first-app/me-teams-test.png" alt-text="A screenshot showing how a search-based messaging extension is used in the Teams compose box.":::
-
-## Well done
+1. Start a new chat. In the compose box, select **More** :::image type="icon" source="../assets/icons/teams-client-more.png"::: and select the messaging extension app you just sideloaded.
+1. Try searching for something (for example, **Tickets**). If your app is working, you'll see sample search results (you can add your own later).
-Congratulations! You have a basic Teams messaging extension that's set up to search for external content in the compose or command box.
-
-## Next steps
-
-See the following pages to continue and build a fully featured messaging extension:
-
-1. [Define search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) that are relevant to your service.
-1. Configure your service to [respond to users' searches](../messaging-extensions/how-to/search-commands/respond-to-search.md).
+ :::image type="content" source="../assets/images/build-your-first-app/me-teams-test.png" alt-text="A screenshot showing how a search-based messaging extension is used in the Teams compose box.":::
## Troubleshooting The following information may help if you had issues completing this tutorial.
-### Bot isn't connected to Teams
+**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). 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).
-## Learn more
+## See also
+* [Teams compose or command box](../messaging-extensions/what-are-messaging-extensions.md)
* [Include a link unfurling feature](../messaging-extensions/how-to/link-unfurling.md)
-* Follow our [design guidelines](../messaging-extensions/design/messaging-extension-design.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
+* [Design guidelines](../messaging-extensions/design/messaging-extension-design.md)
+* [Production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md)
* [Add authentication](../messaging-extensions/how-to/add-authentication.md) * [Create an action-based messaging extension](../messaging-extensions/how-to/action-commands/define-action-command.md) * [Microsoft Bot Framework](https://dev.botframework.com/)
+## Next steps
+
+> [!div class="nextstepaction"]
+> [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)
platform Build Personal Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-personal-tab.md
Title: Get started - Build a personal tab-+ description: Quickly create a Microsoft Teams personal tab using the Microsoft Teams Toolkit.-
-localization_priority: Normal
Previously updated : 11/03/2020+ Last updated : 03/16/2020
-# Build a personal tab for Microsoft Teams
+# Build a basic personal tab for Microsoft Teams
-Tabs are a simple way to surface content in your app by essentially embedding a webpage in Teams.
-
-There are two types of tabs in Teams. In this tutorial, you'll build basic a *personal tab*, a full-screen content page for individual users. (Personal tabs are the closest thing to a traditional website experience in Teams.)
-
-## Before you begin
-
-You need a basic running personal tab to get started. If you don't have one, see [build and run your first Teams app](../build-your-first-app/build-and-run.md).
-
-## Your assignment
-
-People in your organization have trouble finding basic contact information for important functions (help desk, HR, etc.). You're in charge of making sure they can quickly find this information in one place. How would you do that? A Teams personal tab, of course.
+This tutorial teaches you to build a basic personal tab in Microsoft Teams. Tabs are a simple way to surface information in your app by hosting web content in Teams. Tabs are a common feature of personal apps that provide a private workspace for individual users. Personal tabs are the closest thing to a traditional web experience in Teams.
## What you'll learn
-> [!div class="checklist"]
->
-> * Identify some of the app configurations and scaffolding relevant to personal tabs
-> * Create tab content
-> * Update a tab's color theme based on user preference
+* Understand the app configurations and scaffolding relevant to personal tabs.
+* Create a tab content with a contact list of your organization.
+* Update a tab's color theme based on user preference.
-## 1. Identify relevant app project components
+## Prerequisites
-Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Let's look at the main components for building a personal tab.
+Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
-### App configurations
+## 1. Understand your app project components
-In the toolkit, go to **App Studio** to view and update your app configurations.
-
-### App scaffolding
-
-The app scaffolding provides the components for rendering your personal tab in Teams. There's a lot you can work with, but for now you only need to focus on the following:
+After you have created a basic personal tab, the generated app scaffold provides the components for rendering your personal tab in Teams. There's a lot you can work with, but for now let us focus on the following:
* `Tab.js` file in the `src/components` directory of your project. This is for rendering your tab content page.
-* Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.
+* Microsoft Teams JavaScript client SDK, which is pre-loaded in your project's front-end components.
-## 2. Customize your tab content page
+As you may notice from the `import` section at the top of `Tabs.js` file, the sample code uses [React](https://reactjs.org/), an open-source JavaScript library for building user-interface.
-Compile a list of important contacts in your organization. Copy and update the following snippet with information that's relevant to you or, for the sake of time, use the code as is.
-
-```JSX
-<div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
-</div>
-```
+> [!NOTE]
+> Although using React is _not_ required for Teams development, this tutorial teaches you with React.
-Go to the `src/components` directory and open `Tab.js`. Locate the `render()` function and paste your content inside `return()` (as shown).
+## 2. Customize your tab content page
-```JavaScript
-render() {
+You can customize your tab content page to render a list of important contacts in your organization.
- let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";
+**To customize your tab content page**
- return (
+1. Copy and modify the following code sample with information that's relevant to you. You can also use the code as is:
+ ```JSX
<div> <h1>Important Contacts</h1> <ul>
render() {
<li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li> </ul> </div>
- );
-}
-```
-
-Add the following rule to `App.css` so the email links are easier to read no matter which theme is used.
+ ```
+1. Got to the `src/components` directory and open the `Tab.js` file.
+1. Go to `render()` and replace the template code with the modified code inside `return()` as shown in the following example:
+ ```JavaScript
+ render() {
+ return (
+ <div>
+ <h1>Important Contacts</h1>
+ <ul>
+ <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
+ <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
+ <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
+ </ul>
+ </div>
+ );
+ }
+ ```
+1. Go to the `src/components` directory and modify the `App.css` file with the following code to make the email links easier to read with any theme that is used:
+ ```CSS
+ a {
+ color: inherit;
+ }
+ ```
+1. Save your changes.
-```CSS
-a {
- color: inherit;
-}
-```
+ You can view the new content in your app's tab in Teams.
-Save your changes. Go to your app's tab in Teams to view the new content.
+ :::image type="content" source="../assets/images/build-your-first-app/personal-tab-tutorial-content.png" alt-text="Screenshot of a personal tab with static content.":::
+## 3. Update your tab theme
-## 3. Update the tab theme
+It is important for your tab to have a theme that feels native to Teams. You must blend your tab with the Teams theme. Your users generally prefer default (light), dark, or high contrast themes. As you might have noticed in the last screenshot, your tab still has a light background when your user is using the dark theme. This is not a recommended user experience.
-Good apps feel native to Teams, so it's important your tab blends with the Teams theme your users prefer: default (light), dark, or high contrast. As you might have noticed in the last screenshot, your tab still has a light background when the client's using the dark theme. This is not a recommended user experience.
+The Teams JavaScript client SDK can make your app aware of and react to theme changes in the client. To do this, follow these steps:
-The [Teams JavaScript client SDK](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true) can make your app aware of and react to theme changes in the client. Let's walk through how to do this.
+1. **Get context about the configured Teams client theme**
+ The `microsoftTeams.getContext()` call in your `Tab.js` file, provides some context about the configured client theme (such as dark theme). The following code accesses the `context` interface and its properties:
-### Get context about the Teams client
+ ```JavaScript
+ componentDidMount(){
+ // Get the user context from Teams and set it in the state
+ microsoftTeams.getContext((context, error) => {
+ this.setState({
+ context: context,
+ theme: context.theme
+ });
+ });
+ }
+ ```
+1. **Create a theme change handler**
+ With the `context` properties in hand, your app has a solid understanding of what's happening around it in Teams. However, the app still doesn't have an appearance reflecting the theme when a user updates it.
-In your `Tab.js` file, there's a `microsoftTeams.getContext()` call that provides some [`context`](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true) about, among other details, the configured client theme. Thanks to the app scaffolding, use this code as is to access the `context` interface and its properties.
+ You need a handler to update your app's state with the theme. To create a handler, insert the following theme change handler immediately after the `microsoftTeams.getContext()` call:
-```JavaScript
-componentDidMount(){
- // Get the user context from Teams and set it in the state
- microsoftTeams.getContext((context, error) => {
+ ```JavaScript
+ microsoftTeams.registerOnThemeChangeHandler(theme => {
+ if (theme !== this.state.context.theme) {
this.setState({
- context: context
+ context: {
+ ...this.state.context,
+ theme
+ }
+ })
+ }
});
- });
- // Next steps: Error handling using the error object
-}
-```
-
-### Create a theme change handler
-
-With the `context` properties in hand, your app has a solid understanding of what's happening around it in Teams. But the app still doesn't know its appearance should reflect whatever theme a user chooses.
-
-You need a handler so that your app's state changes with the theme. Insert the following theme change handler immediately after the `microsoftTeams.getContext()` call.
-
-```JavaScript
- microsoftTeams.registerOnThemeChangeHandler(theme => {
- if (theme !== this.state.theme) {
- this.setState({ theme });
- }
- });
-```
-
-### Match theme styles
-
-Your theme change handler is in place, but you need some code that responds to those changes and aligns your tab's colors with the current theme.
-
-> [!NOTE]
-> The following example is just one way you might apply styles to your tab. Use the code as is, expand on it, or write your own.
-
-In the `render()` function, store the state provided by the theme change handler in `isTheme`.
-
-```JavaScript
- const isTheme = this.state.theme
-```
-
-After storing the state provided by the theme change handler, provide some conditional logic to render your tab's styles based on the current theme. The following example shows a basic way to do this:
-1. Check the current theme in `isTheme`.
-2. Create a `newTheme` object with CSS properties relevant to the current theme.
-3. Apply the CSS to your tab content's root HTML element (`<div style={newTheme}>`).
-
-```JavaScript
-let newTheme
-
-if (isTheme === "default") {
- newTheme = {
- backgroundColor: "#EEF1F5",
- color: "#16233A"
- };
-} else {
- newTheme = {
- backgroundColor: "#2B2B30",
- color: "#FFFFFF"
- };
-}
-```
-
-Check your tab in Teams. The appearance should closely match the dark theme.
--
-## Well done
-
-Congratulations! You have a Teams app with a personal tab that makes it easier to find important contacts in your organization.
-
-## Learn more
-
-* Follow our [design guidelines](../tabs/design/tabs.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
-* Understand [mobile considerations](../tabs/design/tabs-mobile.md) for tabs.
-* [Add SSO authentication to your tab](../tabs/how-to/authentication/auth-aad-sso.md).
-* Utilize Teams data with [Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview).
-* [Create a tab without the toolkit](../tabs/quickstarts/create-personal-tab-node-yeoman.md).
-
-## Next lesson
-
-You know how to build a tab for personal use. Let's look at what it takes to build a tab for team channels and chats.
+ ```
+1. **Match the theme styles**
+ Your theme change handler is in place, however, you still have to respond to changes and align your tab's colors with the current theme.
+
+ In the `render()` function, store the state provided by the theme change handler in `isTheme`:
+
+ ```JavaScript
+ const isTheme = this.state.context.theme
+ ```
+
+ > [!NOTE]
+ > This example is just one way you might apply styles to your tab. Use the code as is, expand on it, or write your own.
+
+ After storing the state provided by the theme change handler, provide the conditional logic to render your tab's styles based on the current theme. The following example shows a basic way to do this:
+
+ 1. Go to `render()` and check the current theme in `isTheme`.
+ 1. Create a `newTheme` object with CSS properties relevant to the current theme.
+ 1. Apply the following CSS to your tab content's root HTML element (`<div style={newTheme}>`):
+
+ ```JavaScript
+ let newTheme
+ if (isTheme === "default") {
+ newTheme = {
+ backgroundColor: "#EEF1F5",
+ color: "#16233A"
+ };
+ } else {
+ newTheme = {
+ backgroundColor: "#2B2B30",
+ color: "#FFFFFF"
+ };
+ }
+ ```
+
+ Check your tab in Teams. The appearance now closely matches the dark theme.
+
+ :::image type="content" source="../assets/images/build-your-first-app/personal-tab-tutorial-updated-theme.png" alt-text="Screenshot of a personal tab with static content view.":::
+
+## See also
+
+* [Teams JavaScript client SDK](https://docs.microsoft.com/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)
+* [Context interface](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true)
+* [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)
+* [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
> [!div class="nextstepaction"]
-> [Build a channel tab](../build-your-first-app/build-channel-tab.md)
+> [Build a channel tab](../build-your-first-app/build-channel-tab.md)
platform Apps Localization https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/apps-localization.md
Therefore, it is strongly recommended to provide top-level, language-only transl
## Handling localized text submissions from your users If your provide localized versions of your application it is very likely that your users will respond with the same language. Teams does not translate the user submissions back to the default language, so your app will need to handle that. For example, if you provide a localized `commandList`, the responses to your bot will be the localized text of the command, not the default language. Your app will need to respond appropriately.+
+## Code sample
+
+| Sample name | Description | .NET |
+|-|-||
+| App Localization | Microsoft Teams app localization using bot and tab. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-localization/csharp) |
++
platform Deep Links https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/deep-links.md
To use this deep link with your bot, specify this as the URL target in your card
The following deep link format can be used in a bot, connector, or messaging extension card:
-`https://teams.microsoft.com/I/file/5E0154FC-F2B4-4DA5-8CDA-F096E72C0A80?tenantId=<tenantid>&fileType=<filetype>&objectURL=<objectURL>&baseUrl=<baseURL>&serviceName=<Name>&threadId=<threadid>&groupId=<groupId>`
+`https://teams.microsoft.com/l/file/5E0154FC-F2B4-4DA5-8CDA-F096E72C0A80?tenantId=<tenantid>&fileType=<filetype>&objectURL=<objectURL>&baseUrl=<baseURL>&serviceName=<Name>&threadId=<threadid>&groupId=<groupId>`
The query parameters are:
The query parameters are:
To use this deep link with your bot, you can specify this as the URL target in your card's button or tap action through the `openUrl` action type.
+## Code sample
+
+| Sample name | Description | .NET |
+|-|-||
+| Deep Link consuming Subentity ID | Microsoft Teams sample app for demonstrating deeplink from bot chat to tab consuming Subentity ID. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-deeplink/csharp) |
+ ## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Share To Teams https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/share-to-teams.md
You can select to set default values for the following fields on the Share to Te
## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Test Resource Specific Consent https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/rsc/test-resource-specific-consent.md
Execute the entire permissions collection for each API call. The permissions tha
## See also -- [Microsoft Graph API and Teams](/graph/api/resources/teams-api-overview?view=graph-rest-1.0&preserve-view=true)
+[Microsoft Graph API and Teams](/graph/api/resources/teams-api-overview?view=graph-rest-1.0&preserve-view=true)
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](/OfficeDev/office-dev-program-docs/docs/office-365-developer-program.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).
In addition, this project requires that you have the following installed in your development environment:
Your company name will be used in the app manifest.
Select the default schema.
+**Quick scaffolding? (Y/n)**
+
+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)** This field isn't required and should only be used if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com).
platform Create Task Module https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/action-commands/create-task-module.md
private static Attachment GetAdaptiveCardAttachmentFromFile(string fileName)
## See also -- [Define action commands](~/messaging-extensions/how-to/action-commands/define-action-command.md)
+[Define action commands](~/messaging-extensions/how-to/action-commands/define-action-command.md)
## Next step
platform Link Unfurling https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/link-unfurling.md
Following is an example of the response:
## See also -- [What are cards](~/task-modules-and-cards/what-are-cards.md)
+[Cards](~/task-modules-and-cards/what-are-cards.md)
platform Respond To Search https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/search-commands/respond-to-search.md
The default query has the same structure as any regular user query, with the `na
## See also -- [Add configuration to a messaging extension](~/messaging-extensions/how-to/add-configuration-page.md)
+[Add configuration to a messaging extension](~/messaging-extensions/how-to/add-configuration-page.md)
## Next step
platform What Are Messaging Extensions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/what-are-messaging-extensions.md
The following images display link unfurling feature when a link is pasted in mes
## See also -- [Create a messaging extension](../build-your-first-app/build-messaging-extension.md)
+[Create a messaging extension](../build-your-first-app/build-messaging-extension.md)
## Next step
platform Manifest Schema https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema.md
The value must be a valid HTML color code starting with '#', for example `#4464e
**Optional** ΓÇö array
-Used when your app experience has a team channel tab experience that requires extra configuration before it is added. Configurable tabs are supported only in the teams scope (not personal), and currently only **one** tab per app is supported.
+Used when your app experience has a team channel tab experience that requires extra configuration before it is added. Configurable tabs are supported only in the teams scope and you can configure the same tabs multiple times. However, you can define it in the manifest only once.
|Name| Type| Maximum size | Required | Description| |||||| |`configurationUrl`|string|2048 characters|Γ£ö|The https:// URL to use when configuring the tab.| |`scopes`|array of enums|1|Γ£ö|Currently, configurable tabs support only the `team` and `groupchat` scopes. | |`canUpdateConfiguration`|boolean|||A value indicating whether an instance of the tab's configuration can be updated by the user after creation. Default: **true**.|
-|`context` |array of enums|6||The set of `contextItem` scopes where a tab is supported. Default: **[channelTab, privateChatTab, meetingChatTab, meetingDetailsTab]**.|
+|`context` |array of enums|6||The set of `contextItem` scopes where a [tab is supported](../../tabs/how-to/access-teams-context.md). Default: **[channelTab, privateChatTab, meetingChatTab, meetingDetailsTab]**.|
|`sharePointPreviewImage`|string|2048||A relative file path to a tab preview image for use in SharePoint. Size 1024x768. | |`supportedSharePointHosts`|array of enums|1||Defines how your tab is made available in SharePoint. Options are `sharePointFullPage` and `sharePointWebPart` |
This item is an array (maximum of 16 elements) with all elements of the type `ob
|`context` | array of enums| 2|| The set of `contextItem` scopes where a tab is supported.| > [!NOTE]
-> 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).
+> 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).
## bots
platform App Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/app-templates.md
For more information on app template, see [App template](https://forms.office.co
## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Integrating Web Apps https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/integrating-web-apps.md
When a team is created, a [SharePoint site collection](https://docs.microsoft.co
## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Shifts Wfm Connectors https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/shifts-wfm-connectors.md
For more information on contribution and suggestion, see [Get it on GitHub](http
## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Teams Low Code Solutions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/teams-low-code-solutions.md
Virtual Assistant is a Microsoft open-source template that enables you to create
## See also -- [Integrate web apps](~/samples/integrate-web-apps-overview.md)
+[Integrate web apps](~/samples/integrate-web-apps-overview.md)
platform Tabs Mobile https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs-mobile.md
keywords: teams design guidelines reference framework personal apps mobile tabs
# Tabs on mobile
-> [!NOTE]
-> If you choose to have your channel/group tab appear on Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property (see below).
-
-Custom tabs can be part of a channel, group chat, or personal app (apps that contain static tabs and/or a one-to-one bot).
-
-Personal apps are available on mobile clients in the app drawer. The app can only be installed from a desktop or web client, and can take up to 24 hours to appear on mobile clients. Alternatively, you can enforce a reload on the mobile client by signing out and in. This should make the mobile app available right away.
-
-Channel tabs are also available on mobile. The default behavior is currently to use your `websiteUrl` to launch your tab in a browser window. However, they can be loaded on a mobile client by clicking the `...` overflow menu next to the tab and choosing **Open**, which will use your `contentUrl` to load the tab inside the Teams mobile client.
+You can include tabs in Teams mobile channels, chats, and personal apps.
## Accessing personal tabs
-The following illustration shows how you access a personal tab on mobile.
+You can access personal tabs in the app drawer.
:::image type="content" source="../../assets/images/tabs/mobile-app-drawer.png" alt-text="Illustration showing the Teams mobile app drawer." border="false"::: ## Accessing channel tabs
-The following illustration shows how you access a channel tab on mobile.
+You can access channel and group tabs by selecting the **More** button in the channel or chat in which they've been added.
:::image type="content" source="../../assets/images/tabs/mobile-tab.png" alt-text="Illustration showing a Teams mobile tab." border="false":::
Fields are areas where users can input text. Flyouts are more lightweight than d
When you're building an app that includes a tab, you need to consider (and test) how your tab will function on both the Android and iOS Microsoft Teams clients. The sections below outline some of the key scenarios you need to consider.
-### Testing on mobile clients
-
-You need to validate that your tab functions properly on mobile devices of various sizes and qualities. For Android devices, you can use the [DevTools](~/tabs/how-to/developer-tools.md) to debug your tab while it is running. We recommend that you test on both high and low performing devices, as well as on a tablet.
- ### Authentication For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.
Mobile clients regularly need to function with low bandwidth and intermittent co
> [!NOTE] > Tabs are enabled on mobile only after the application is added to an allow list, based on the input of the approval team.
-> To check mobile responsiveness, reach out to teamsubm@microsoft.com.
+> To check mobile responsiveness, reach out to teamsubm@microsoft.com.
+
+### Testing on mobile clients
+
+You need to validate that your tab functions properly on mobile devices of various sizes and qualities. For Android devices, you can use the [DevTools](~/tabs/how-to/developer-tools.md) to debug your tab while it is running. We recommend that you test on both high and low performing devices, as well as on a tablet.
+
+### Distribution
+
+Apps listed on the Teams store must be approved for mobile use to function properly in the Teams mobile client. How tabs behave depends on whether your app is approved.
+
+#### Channel and group tab behavior
+
+* **Behavior when approved**: Opens in the Teams mobile client using your app's `contentUrl` configuration.
+* **Behavior when not approved**: Opens in the deviceΓÇÖs default browser using your app's `websiteUrl` configuration (which also must be included in your source code's `setSettings()` function). However, users can still load 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 behavior
+
+* **Behavior when approved**: Each tab in the personal app displays in the Teams mobile client using their respective `contentUrl` configuration.
+* **Behavior when not approved**: The personal app is unavailable in the Teams mobile client.
+
+#### Non-Teams store app behavior
+
+If you're sideloading your app or publishing to an org's app catalog, tab behavior will be the same as Teams store apps approved by Microsoft for mobile.
platform Using Teams Client Sdk https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/using-teams-client-sdk.md
The SDK is helpful for developing apps with any of the following Teams capabilit
* [Tabs](../../tabs/what-are-tabs.md) * [Task modules](../../task-modules-and-cards/what-are-task-modules.md)
-For example, the SDK can make your [tab react to theme changes](../../build-your-first-app/build-personal-tab.md#3-update-the-tab-theme) your users make in the Teams client.
+For example, the SDK can make your [tab react to theme changes](../../build-your-first-app/build-personal-tab.md) your users make in the Teams client.
## Getting started Do one of the following depending on your development preferences:
-* [Install the SDK with npm or Yarn](https://docs.microsoft.com/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true)
-* [Clone the SDK (GitHub)](https://github.com/OfficeDev/microsoft-teams-library-js)
+
+* [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](https://docs.microsoft.com/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
platform Cards Format https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-format.md
To include a mention in an Adaptive Card your app needs to include the following
Use the information masking property to mask specific information, such as password or sensitive information from users within the Adaptive card [`Input.Text`](https://adaptivecards.io/explorer/Input.Text.html) input element. > [!NOTE]
-> The feature only supports client side information masking, the masked input text is sent as clear text to the https endpoint address that was specified during [bot configuration](../../build-your-first-app/build-bot.md#4-configure-your-bot).
+> The feature only supports client side information masking, the masked input text is sent as clear text to the https endpoint address that was specified during [bot configuration](../../build-your-first-app/build-bot.md).
> [!NOTE] > The information masking property is currently available in the developer preview only.