Updates from: 06/03/2022 01:22:13
Service Microsoft Docs article Related commit history on GitHub Change details
platform Teams Live Share Quick Start https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-quick-start.md
Get started with Live Share SDK using the Dice Roller sample. This get started i
## Set up your development environment
-To get started, install the following:
+To get started, install:
* [Node.js](https://nodejs.org/en/download): The Live Share SDK supports Node.js LTS versions 12.17 and later. * [Latest version of Visual Studio Code](https://code.visualstudio.com/).
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/post-publish/overview.md
Ensure the following when publishing updates:
### App updates requiring user consent
-When a user installs your app, they must give the app permission to access the services and information the app requires to function. In most cases, users must do this once and new versions of your app install automatically.
+When a user installs your app, they must give the app permission to access the services and information the app requires to function. In most cases, users must do this once and new version of your app install automatically.
If you make any of the following changes to your app, however, your existing users must accept another permission request to install the update: * Add or remove a bot.
platform Azure Bot Channels Registration https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/bots/azure-bot-channels-registration.md
1. In the [Microsoft Azure portal](https://ms.portal.azure.com/#home), under Azure services, select **Create a resource**.
-1. In the search box enter "bot". And in the drop-down list, select **Bot Channels Registration**.
+1. In the search box, enter "bot". And in the drop-down list, select **Bot Channels Registration**.
1. Select the **Create** button. 1. In the **Bot Channel Registration** blade, provide the requested information about your bot.
-1. Leave the **Messaging endpoint** box empty for now, you will enter the required URL after deploying the bot. The following picture shows an example of the registration settings:
+1. Leave the **Messaging endpoint** box empty for now, you'll enter the required URL after deploying the bot. The following picture shows an example of the registration settings:
![bot app channels registration](../../assets/images/authentication/auth-bot-channels-registration.png)
-1. Click **Microsoft App ID and password** and then **Create New**.
+1. Select **Microsoft App ID and password** and then **Create New**.
![Create Microsoft App ID](../../assets/images/authentication/CreateMicrosoftAppID.png) ![Create New Microsoft App ID](../../assets/images/authentication/CreateNewMicrosoftAppID.png)
-1. Click **Create App ID in the App Registration Portal** link.
+1. Select **Create App ID in the App Registration Portal** link.
![App Registrations](../../assets/images/authentication/AppRegistration.png)
-1. In the displayed **App registration** window, click the **New registration** tab in the upper left.
-1. Enter the name of the bot application you are registering, we used *BotTeamsAuth* (you need to select your own unique name).
-1. For the **Supported account types** select *Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)*.
-1. Click the **Register** button. Once completed, Azure displays the *Overview* page for the application.
+1. In the displayed **App registration** window, select the **New registration** tab in the upper left.
+1. Enter the name of the bot application you're registering, we used *BotTeamsAuth* (you need to select your own unique name).
+1. For the **Supported account types**, select *Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)*.
+1. Select the **Register** button. Once completed, Azure displays the *Overview* page for the application.
1. Copy and save to a file the **Application (client) ID** value.
-1. In the left panel, click **Certificate and secrets**.
- 1. Under *Client secrets*, click **New client secret**.
+1. In the left panel, select **Certificate and secrets**.
+ 1. Under *Client secrets*, select **New client secret**.
1. Add a description to identify this secret from others you might need to create for this app. 1. Set *Expires* to your selection.
- 1. Click **Add**.
+ 1. Select **Add**.
1. Copy the client secret and save it to a file. 1. Go back to the **Bot Channel Registration** window and copy the *App ID* and the *Client secret* in the **Microsoft App ID** and **Password** boxes, respectively.
-1. Click **OK**.
-1. Finally, click **Create**.
+1. Select **OK**.
+1. Finally, select **Create**.
-After Azure has created the registration resource it will be included in the resource group list.
+After Azure has created the registration resource, it will be included in the resource group list.
![bot app channels registration group](~/assets/images/authentication/auth-bot-channels-registration-group.PNG) Once your bot channels registration is created, you'll need to enable the Teams channel.
-1. In the [Azure portal](https://ms.portal.azure.com/#home), under Azure services, select the **Bot Channel Registration** you just created.
+1. In the [Azure portal](https://ms.portal.azure.com/#home), under Azure services, select the **Bot Channel Registration** you created.
1. In the left panel, select **Channels**. 1. Select the Microsoft Teams icon, then choose **Save**.
platform Azure Provisioning Instructions Tab https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions-tab.md
## Deploy your app to Azure
-Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you will deploy the tab app.
+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the tab app.
<br> <br> <details> <summary>What's the difference between Provision and Deploy?</summary> <br>
-The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It is common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it is separate from the deployment step.
+The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it's separate from the deployment step.
</details> <br>
Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool
:::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsg.png" alt-text="Screenshot showing the provisioning complete dialog." border="false":::
- If you want you can view the provisioned resources. For this tutorial, you don't need to view resources.
+ If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources.
The provisioned resource appears in the **Environment** section.
Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool
1. Select **Deploy to the Cloud** from the **Deployment** panel after provisioning is complete.
- :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing the where to click to deploy to cloud." border="false":::
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud." border="false":::
As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice.
platform Azure Provisioning Instructions https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions.md
## Deploy your app to Azure
-Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you will deploy the tab app.
+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the tab app.
<br> <br> <details> <summary>What's the difference between Provision and Deploy?</summary> <br>
-The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It is common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it is separate from the deployment step.
+The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it's separate from the deployment step.
</details> <br>
Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool
:::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot showing the provisioning complete dialog." border="false":::
- If you want you can view the provisioned resources. For this tutorial, you don't need to view resources.
+ If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources.
The provisioned resource appears in the **Environment** section.
Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool
1. Select **Deploy to the Cloud** from the **Deployment** panel after provisioning is complete.
- :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing the where to click to deploy to cloud." border="false":::
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud." border="false":::
As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice.
platform Get Started Use App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/get-started-use-app-studio.md
Complete the following steps to update the app package:
[13:39:27] Finished 'default' after 62 ╬╝s ```
- The name of the generated app package is `helloworldapp.zip`. You can search for this file if the location is not clear in the tool you are using.
+ The name of the generated app package is `helloworldapp.zip`. You can search for this file if the location isn't clear in the tool you're using.
1. Now to modify this app package, select **Import an existing app** in the **Manifest editor**:
Complete the following steps to update the app package:
<img width="450px" alt="Importing the app package" src="~/assets/images/get-started/Importinganapp2.png"/>
- On the left-hand side of the Manifest editor there is a list of steps. On the right-hand side there is a list of properties that need to be filled in for each step. As you started with a sample app, much of the information is already completed. The next steps enable you to update the properties of the Hello World app.
+ On the left-hand side of the Manifest editor, there's a list of steps. On the right-hand side, there's a list of properties that need to be filled in for each step. As you started with a sample app, much of the information is already completed. The next steps enable you to update the properties of the Hello World app.
#### App details
Select **App details** under **Details**. Select the **Generate** button to crea
Your new App ID is similar to `2322041b-72bf-459d-b107-f4f335bc35bd`.
-Go through the app details in the right-hand pane including **Developer information** and **Branding** details. These details are important if you are writing a new app for distribution.
+Go through the app details in the right-hand pane including **Developer information** and **Branding** details. These details are important if you're writing a new app for distribution.
#### Tabs
-It is simple to add tabs to a Teams app. The sample app already supports several tabs, and you can enable them.
+It's simple to add tabs to a Teams app. The sample app already supports several tabs, and you can enable them.
##### Team tab
Replace `yourteamsapp.ngrok.io` by the URL that you used when hosting your app.
#### Bots
-It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft:
+It's easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft:
<img width="450px" alt="Adding a bot" src="~/assets/images/get-started/Bots.png"/>
-The bot that was imported from the sample does not have an associated App ID. You must create a new bot so that App Studio can create a new App ID and register it with Microsoft.
+The bot that was imported from the sample doesn't have an associated App ID. You must create a new bot so that App Studio can create a new App ID and register it with Microsoft.
> [!NOTE] > The App ID created by App Studio for the bot is different from the App ID created for the app. Each bot in an app requires its own App ID.
After entering the details of your app, complete the following steps to register
1. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing. 1. Select the **Install** button at the bottom of the dialog box.
- Your app is now available in Teams. However, the bot and the message extension will not work until you update the hosted applications environment with the App IDs and passwords.
+ Your app is now available in Teams. However, the bot and the message extension won't work until you update the hosted applications environment with the App IDs and passwords.
<img width="450px" alt="The finished app" src="~/assets/images/get-started/Finishedhelloworld.png"/>
platform Messaging Extension Command Schema https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/messaging-extension-command-schema.md
| `id` | Unique ID that you assign to this command. The user request will include this ID. | Yes | 1.0 | | `title` | Command name. This value appears in the UI. | Yes | 1.0 | | `description` | Help text indicating what this command does. This value appears in the UI. | Yes | 1.0 |
-| `type` | Set the type of command. Possible values include `query` and `action`. If not present the default value is set to `query` | No | 1.4 |
+| `type` | Set the type of command. Possible values include `query` and `action`. If not, present the default value is set to `query` | No | 1.4 |
| `initialRun` | Optional parameter, used with `query` commands. If set to **true**, indicates this command should be executed as soon as the user chooses this command in the UI. | No | 1.0 |
-| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the task module. This is used when the inputs to the `action` command is dynamic as opposed to a static set of parameters. Note that the if set to **true** the static parameter list for the command is ignored | No | 1.4 |
+| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the task module. This is used when the input to the `action` command is dynamic as opposed to a static set of parameters. Note that if set to **true** the static parameter list for the command is ignored | No | 1.4 |
| `parameters` | Static list of parameters for the command. | Yes | 1.0 | | `parameter.name` | The name of the parameter. This is sent to your service in the user request. | Yes | 1.0 | | `parameter.description` | Describes this parameterΓÇÖs purposes or example of the value that should be provided. This value appears in the UI. | Yes | 1.0 |
platform Messaging Extensions Common https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/messaging-extensions/messaging-extensions-common.md
A message extension is a cloud-hosted service that listens to user requests and
If you havenΓÇÖt done so already, you must first register a bot with the Microsoft Bot Framework. The Microsoft app ID and callback endpoints for your bot, as defined there, will be used in your message extension to receive and respond to user requests. Remember to enable the Microsoft Teams channel for your bot.
-Record your bot app ID and app password, you will need to supply the app ID in your app manifest.
+Record your bot app ID and app password, you'll need to supply the app ID in your app manifest.
### Update your app manifest
As with bots and tabs, you update the [manifest](~/resources/schema/manifest-sch
#### Declare your message extension
-To add a message extension, include a new top-level JSON structure in your manifest with the `composeExtensions` property. Currently, you are limited to creating a single message extension for your app.
+To add a message extension, include a new top-level JSON structure in your manifest with the `composeExtensions` property. Currently, you're limited to creating a single message extension for your app.
> [!NOTE] > The manifest refers to message extensions as `composeExtensions`. This is to maintain backward compatibility.
The extension definition is an object that has the following structure:
| `botId` | The unique Microsoft app ID for the bot as registered with the Bot Framework. This should typically be the same as the ID for your overall Teams app. | Yes | | `scopes` | Array declaring whether this extension can be added to `personal` or `team` scopes (or both). | Yes | | `canUpdateConfiguration` | Enables **Settings** menu item. | No |
-| `commands` | Array of commands that this message extension supports. You are limited to 10 commands. | Yes |
+| `commands` | Array of commands that this message extension supports. You're limited to 10 commands. | Yes |
#### Define commands
In the app manifest, your command item is an object with the following structure
| `id` | Unique ID that you assign to this command. The user request will include this ID. | Yes | 1.0 | | `title` | Command name. This value appears in the UI. | Yes | 1.0 | | `description` | Help text indicating what this command does. This value appears in the UI. | Yes | 1.0 |
-| `type` | Set the type of command. Possible values include `query` and `action`. If not present the default value is set to `query`. | No | 1.4 |
+| `type` | Set the type of command. Possible values include `query` and `action`. If not, present the default value is set to `query`. | No | 1.4 |
| `initialRun` | Optional parameter, used with `query` commands. If set to **true**, indicates this command should be executed as soon as the user chooses this command in the UI. | No | 1.0 |
-| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the [task module](~/task-modules-and-cards/what-are-task-modules.md). This is used when the inputs to the `action` command is dynamic as opposed to a static set of parameters. Note that the if set to **true** the static parameter list for the command is ignored. | No | 1.4 |
+| `fetchTask` | Optional parameter, used with `action` commands. Set to **true** to fetch the adaptive card or web url to display within the [task module](~/task-modules-and-cards/what-are-task-modules.md). This is used when the input to the `action` command is dynamic as opposed to a static set of parameters. Note that if set to **true** the static parameter list for the command is ignored. | No | 1.4 |
| `parameters` | Static list of parameters for the command. | Yes | 1.0 | | `parameter.name` | The name of the parameter. This is sent to your service in the user request. | Yes | 1.0 | | `parameter.description` | Describes this parameterΓÇÖs purposes or example of the value that should be provided. This value appears in the UI. | Yes | 1.0 |
platform Dotnet Core Prereq https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-core-prereq.md
## Prerequisites -- To complete this quickstart you'll need a Microsoft 365 tenant and a team configured with *Allow uploading custom apps* enabled. To learn more, see [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).
+- To complete this quickstart, you'll need a Microsoft 365 tenant and a team configured with *Allow uploading custom apps* enabled. To learn more, see [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).
- If you don't currently have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/microsoft-365/dev-program). The subscription will remain active as long as you're using it for ongoing development. -- You'll use App Studio to import your application to Teams. To install App Studio select **Apps** ![Store App](~/assets/images/tab-images/storeApp.png) at the bottom-left corner of the Teams app, and search for App Studio. Once you find the tile, select it and choose install in the pop-up window dialog box.
+- You'll use App Studio to import your application to Teams. To install App Studio, select **Apps** ![Store App](~/assets/images/tab-images/storeApp.png) at the bottom-left corner of the Teams app, and search for App Studio. Once you find the tile, select it and choose install in the pop-up window dialog box.
In addition, this project requires that you have the following installed in your development environment:
platform Dotnet Ngrok Intro https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-ngrok-intro.md
## Establish a secure tunnel to your tab
-Microsoft Teams is a cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams does not allow local hosting. You must either publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL.
+Microsoft Teams is a cloud-based product and requires that your tab content available from the cloud using HTTPS endpoints. Teams doesn't allow local hosting. You must either publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL.
To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it.
platform Dotnet Personal Use Appstudio https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-personal-use-appstudio.md
**To upload your tab with App Studio**
-1. Go to Microsoft Teams. If you use the [web based version](https://teams.microsoft.com) you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
+1. Go to Microsoft Teams. If you use the [web based version](https://teams.microsoft.com), you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
1. Go to **App Studio** and select the **Manifest editor** tab.
-1. Select **Import an existing app** in the **Manifest editor** to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is `tab.zip`. It is available from the following path:
+1. Select **Import an existing app** in the **Manifest editor** to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is `tab.zip`. It's available from the following path:
```bash /bin/Debug/netcoreapp2.2/tab.zip
### Update your app package with Manifest editor
-After you have uploaded your app package into App Studio, you must configure it.
+After you've uploaded your app package into App Studio, you must configure it.
Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.
-There is a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that must have values for each of those steps. Much of the information has been provided by your `manifest.json` but there are fields that you must update.
+There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that must have values for each of those steps. Much of the information has been provided by your `manifest.json` but there are fields that you must update.
#### Details: App details
platform Dotnet Update Personal App https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-update-personal-app.md
### _Layout.cshtml
-For your tab to display in Teams, you must include the **Microsoft Teams JavaScript client SDK** and include a call to `microsoftTeams.initialize()` after your page loads. This is how your tab and the Teams app communicate:
+For your tab to display in Teams, you must include the **Microsoft Teams JavaScript client SDK** and include a call to `microsoftTeams.initialize()` after your page loads.
+
+Your tab and the Teams app communicate as shown below:
Go to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tags section:
platform Dotnet Upload To Teams https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-upload-to-teams.md
>[!NOTE] > We use App Studio to edit your `manifest.json` file and upload the completed package to Teams. You can also manually edit the `manifest.json` file if you prefer. If you do, be sure to build the solution again to create the `tab.zip` file to upload. -- Open the Microsoft Teams client. If you use the [web based version](https://teams.microsoft.com) you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
+- Open the Microsoft Teams client. If you use the [web based version](https://teams.microsoft.com), you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
- Open the App Studio app and select the **Manifest editor** tab.
In the *App* details section:
- Under *Developer information* update the **Website URL** field with your *ngrok* HTTPS URL. -- Under *App URLs* update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.
+- Under *App URLs*, update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>.
#### Capabilities: Tabs In the *Tabs* section: -- Under *Team Tab* select **Add**.
+- Under *Team Tab*, select **Add**.
-- In the Team tab pop-up window update the *Configuration URL* to `https://<yourngrokurl>/tab`.
+- In the Team tab pop-up window, update the *Configuration URL* to `https://<yourngrokurl>/tab`.
- Finally, make sure the *can update configuration? Team*, and *Group chat* boxes are checked and select **Save**.
In the *Test and distribute* section:
- Select **Install**. -- In the pop-up window's *Add to a team or chat* field enter your team and select **Install**.
+- In the pop-up window's *Add to a team or chat* field, enter your team and select **Install**.
-- In the next pop-up window choose the team channel where you would like the tab displayed and select **Set up**.
+- In the next pop-up window, choose the team channel where you would like the tab displayed and select **Set up**.
-- In the final pop-up window select a value for the tab page (either a red or gray icon) and select **Save**.
+- In the final pop-up window, select a value for the tab page (either a red or gray icon) and select **Save**.
To view your tab, navigate to the team you installed it on, and select it from the tab bar. The page that you chose during configuration should be displayed.
platform Node Js Yeoman Prereq https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/node-js-yeoman-prereq.md
You must have an understanding of the following prerequisites:
- You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).
- - If you do not currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription remains active as long as you are using it for ongoing development. See [welcome to the Office 365 Developer Program](/office/developer-program/microsoft-365-developer-program).
+ - 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 remains active as long as you're using it for ongoing development. See [welcome to the Office 365 Developer Program](/office/developer-program/microsoft-365-developer-program).
In addition, this project requires that you have the following installed in your development environment:
In addition, this project requires that you have the following installed in your
**The URL where you will host this solution?**
- By default the generator suggests an Azure Web Sites URL. You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.
+ By default the generator suggests an Azure Web Sites URL. You'll only be testing your app locally, therefore, a valid URL isn't necessary to complete this quickstart.
**Would you like show a loading indicator when your app/tab loads?**
platform Add Authentication https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/add-authentication.md
As with other embedded experiences running inside Microsoft Teams, your code ins
When the sign in request completes and redirects back to your page, it must perform the following steps:
-1. Generate a security code, a random number. You must cache this code on your service, along with the credentials obtained through the sign-in flow, such as OAuth 2.0 tokens.
+1. Generate a security code, a random number. You must cache this code on your service, with the credentials obtained through the sign-in flow, such as OAuth 2.0 tokens.
1. Call `microsoftTeams.authentication.notifySuccess` and pass the security code. At this point, the window closes and the control is passed to the Teams client. The client now reissues the original user query, along with the security code in the `state` property. Your code can use the security code to look up the credentials stored earlier to complete the authentication sequence and then complete the user request.
platform Teamsfx CLI https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-CLI.md
You can use interactive mode to create a Teams app. The following list provides
## `teamsfx add`
-The following table lists diffetent features to your Teams application along with their descrition.
+The following table lists different features to your Teams application along with their description.
| Command | Description | |:- |:-|
The following table lists diffetent features to your Teams application along wit
## `teamsfx account`
-The following table lists the cloud service accounts,such as Azure and Microsoft 365.
+The following table lists the cloud service accounts, such as Azure and Microsoft 365.
| Command | Description | |:- |:-|
Provision the cloud resources in the current application.
|`--env`| Yes| Select an environment for the project. | |`--subscription`| No | Specify an Azure Subscription ID. | |`--resource-group`| No | Set the name of an existing resource group. |
-|`--sql-admin-name`| No | Applicable when there is SQL resource in the project. Admin name of SQL.|
-|`--sql-password`| No| Applicable when there is SQL resource in the project. Admin password of SQL.|
+|`--sql-admin-name`| No | Applicable when there's SQL resource in the project. Admin name of SQL.|
+|`--sql-password`| No| Applicable when there's SQL resource in the project. Admin password of SQL.|
## `teamsfx deploy`
This command is used to deploy the current application. By default it deploys en
| Parameter | Requirement | Description | |:- |:-|:-| |`--env`| Yes| Select an existing environment for the project. |
-|`--open-api-document`| No | Applicable when there is APIM resource in the project. The open API document file path. |
-|`--api-prefix`| No | Applicable when there is APIM resource in the project. The API name prefix. The default unique name of the API is `{api-prefix}-{resource-suffix}-{api-version}`. |
-|`--api-version`| No | Applicable when there is APIM resource in the project. The API version. |
+|`--open-api-document`| No | Applicable when there's APIM resource in the project. The open API document file path. |
+|`--api-prefix`| No | Applicable when there's APIM resource in the project. The API name prefix. The default unique name of the API is `{api-prefix}-{resource-suffix}-{api-version}`. |
+|`--api-version`| No | Applicable when there's APIM resource in the project. The API version. |
|`--include-app-manifest`| No | Whether to deploy app manifest to Teams platform. Options are `yes` and `not`. The default value is `no`. | |`--include-aad-manifest`| No | Whether to deploy aad manifest. Options are `yes` and `not`. The default value is `no`. |
The configuration data is either in user scope or project scope.
| Parameter | Requirement | Description | |:- |:-|:-| |`--env`| Yes | Select an existing environment for the project. |
-|`--folder`| No | Project directory. This is used for get or set project configuration. The default value is `./`. |
-|`--global`| No | Cope of configuration. If this is true, the scope is limited to user scope instead of project scope. The default value is `false`. At present, the supported global configurations include `telemetry`, `validate-dotnet-sdk`, `validate-func-core-tools`, `validate-node`. |
+|`--folder`| No | Project directory used for get or set project configuration. The default value is `./`. |
+|`--global`| No | Cope of configuration. If true, the scope is limited to user scope instead of project scope. The default value is `false`. Now, the supported global configurations include `telemetry`, `validate-dotnet-sdk`, `validate-func-core-tools`, `validate-node`. |
### Scenarios for `teamsfx config`
The secrets in `.userdata` file are encrypted, `teamsfx config` and can help you
* Disable environment checker
- There are three configuration to turn on or off Node.js, .NET SDK and Azure Functions Core Tools validation, and all of them are enabled by default. You can set the configuration to "off" if you don't need the dependencies validation and want to install the dependencies by yourself. Check the following guides:
+ There are three configurations to turn on or off Node.js, .NET SDK and Azure Functions Core Tools validation, and all of them are enabled by default. You can set the configuration to "off" if you don't need the dependencies validation and want to install the dependencies by yourself. Check the following guides:
* [Node.js installation guide](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-nodejs) * [.NET SDK installation guide](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-net-sdk)
The following list provides required permissions for `TeamsFx` projects:
* Show Permission Status
- Project creator and collaborators can use `teamsfx permission status` command to view his Microsoft 365 account permission for specific env:
+ Project creator and collaborators can use `teamsfx permission status` command to view Microsoft 365 account permission for specific env:
```bash teamsfx permission status --env dev
platform Visual Studio Code Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/visual-studio-code-overview.md
You also can use the toolkit with Visual Studio or as a CLI (called `teamsfx`).
You also can find the Teams Toolkit on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).
-The following tools are installed by the Visual Studio Code extension when they are needed. If already installed, the installed version is used instead. If using Linux (including WSL), you must install these tools before use:
+The following tools are installed by the Visual Studio Code extension when they're needed. If already installed, the installed version is used instead. If using Linux (including WSL), you must install these tools before use:
- [Azure Functions Core Tools](/azure/azure-functions/functions-run-local)
- Azure Functions Core Tools is used to run any backend components locally during a local debug run, including the authentication helpers required when running your services in Azure. It is installed within the project directory using the npm `devDependencies`.
+ Azure Functions Core Tools is used to run any backend components locally during a local debug run, including the authentication helpers required when running your services in Azure. It's installed within the project directory using the npm `devDependencies`.
- [.NET SDK](/dotnet/core/install/)
- The .NET SDK is used to install customized bindings for local debugging and Azure Functions app deployments. If you have not installed the .NET 3.1 or later SDK globally, the portable version is installed.
+ The .NET SDK is used to install customized bindings for local debugging and Azure Functions app deployments. If you haven't installed the .NET 3.1 or later SDK globally, the portable version is installed.
- [ngrok](https://ngrok.com/download)
- Some Teams app features (conversational bots, messaging extensions, and incoming webhooks) require inbound connections. You need to expose your development system to Teams through a tunnel. A tunnel is not required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).
+ Some Teams app features (conversational bots, messaging extensions, and incoming webhooks) require inbound connections. You need to expose your development system to Teams through a tunnel. A tunnel isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).
## Use the Teams Toolkit for Visual Studio Code
The Teams Toolkit can create React apps that are hosted in Azure or SPFx web par
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
-1. Select a workspace folder. A folder is created within your workspace folder for the project you are creating.
+1. Select a workspace folder. A folder is created within your workspace folder for the project you're creating.
1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
platform Visual Studio Code Tab Sso https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/visual-studio-code-tab-sso.md
The Microsoft Teams Toolkit enables you to create single sign-on (SSO) authentic
1. Enter the URL where your app will be hosted and select **next**. Your app registration will be configured using the provided URL. 1. The app registration's configuration details will be stored in the `.env` files in your project's source code.
-If you would like to learn more about how your Azure app registration will be provisioned, please *see* our [single sign-on (SSO) support for tabs](../tabs/how-to/authentication/auth-aad-sso.md) documentation.
+If you would like to learn more about how your Azure app registration will be provisioned, *see* our [single sign-on (SSO) support for tabs](../tabs/how-to/authentication/auth-aad-sso.md) documentation.
> [!TIP] > You will need to go to **Azure App Registrations** and update your *API URI* and *redirect URLs* whenever you change this URL.
If you would like to learn more about how your Azure app registration will be pr
1. Select **npm install** from the `api-server` folder. Then **npm start**. 1. Select **npm install** from the `.src` folder. Then **npm start**.
-1. If you are using a tunneling service like [ngrok](https://ngrok.com/), run it and make sure the URL matches with what you entered in the project creation wizard. If it doesn't, you will need to update your *API URI* and *redirect URL* in the app registration that was created in Azure.
+1. If you're using a tunneling service like [ngrok](https://ngrok.com/), run it and make sure the URL matches with what you entered in the project creation wizard. If it doesn't, you'll need to update your *API URI* and *redirect URL* in the app registration that was created in Azure.
1. Navigate to the activity bar on the left side of the Visual Studio Code window. 1. Select the **Run** icon to display the **Run and Debug** view. 1. You can also use the keyboard shortcut **Ctrl+Shift+D**.