| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Meeting Apps Apis | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/meeting-apps-apis.md | The following are the TeamsJS v2 responses for Get user context API based on mee "mySitePath": "/personal/admin_m365x94626565_onmicrosoft_com", "mySiteDomain": "m365x94626565-my.sharepoint.com" }- } - - ``` + } ++ ``` # [Instant meeting](#tab/instant-meeting) The following are the TeamsJS v2 responses for Get user context API based on mee "mySitePath": "/personal/admin_m365x654992_onmicrosoft_com", "mySiteDomain": "m365x654992-my.sharepoint.com" }- } + } ``` -- * User type # [Guest user](#tab/guest-user) The following are the TeamsJS v2 responses for Get user context API based on mee The following is a JSON payload response in a scheduled private meeting for a guest user: ```json- { + { "app": { "locale": "en-us", "sessionId": "268beeb4-a52d-4ba8-b1c8-8b9f0b9b3492", The following are the TeamsJS v2 responses for Get user context API based on mee "mySitePath": "/personal/v-prkamble_microsoft_com", "mySiteDomain": "microsoft-my.sharepoint.com" }- } - ``` + } ++ ``` # [Anonymous user](#tab/anonymous-user) The following are the TeamsJS v2 responses for Get user context API based on mee         "id": "MCMxOTptZWV0aW5nX05UWm1OVEkzT0RndE9XWmtPUzAwTmpnekxXSmhOVE10TURobE5qRTVaakF3WVdZeEB0aHJlYWQudjIjMA=="     } }- + ``` # [External user](#tab/external-user) The following are the TeamsJS v2 responses for Get user context API based on mee ``` -- * Call type # [One-on-One call](#tab/one-on-one-call) The following are the TeamsJS v2 responses for Get user context API based on mee ``` -- ## Get participant API The `GetParticipant` API must have a bot registration and ID to generate auth tokens. For more information, see [bot registration and ID](/azure/bot-service/bot-service-quickstart-registration). |
| platform | Teams Together Mode | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-together-mode.md | To build a scene using the Scene studio, follow these steps: The scene can then be viewed in the custom Together Mode scenes gallery. -Optionally, you can select **Share** from the **Save** drop-down menu. You can create a shareable link to distribute your scenes for others to use. The user can open the link to install the scene and start using it. +Optionally, you can select **Share** from the **Save** dropdown menu. You can create a shareable link to distribute your scenes for others to use. The user can open the link to install the scene and start using it. After preview, the scene is shipped as an app to Teams by following the steps for app submission. This step requires the app package. The app package is different from the scene package, for the scene that was designed. The app package created automatically is found in the **Apps** section in the Teams Developer Center. -Optionally, the scene package is retrieved by selecting **Export** from the **Save** drop-down menu. A .zip file that is the scene package is downloaded. Scene package includes a scene.json and the PNG assets used to build a scene. The scene package is reviewed for incorporating other changes: +Optionally, the scene package is retrieved by selecting **Export** from the **Save** dropdown menu. A .zip file that is the scene package is downloaded. Scene package includes a scene.json and the PNG assets used to build a scene. The scene package is reviewed for incorporating other changes: :::image type="content" source="../assets/images/apps-in-meetings/build-a-scene.png" alt-text="Screenshot shows the Export option to export a scene."::: To select scenes and use custom Together Mode scenes, follow these steps: > [!NOTE] > On selecting **Preview** in the Scene studio, the scene is installed as an app in Teams. This is the model for a developer to test and try out scenes from the Scene studio. After a scene is exported and uploaded as a custom app, users can view the scenes in the scene gallery. -1. From the **Gallery** drop-down in the upper-left corner, select **Together Mode**. The **Picker** dialog box appears and the scene that is added is available. +1. From the **Gallery** dropdown in the upper-left corner, select **Together Mode**. The **Picker** dialog box appears and the scene that is added is available. 1. Select **Change scene** to change the default scene. |
| platform | Add Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/add-authentication.md | ms.localizationpriority: high # Add authentication to your Teams bot -You can create bots in Microsoft Teams that access resources on behalf of the user, such as a mail service. You can use Azure Bot Service v4 SDK authentication, based on OAuth 2.0. This makes it easier to develop a bot that can use authentication tokens based on the user's credentials. The key is the use of **identity providers**. +You can create bots in Microsoft Teams that access resources on behalf of the user, such as a mail service. You can use Azure Bot Service v4 SDK authentication, based on OAuth 2.0. This method makes it easier to develop a bot that can use authentication tokens based on the user's credentials. The key is the use of **identity providers**. OAuth 2.0 is an open standard for authentication and authorization used by Microsoft Entra ID and many other identity providers. A basic understanding of OAuth 2.0 is a prerequisite for working with authentication in Teams. In this article you'll learn: - **How to create an authentication-enabled bot**. You'll use [cs-auth-sample][teams-auth-bot-cs] to handle user sign-in credentials and the generating the authentication token. - **How to deploy the bot to Azure and associate it with an identity provider**. The provider issues a token based on user sign-in credentials. The bot can use the token to access resources, such as a mail service, which require authentication. For more information, see [Microsoft Teams authentication flow for bots](auth-flow-bot.md).-- **How to integrate the bot within Microsoft Teams**. Once the bot has been integrated, you can sign in and exchange messages with it in a chat.+- **How to integrate the bot within Microsoft Teams**. Once the bot is integrated, you can sign in and exchange messages with it in a chat. ## Prerequisites You use a resource group to create individual resources for the Bot Framework. F 1. In your browser, sign into the [**Microsoft Azure portal**][azure-portal]. 1. In the left navigation panel, select **Resource groups**.-1. In the upper left of the displayed window, select **Add** tab to create a new resource group. You'll be prompted to provide the following details: +1. In the upper left of the displayed window, select **Add** tab to create a new resource group. Provide the following details: 1. **Subscription**. Use your existing subscription. 1. **Resource group**. Enter the name for the resource group. An example could be *TeamsResourceGroup*. Remember that the name must be unique.- 1. From the **Region** drop-down menu, select *West US*, or a region close to your applications. + 1. From the **Region** dropdown menu, select *West US*, or a region close to your applications. 1. Select the **Review and create** button. You should see a banner that reads *Validation passed*. 1. Select the **Create** button. It may take a few minutes to create the resource group. You use a resource group to create individual resources for the Bot Framework. F 1. In the [**Azure portal**][azure-portal], on the left navigation panel, select **Create a resource**. 1. In the search box, type *App Service Plan*. Select the **App Service Plan** card from the search results. 1. Select **Create**.-1. You'll be asked to provide the following information: +1. Provide the following information: 1. **Subscription**. You can use an existing subscription. 1. **Resource Group**. Select the group you created earlier. 1. **Name**. Enter the name for the service plan. An example could be *TeamsServicePlan*. Remember that the name must be unique, within the group. 1. **Operating System**. Select *Windows* or your applicable OS. 1. **Region**. Select *West US* or a region close to your applications.- 1. **Pricing Tier**. Make sure that *Standard S1* is selected, which is the default value. + 1. **Pricing Tier**. Select *Standard S1*, which is the default value. 1. Select the **Review and create** button. You should see a banner that reads *Validation passed*.- 1. Select **Create**. It may take a few minutes to create the app service plan. The plan will be listed in the resource group. + 1. Select **Create**. It may take a few minutes to create the app service plan. The plan is listed in the resource group. ## Create Azure Bot resource registration The Azure Bot resource registration registers your web service as a bot with the 1. Select your **Resource group** from the dropdown list. 1. Select **Type of App** as **Multi Tenant** for **Microsoft App ID**. - :::image type="content" source="../../../assets/images/adaptive-cards/multi-tenant.png" alt-text="Screenshot shows how to select multi tenant for Microsoft AppID."::: + :::image type="content" source="../../../assets/images/adaptive-cards/multi-tenant.png" alt-text="Screenshot shows how to select multitenant for Microsoft AppID."::: 1. Select **Review + create**. The Azure Bot resource registration registers your web service as a bot with the 1. If the validation passes, select **Create**. - It takes a few moments for your bot service to be provisioned. + Azure provisions your bot in a few moments. :::image type="content" source="../../../assets/images/adaptive-cards/validation-pane.png" alt-text="Screenshot shows how Azure bot validation passes."::: The Azure Bot resource registration registers your web service as a bot with the :::image type="content" source="../../../assets/images/adaptive-cards/go-to-resource-card.png" alt-text="Screenshot shows how to select resources group."::: - Now your Azure bot is created. + Your Azure bot is created. :::image type="content" source="../../../assets/images/adaptive-cards/azure-bot-ui.png" alt-text="Screenshot shows how to create Azure bot resources."::: To add the Microsoft Teams channel: :::image type="content" source="../../../assets/images/adaptive-cards/bot-home-page.png" alt-text="Screenshot shows you the bot home page."::: -1. Open your bot, which is listed in the **Recent resources** section. +1. Open your bot from the **Recent resources** section. 1. Select **Channels** in the left pane and select **Microsoft Teams** :::image type="icon" source="../../../assets/icons/teams-icon.png":::. For more information, see [Create a bot for Teams](../create-a-bot-for-teams.md) ## Create the identity provider -You need an identity provider that can be used for authentication. -In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra ID supported identity providers can also be used. +You need an identity provider for authentication. In this procedure, you use a Microsoft Entra provider. Alternatively, you can also use other Microsoft Entra ID supported identity providers. 1. In the [**Azure portal**][azure-portal], on the left navigation panel, select **Microsoft Entra ID**. > [!TIP] In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra > For instruction on creating a tenant, see [Access the portal and create a tenant](/azure/active-directory/fundamentals/active-directory-access-create-new-tenant). 1. In the left panel, select **App registrations**. 1. In the right panel, select the **New registration** tab, in the upper left.-1. You'll be asked to provide the following information: +1. Provide the following information: 1. **Name**. Enter the name for the application. An example could be *BotTeamsIdentity*. Remember that the name must be unique.- 1. Select the **Supported account types** for your application. Select *Accounts in any organizational directory (Any Microsoft Entra ID - Multitenant) and personal Microsoft accounts (for example, Skype, Xbox)*. + 1. Select the **Supported account types** for your application. Select **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)**. 1. For the **Redirect URI**:<br/> ✓Select **Web**. <br/> ✓ Set the URL to `https://token.botframework.com/.auth/web/redirect`. In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra 1. After it's created, Azure displays the **Overview** page for the app. Copy and save the following information to a file: 1. The **Application (client) ID** value. You'll use this value later as the *Client ID* when you register this Azure identity application with your bot.- 1. The **Directory (tenant) ID** value. You'll also use this value later as the *Tenant ID* to register this Azure identity application with your bot. + 1. The **Directory (tenant) ID** value. You'll use this value later as the *Tenant ID* to register this Azure identity application with your bot. 1. In the left panel, select **Certificates & secrets** to create a client secret for your application. In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra 1. Complete the form as follows: - 1. **Name**. Enter a name for the connection. You'll use this name in your bot in the `appsettings.json` file. For example, *BotTeamsAuthADv1*. - 1. **Service Provider**. Select **Azure Active Directory**. Once you select this, the Azure Active Directory-specific fields will be displayed. - 1. **Client id**. Enter the Application (client) ID that you recorded for your Azure identity provider app in the steps above. - 1. **Client secret**. Enter the secret that you recorded for your Azure identity provider app in the steps above. + 1. **Name**. Enter a name for the connection. You use this name in your bot in the `appsettings.json` file. For example, *BotTeamsAuthADv1*. + 1. **Service Provider**. Select **Azure Active Directory**. Once you select this option, the Azure Active Directory-specific fields are displayed. + 1. **Client id**. Enter the Application (client) ID that you recorded for your Azure identity provider app. + 1. **Client secret**. Enter the secret that you recorded for your Azure identity provider app. 1. **Grant Type**. Enter `authorization_code`. 1. **Login URL**. Enter `https://login.microsoftonline.com`. 1. **Tenant ID**, enter the **Directory (tenant) ID** that you recorded earlier for your Azure identity app or **common** depending on the supported account type selected when you created the identity provider app. To decide which value to assign, follow these criteria: - - If you selected either *Accounts in this organizational directory only (Microsoft only - Single tenant)* or *Accounts in any organizational directory(Microsoft Entra ID - Multi tenant)*, enter the **tenant ID** you recorded earlier for the Microsoft Entra app. This will be the tenant associated with the users who can be authenticated. + - If you selected either **Accounts in this organizational directory only (Microsoft only - Single tenant)** or **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)**, enter the **tenant ID** you recorded earlier for the Microsoft Entra app. This will be the tenant associated with the users who can be authenticated. - - If you selected *Accounts in any organizational directory (Any Microsoft Entra ID - Multi tenant and personal Microsoft accounts, for example, Skype, Xbox, Outlook)* enter the word **common** instead of a tenant ID. Otherwise, the Microsoft Entra app verifies through the tenant whose ID was selected and exclude personal Microsoft accounts. + - If you selected **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)** enter the word **common** instead of a tenant ID. Otherwise, the Microsoft Entra app verifies through the tenant whose ID was selected and exclude personal Microsoft accounts. - h. For **Resource URL**, enter `https://graph.microsoft.com/`. This isn't used in the current code sample. + h. For **Resource URL**, enter `https://graph.microsoft.com/`. This URL isn't used in the current code sample. i. Leave **Scopes** blank. The following image is an example: :::image type="content" source="../../../assets/images/authentication/auth-bot-identity-connection-adv1.PNG" alt-text="Screenshot shows how to add Teams bot auth bot identity connection adv1."::: In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra 1. Complete the form as follows: 1. **Name**. Enter a name for the connection. You'll use this name in your bot in the `appsettings.json` file. For example, *BotTeamsAuthADv2*.- 1. **Service Provider**. Select **Azure Active Directory v2**. Once you select this, the Azure AD v2 specific fields will be displayed. - 1. **Client id**. Enter the Application (client) ID that you recorded for your Azure identity provider app in the steps above. - 1. **Client secret**. Enter the secret that you recorded for your Azure identity provider app in the steps above. + 1. **Service Provider**. Select **Azure Active Directory v2**. Once you select this option, the Azure AD v2 specific fields are displayed. + 1. **Client id**. Enter the Application (client) ID that you recorded for your Azure identity provider app. + 1. **Client secret**. Enter the secret that you recorded for your Azure identity provider app. 1. **Token Exchange URL**. Leave this blank. 1. **Tenant ID**, enter the **Directory (tenant) ID** that you recorded earlier for your Azure identity app or **common** depending on the supported account type selected when you created the identity provider app. To decide which value to assign, follow these criteria: - - If you selected either *Accounts in this organizational directory only (Microsoft only - Single tenant)* or *Accounts in any organizational directory(Microsoft Entra ID - Multi tenant)*, enter the **tenant ID** you recorded earlier for the Microsoft Entra app. This will be the tenant associated with the users who can be authenticated. + - If you selected either **Accounts in this organizational directory only (Microsoft only - Single tenant)** or **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)**, enter the **tenant ID** you recorded earlier for the Microsoft Entra app. This will be the tenant associated with the users who can be authenticated. - - If you selected *Accounts in any organizational directory (Any Microsoft Entra ID - Multi tenant and personal Microsoft accounts, for example, Skype, Xbox, Outlook)* enter the word **common** instead of a tenant ID. Otherwise, the Microsoft Entra app verifies through the tenant whose ID was selected and exclude personal Microsoft accounts. + - If you selected **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)** enter the word **common** instead of a tenant ID. Otherwise, the Microsoft Entra app verifies through the tenant whose ID was selected and exclude personal Microsoft accounts. - 1. For **Scopes**, enter a space-delimited list of graph permissions this application requires for example: User.Read User.ReadBasic.All Mail.Read + 1. For **Scopes**, enter a space-delimited list of graph permissions this application requires, such as *User.Read*, *User.ReadBasic.All*, or *Mail.Read*. 1. Select **Save**. In this procedure, you'll use a Microsoft Entra provider. Other Microsoft Entra 1. Select the connection entry to open the connection you created. 1. Select **Test Connection** at the top of the **Service Provider Connection Setting** panel. 1. For the first time, it opens a new browser window asking you to select an account. Select the one you want to use.-1. Next, you'll be asked to allow to the identity provider to use your data (credentials). The following image is an example: +1. Next, allow to the identity provider to use your data (credentials). The following image is an example: :::image type="content" source="../../../assets/images/authentication/auth-bot-connection-test-accept.PNG" alt-text="The screenshot shows how to add Teams bot auth connection string adv1."::: 1. Select **Accept**.-1. This should then redirect you to a **Test Connection to \<your-connection-name> Succeeded** page. Refresh the page if you get an error. The following image is an example: +1. A **Test Connection to \<your-connection-name> Succeeded** page opens. Refresh the page if you get an error. The following image is an example: :::image type="content" source="../../../assets/images/authentication/auth-bot-connection-test-token.PNG" alt-text="The screenshot shows how to add Teams app auth connection string adv1."::: -The connection name is used by the bot code to retrieve user authentication tokens. +The bot code uses the connection name to retrieve user authentication tokens. ## Prepare the bot sample code To deploy the bot, follow the steps in the How to [Deploy your bot to Azure](/az Alternatively, while in Visual Studio, you can follow these steps: 1. In Visual Studio *Solution Explorer*, select and hold (or right-click) the project name.-1. In the drop-down menu, select **Publish**. +1. In the dropdown menu, select **Publish**. 1. In the displayed window, select the **New** link.-1. In the dialog window, select **App Service** on the left and **Create New** on the right. +1. In the dialog window, select **App Service** and **Create New**. 1. Select the **Publish** button.-1. In the next dialog window, enter the required information. The following is an example: +1. In the next dialog window, enter the required information. :::image type="content" source="../../../assets/images/authentication/auth-bot-app-service.png" alt-text="Screenshot shows how to enter required information for auth app service."::: 1. Select **Create**.-1. If the deployment completes successfully, you should see it reflected in Visual Studio. A page is displayed in your default browser as *Your bot is ready!*. The URL is similar to this: `https://botteamsauth.azurewebsites.net/`. Save it to a file. +1. If the deployment completes successfully, you should see it reflected in Visual Studio. A page opens in your default browser with the message *Your bot is ready!*. The URL is similar to `https://botteamsauth.azurewebsites.net/`. Save it to a file. 1. In your browser, go to the [**Azure portal**][azure-portal].-1. Check your resource group, the bot should be listed along with the other resources. The following image is an example: +1. Check your resource group, the bot is listed along with the other resources. The following image is an example: :::image type="content" source="../../../assets/images/authentication/auth-bot-app-service-in-group.png" alt-text="Screenshot shows how to check resource group and bot."::: 1. In the resource group, select the bot registration name (link). 1. In the left panel, select **Settings**.-1. In the **Messaging endpoint** box, enter the URL obtained above followed by `api/messages`. This is an example: `https://botteamsauth.azurewebsites.net/api/messages`. +1. In the **Messaging endpoint** box, enter the URL you just obtained followed by `api/messages`. For example, `https://botteamsauth.azurewebsites.net/api/messages`. > [!NOTE] > Only one messaging endpoint is allowed for a bot. 1. Select the **Save** button in the upper left. Alternatively, while in Visual Studio, you can follow these steps: If you haven't done it already, install the [Microsoft Bot Framework Emulator](https://aka.ms/bot-framework-emulator-readme). See also [Debug with the Emulator](/azure/bot-service/bot-service-debug-emulator?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true). -In order for the bot sample login to work you must configure the Emulator. +In order for the bot sample sign-in to work, you must configure the Emulator. ### Configure the Emulator for authentication After you've configured the authentication mechanism, you can perform the actual 1. Select **Connect**. 1. After the bot is up and running, enter any text to display the sign-in card. 1. Select the **Sign in** button.-1. A pop-up dialog is displayed to **Confirm Open URL** to allow the bot's user (you) to be authenticated. +1. A pop-up dialog appears to **Confirm Open URL** to authenticate the bot's user (you). 1. Select **Confirm**. 1. If asked, select the applicable user's account.-1. Depending which configuration you used for the Emulator, you get one of the following: +1. Depending which configuration you used for the Emulator, you get one of the following options: 1. **Using sign-in verification code** - ✓ A window is opened displaying the validation code. + ✓ A window opens displaying the validation code. ✓ Copy and enter the validation code into the chat box to complete the sign-in. 1. **Using authentication tokens**. - ✓ You're logged in based on your credentials. + ✓ You're signed in based on your credentials. The following image is an example of the bot UI after you've logged in: :::image type="content" source="../../../assets/images/authentication/auth-bot-login-emulator.PNG" alt-text="Screenshot shows an example of the bot UI after you've logged in."::: -1. If you select **Yes** when the bot asks *Would you like to view your token?* you'll get a following response: +1. If you select **Yes** when the bot asks *Would you like to view your token?*, you get the following response: :::image type="content" source="../../../assets/images/authentication/auth-bot-login-emulator-token.png" alt-text="Screenshot shows how to select the consent."::: and when for these, and just reference that from here, along with the set of ste 1. In the resource page, select **Test in Web Chat**. The bot starts and displays the predefined greetings. 1. Type anything in the chat box. 1. Select the **Sign in** box.-1. A pop-up dialog is displayed to **Confirm Open URL** to allow the bot's user (you) to be authenticated. +1. A pop-up dialog appears to **Confirm Open URL** to authenticate the bot's user (you). 1. Select **Confirm**. 1. If asked, select the applicable user's account. The following image is an example of the bot UI after you've logged in: and when for these, and just reference that from here, along with the set of ste 1. Enter **logout** in the input chat box to sign out. - :::image type="content" source="../../../assets/images/authentication/auth-bot-deployed-logout.PNG" alt-text="Screenshot shows how to enter logout to sign out."::: + :::image type="content" source="../../../assets/images/authentication/auth-bot-deployed-logout.PNG" alt-text="Screenshot shows how to sign out of the bot."::: > [!NOTE] > If you're having problems signing in, try to test the connection again as described in the previous steps. This could recreate the authentication token. This manifest contains information needed by Teams to connect with the bot: } ``` -With authentication, Teams behaves slightly differently than other channels, as explained below. +With authentication, Teams behaves slightly differently than other channels. ### Handling Invoke Activity -An **Invoke Activity** is sent to the bot rather than the Event Activity used by other channels, which is done by sub-classing the **ActivityHandler**. +An **Invoke Activity** is sent to the bot rather than the Event Activity used by other channels, which is done by subclassing the **ActivityHandler**. # [C#/.NET](#tab/dotnet-sample) |
| platform | Bot Sso Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/bot-sso-overview.md | Now, let's see what happens at the backend during runtime to achieve SSO experie ## SSO in Teams at runtime -Achieve SSO in a bot or message extension app by obtaining access token for the Teams app user who's currently signed in. This process involves the bot app client and server, Teams client, Bot Framework, and Microsoft Entra ID. During this interaction, the app user must give consent to obtain the access token in a multi-tenant environment. +Achieve SSO in a bot or message extension app by obtaining access token for the Teams app user who's currently signed in. This process involves the bot app client and server, Teams client, Bot Framework, and Microsoft Entra ID. During this interaction, the app user must give consent to obtain the access token in a multitenant environment. The following image shows how SSO works when a Teams app user attempts to access the bot or message extension app: |
| platform | Create A Bot Commands Menu | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/create-a-bot-commands-menu.md | -To define a set of core commands that your bot can respond to, you can add a command menu with a drop-down list of commands for your bot. The list of commands is presented to the users in the compose message area when they are in conversation with your bot. Select a command from the list to insert the command string into the compose message box and select **Send**. +To define a set of core commands that your bot can respond to, you can add a command menu with a dropdown list of commands for your bot. The list of commands is presented to the users in the compose message area when they are in conversation with your bot. Select a command from the list to insert the command string into the compose message box and select **Send**. # [Desktop](#tab/desktop) |
| platform | App Structure | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/app-structure.md | |
| platform | Design Teams App Fundamentals | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-fundamentals.md | description: Learn about the basics of designing your Microsoft Teams app, inclu ms.localizationpriority: medium Previously updated : 07/26/2022 Last updated : 01/07/2024 # Microsoft Teams app design system |
| platform | Design Teams App Process | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-process.md | description: Learn how and when you might use Microsoft tools and resources to d ms.localizationpriority: medium Previously updated : 06/28/2022 Last updated : 01/07/2024 # Design process for Microsoft Teams apps |
| platform | Glossary | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/glossary.md | Common terms and definitions used in Microsoft Teams developer documentation. | [Microsoft Teams UI Toolkit](../concepts/design/design-teams-app-ui-templates.md#microsoft-teams-ui-library) | Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. | | Microsoft Store | It's a digital distribution platform operated by Microsoft. it's also known as Windows Store. <br> **See also**: [Teams Store](#t) | | [Monetization](../concepts/deploy-and-publish/appsource/prepare/monetize-overview.md)| Teams Store provides features that enable you to monetize your apps and gain customers by engaging with your users. <br> **See also**: [SaaS](#s)|-| [Multi-tenant app](../tabs/how-to/authentication/tab-sso-register-aad.md) | A class of applications that enables sign-in and consent by users provisioned in any Microsoft Entra tenant, including tenants other than the one where the client app is registered. <br> **See also**: [Single-tenant apps](#s) | +| [Multitenant app](../tabs/how-to/authentication/tab-sso-register-aad.md) | A class of applications that enables sign-in and consent by users provisioned in any Microsoft Entra tenant, including tenants other than the one where the client app is registered. <br> **See also**: [Single-tenant apps](#s) | ## N Common terms and definitions used in Microsoft Teams developer documentation. | [SharePoint site collection](../sbs-gs-spfx.yml) | A collection site for SharePoint apps. You need to have an administrator account for this site before you can deploy your SPFx-based app on the SharePoint site. <br>**See also**: [SPFx](#s) | | [Short description](../concepts/deploy-and-publish/appsource/prepare/submission-checklist.md#short-description) | A concise summary of your app that must be original, engaging, and directed at your target audience. <br> **See also**: [Long description](#l)| | [SidePanel](../sbs-meetings-sidepanel.yml) | A feature of Teams meeting app that enables you to customize experiences in a meeting that allow organizers and presenters to have different set of views and actions. |-| [Single-tenant app](../tabs/how-to/authentication/tab-sso-register-aad.md) | Single-tenant apps are only available in the tenant they were registered in, also known as their home tenant. <br> **See also**: [Multi-tenant apps](#m) | +| [Single-tenant app](../tabs/how-to/authentication/tab-sso-register-aad.md) | Single-tenant apps are only available in the tenant they were registered in, also known as their home tenant. <br> **See also**: [Multitenant apps](#m) | | [SPFx](../sbs-gs-spfx.yml) | SharePoint Framework (SPFx) is a development model to build client-side solutions for Microsoft Teams, Office Add-ins, and SharePoint. | | [SSO](../concepts/authentication/authentication.md) | Acronym for single sign-on, an authentication method in which a user needs to sign in to an independent service of a software platform (such as Microsoft 365) only once. The user is then able to access all services without having to go through authentication again. <br>**See also**: [Authentication](#a); [Scope](#s) | | [Static tab](../concepts/design/personal-apps.md) | See [Personal tab](#p) | Common terms and definitions used in Microsoft Teams developer documentation. | [Teams Mobile](../concepts/design/plan-responsive-tabs-for-teams-mobile.md) | Microsoft Teams available as a mobile app. | | [Microsoft Teams Store](../concepts/deploy-and-publish/appsource/publish.md) | A Teams Store landing page that brings apps to users in a single place. The apps are categorized by usage, industry, and more. An app must follow Teams Store validation guidelines and obtain an approval before it's available to users via the Teams Store. <br>**See also**: [Teams Store validation guidelines](#s); [Microsoft Store](#m) | | [Teams workbench](../sbs-gs-spfx.yml) | A workbench in VS Code used at build for Teams apps created using SPFx and Teams Toolkit. <br>**See also**: [Workbench](#w); [Local workbench](#l) |-| [Tenant ID](../bots/how-to/authentication/bot-sso-register-aad.md) | The unique identifier of the tenant where your app is registered in Microsoft Entra admin center. Your app may be classified as a single-tenant or a multi-tenant app. <br> **See also**: [Single-tenant app](#s); [Multi-tenant apps](#m) | +| [Tenant ID](../bots/how-to/authentication/bot-sso-register-aad.md) | The unique identifier of the tenant where your app is registered in Microsoft Entra admin center. Your app may be classified as a single-tenant or a multitenant app. <br> **See also**: [Single-tenant app](#s); [Multitenant apps](#m) | | [Terms of use](../concepts/deploy-and-publish/appsource/common-reasons-for-app-validation-failure.md#terms-of-use) | These terms of use govern your access to and use of Azure Marketplace, AppSource, and any Microsoft owned or operated online storefronts that point to offers cataloged by Azure Marketplace or AppSource. Your offer listing must include a valid Terms of use link. Offers with invalid, unsecured, and broken Terms of use links fail app review.| | [Token exchange URL](../bots/how-to/authentication/bot-sso-register-aad.md) | It's the application ID URI that is used for exchanging token. It's configured while configuring the OAuth connection for bot resource. <br> **See also**: [Application ID URI](#u); [SSO](#s) | | [TokenExchangeResource property](../bots/how-to/authentication/bot-sso-code.md) | It's a property of `OAuthCard` class that gets or sets the resource to try to perform token exchange with. Teams refreshes the token if the `TokenExchangeResource` property is populated on the card. <br> **See also**: [OAuth card](#o); [SSO](#s) <br> For more information, see [Microsoft Bot Schema 4.0](/dotnet/api/microsoft.bot.schema.oauthcard) | |
| platform | Azure Bot Channels Registration | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/bots/azure-bot-channels-registration.md | Last updated 06/02/2022 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 dropdown 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. In **Bot Channel Registration**, provide the requested information about your bot. 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:  Last updated 06/02/2022 1. Select **Microsoft App ID and password** and then **Create New**. -  +  1. Select **Create App ID in the App Registration Portal** link. - + 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 Microsoft Entra directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)*. Last updated 06/02/2022 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 creates the registration resource, it's included in the resource group list.  -Once your bot channels registration is created, you'll need to enable the Teams channel. +After Azure creates your bot channels registration, enable the Teams channel. 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**. |
| platform | Azure Provisioning Instructions Bot | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions-bot.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'll deploy the bot app. +Deployment consists of two steps. First, Azure creates necessary cloud resources (also known as provisioning). Then, Azure copies your app's code into the created cloud resources. For this tutorial, you'll deploy the bot 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'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. +The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but doesn't copy code (HTML, CSS, or JavaScript) 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 The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice: - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot shows a notice which displays hellomsg successfully provisioned in the cloud."::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot shows a notice, which displays hellomsg successfully provisioned in the cloud."::: If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources. In your terminal window: Once the provisioning and deployment steps are complete: 1. Open the debug panel (**Ctrl+Shift+D** / **⌘⇧-D** or **View > Run**) from Visual Studio Code.-1. Select **Launch Remote (Edge)** from the launch configuration drop-down. -1. Select the **Start debugging (F5)**. You'll be prompted to sideload the bot app onto Teams. +1. Select **Launch Remote (Edge)** from the launch configuration dropdown. +1. Select the **Start debugging (F5)**. You're prompted to sideload the bot app onto Teams. :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot shows the debug and launch app remotely."::: Once the provisioning and deployment steps are complete: :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/add-mex-app.png" alt-text="Screenshot shows the app being installed in different scopes."::: - You've successfully added your bot app to the Teams client. + You successfully added your bot app to the Teams client. :::image type="content" source="~/assets/images/teams-toolkit-v2/first-bot/bot-app-learn-local-debug.png" alt-text="Screenshot shows the learn card in the bot on Teams client."::: |
| 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 | Your app can only have one Team tab: <img width="450px" alt="Adding a Teams tab" src="~/assets/images/get-started/TeamTab.png"/> -In this sample, the Team tab is where your configuration page is displayed. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` must be replaced with the URL that you used when hosting your app. +In this sample, the Team tab is where your configuration page is displayed. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the dropdown menu. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` must be replaced with the URL that you used when hosting your app. ##### Personal tabs Your app can have up to 16 tabs, including the Team tab. -Personal tabs are different from the Team tab. **Hello Tab** is already listed in the personal tabs list with a placeholder value `com.contoso.helloworld.hellotab`. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. The following dialog box appears: +Personal tabs are different from the Team tab. **Hello Tab** is already listed in the personal tabs list with a placeholder value `com.contoso.helloworld.hellotab`. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the dropdown menu. The following dialog box appears: <img width="450px" alt="Adding a personal tab dialog" src="~/assets/images/get-started/PersonalTab.png"/> Complete the following steps to setup your message extension: 1. Select **Delete** to remove the message extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Message Extension** dialog box is displayed. 1. Select the **Use existing bot** tab and **Select from one of my existing bots**.-1. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box. +1. Select the bot you created from the dropdown menu. Add a **Bot name** and select **Save** to close the dialog box. 1. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option. 1. In the **New command** dialog box, enter the following values: |
| platform | Dotnet Update Chan Grp App | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-update-chan-grp-app.md | In Visual Studio, press **F5** or choose **Start Debugging** from the **Debug** **To upload your tab** -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 here: +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 here: ```bash /bin/Debug/netcoreapp2.2/tab.zip In Visual Studio, press **F5** or choose **Start Debugging** from the **Debug** ### Update your app package with Manifest editor -After you have uploaded your app package into App Studio, you must finish configuring it. +After uploading your app package into App Studio, you must finish configuring 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 a few fields that you must update: +There's a list of steps on the left side of the Manifest editor, and on the right side, a list of properties that must have values for each of those steps. Much of the information is provided by your `manifest.json` but there are a few fields that you must update: #### Details: App details In the **Domains and permissions** section, **Domains from your tabs** must cont 1. In the **Test and Distribute** section, select **Install**. -1. In the pop-up dialog box, select **Add to a team** or from the drop-down, select **Add to a chat**. +1. In the pop-up dialog box, select **Add to a team** or from the dropdown, select **Add to a chat**. 1. Choose the team or chat where you want the tab to be displayed and select **Set up a tab**. In the **Domains and permissions** section, **Domains from your tabs** must cont 1. To view your tab, go to the team where you installed the tab, and select it from the tab bar. The page that you chose during configuration is displayed. - |
| platform | Publish | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/publish.md | Title: Publish Teams apps for Microsoft 365 -description: Learn how to make your Microsoft 365-enabled Teams apps discoverable to users in Teams, Outlook, and Microsoft 365 app through single tenant and multi tenant distribution. +description: Learn how to make your Microsoft 365-enabled Teams apps discoverable to users in Teams, Outlook, and Microsoft 365 app through single tenant and multitenant distribution. Last updated 10/10/2022 The [Microsoft commercial marketplace](https://appsource.microsoft.com/) (Micros > [!TIP] > Use Teams Developer Portal to [validate your app package](https://dev.teams.microsoft.com/validation) to resolve any errors or warnings before submitting it to the Teams Store (through [Microsoft Partner Network](https://partner.microsoft.com/)). -See the following video to learn more about multi tenant apps: +See the following video to learn more about multitenant apps: > [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RWZb0O] |
| platform | Teamsjs Support M365 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/teamsjs-support-m365.md | Later in this article, you can find more information on each capability of the T ## `app` -[Reference](/javascript/api/@microsoft/teams-js/app) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/App.css) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+app) +[Reference](/javascript/api/@microsoft/teams-js/app) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+app) Namespace to interact with app initialization and lifecycle. The `app` namespace is supported globally across all application hosts and, ther ## `appInitialization` -[Reference](/javascript/api/@microsoft/teams-js/appInitialization) [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/AppInstallDialog.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+appInitialization) +[Reference](/javascript/api/@microsoft/teams-js/appInitialization) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+appInitialization) Deprecated. Namespace for initializing an app. For new apps, use [app.initialize()](/javascript/api/@microsoft/teams-js/app#@microsoft-teams-js-app-initialize) from the [app](#app) capability. Deprecated. Namespace for initializing an app. For new apps, use [app.initialize ## `appInstallDialog` -[Reference](/javascript/api/@microsoft/teams-js/appinstalldialog) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/AppInstallDialog.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+appInstallDialog) +[Reference](/javascript/api/@microsoft/teams-js/appinstalldialog) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+appInstallDialog) Namespace used to open a dialog for installing an application. Namespace providing calendar-related functionality. ## `call` -[Reference](/javascript/api/@microsoft/teams-js/call) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Call.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+call) +[Reference](/javascript/api/@microsoft/teams-js/call) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+call) Namespace providing functionality to start a call with others. Namespace providing functionality to start a call with others. ## `chat` -[Reference](/javascript/api/@microsoft/teams-js/chat) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Chat.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+chat) +[Reference](/javascript/api/@microsoft/teams-js/chat) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+chat) Preview. Namespace providing functionality to start a chat with others. Preview. Namespace providing functionality to start a chat with others. ## `clipboard` -[Reference](/javascript/api/@microsoft/teams-js/dialog) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.Url.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog) +[Reference](/javascript/api/@microsoft/teams-js/clipboard) Preview. This capability enables users to copy and paste to the system clipboard. Preview. This capability enables users to copy and paste to the system clipboard ## `dialog` -[Reference](/javascript/api/@microsoft/teams-js/dialog) +[Reference](/javascript/api/@microsoft/teams-js/dialog) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog) Preview. This group of capabilities enables apps to show modal dialogs (referred as task modules in TeamsJS v1.x). There are two primary types of dialogs: URL-based dialogs and Adaptive Card dialogs. Both types of dialogs are shown on top of your app, preventing interaction with your app while they're displayed. Preview. This group of capabilities enables apps to show modal dialogs (referred ### `dialog.adaptiveCard` -[Reference](/javascript/api/@microsoft/teams-js/dialog.adaptivecard) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.AdaptiveCard.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.adaptiveCard) +[Reference](/javascript/api/@microsoft/teams-js/dialog.adaptivecard) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.adaptiveCard) Preview. Subcapability for interacting with Adaptive Card dialogs. ### `dialog.adaptiveCard.bot` -[Reference](/javascript/api/@microsoft/teams-js/dialog.adaptivecard.bot) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.AdaptiveCard.Bot.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.adaptiveCard.bot) +[Reference](/javascript/api/@microsoft/teams-js/dialog.adaptivecard.bot) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.adaptiveCard.bot) Preview. Subcapability for interaction with Adaptive Card dialogs that need to communicate with the Bot Framework. ### `dialog.update` -[Reference](/javascript/api/@microsoft/teams-js/dialog.update) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.Update.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.update) +[Reference](/javascript/api/@microsoft/teams-js/dialog.update) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.update) Preview. Namespace for updating dialogs. ### `dialog.url` -[Reference](/javascript/api/@microsoft/teams-js/dialog.url) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.Url.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.url) +[Reference](/javascript/api/@microsoft/teams-js/dialog.url) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.url) Preview. Subcapability for interacting with HTML-based dialogs. ### `dialog.url.bot` -[Reference](/javascript/api/@microsoft/teams-js/dialog.url.bot) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Dialog.Url.Bot.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.url.bot) +[Reference](/javascript/api/@microsoft/teams-js/dialog.url.bot) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+dialog.url.bot) Preview. Subcapability for interacting with HTML-based dialogs that need to communicate with the Bot Framework. ## `geoLocation` -[Reference](/javascript/api/@microsoft/teams-js/geolocation) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/GeoLocation.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+geoLocation) +[Reference](/javascript/api/@microsoft/teams-js/geolocation) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+geoLocation) Preview. Namespace providing location-related functionality. This is the newer version of the location module. When an API doesn't support or generates an error, add logic to fail or provide ### `geoLocation.map` -[Reference](/javascript/api/@microsoft/teams-js/geolocation.map) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/GeoLocation.map.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+geoLocation.map) +[Reference](/javascript/api/@microsoft/teams-js/geolocation.map) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+geoLocation.map) Preview. Subcapability providing map-related functionality. Namespace providing in-meeting app functionality. ## `menus` -[Reference](/javascript/api/@microsoft/teams-js/menus) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Menus.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+menus) +[Reference](/javascript/api/@microsoft/teams-js/menus) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+menus) Namespace to interact with the menu-related part of the library. This module is used to show *View Configuration*, *Action Menu*, and *Navigation Bar Menu*. Namespace to interact with the menu-related part of the library. This module is ## `pages` -[Reference](/javascript/api/@microsoft/teams-js/pages) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Pages.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages) +[Reference](/javascript/api/@microsoft/teams-js/pages) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages) Navigation-related part of the TeamsJS library. Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha ### `pages.appButton` -[Reference](/javascript/api/@microsoft/teams-js/pages.appbutton) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Pages.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.appButton) +[Reference](/javascript/api/@microsoft/teams-js/pages.appbutton) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.appButton) Provides APIs to interact with the app button part of the SDK. ### `pages.backStack` -[Reference](/javascript/api/@microsoft/teams-js/pages.backstack) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/pagesSubCapability/NavigateBack.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.backStack) +[Reference](/javascript/api/@microsoft/teams-js/pages.backstack) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.backStack) Provides APIs for handling the user's navigational history. Provides APIs to interact with the configuration-specific part of the SDK. This ### `pages.currentApp` -[Reference](/javascript/api/@microsoft/teams-js/pages.currentapp) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Pages.Current.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.currentApp) +[Reference](/javascript/api/@microsoft/teams-js/pages.currentapp) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+pages.currentApp) Provides functions for navigating without needing to specify your application ID. Provides APIs for querying and navigating between contextual tabs of an applicat ## `people` -[Reference](/javascript/api/@microsoft/teams-js/people) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/People.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+people) +[Reference](/javascript/api/@microsoft/teams-js/people) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+people) Namespace providing functionality for [People Picker API](../concepts/device-capabilities/people-picker-capability.md). Deprecated. Provides settings-related functionality. Use equivalent APIs from th ## `sharing` -[Reference](/javascript/api/@microsoft/teams-js/sharing) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Sharing.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+sharing) +[Reference](/javascript/api/@microsoft/teams-js/sharing) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+sharing) Namespace to open a share dialog for web content. For more information, see [Share to Teams from personal app or tab](../concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md). Namespace to open a share dialog for web content. For more information, see [Sha ## `stageView` -[Reference](/javascript/api/@microsoft/teams-js/stageview) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/StageView.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+stageView) +[Reference](/javascript/api/@microsoft/teams-js/stageview) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+stageView) Preview. Namespace to interact with the Stage View specific part of the library. The earlier version of the capability for providing modal dialogs (referred as t ## `teamsCore` -[Reference](/javascript/api/@microsoft/teams-js/teamscore) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/TeamsCore.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+teamsCore) +[Reference](/javascript/api/@microsoft/teams-js/teamscore) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+teamsCore) Namespace containing the set of APIs that support Teams-specific functionalities. Namespace containing the set of APIs that support Teams-specific functionalities ## `video` -[Reference](/javascript/api/@microsoft/teams-js/videoeffects) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/Video.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+video) +[Reference](/javascript/api/@microsoft/teams-js/videoeffects) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+video) Preview. Namespace representing functionality for in-meeting video effects. Preview. Namespace representing functionality for in-meeting video effects. ## `webStorage` -[Reference](/javascript/api/@microsoft/teams-js/webstorage) | [Sample](https://github.com/vikramtha/microsoft-teams-library-js/blob/vikramtha/teamsjs-cc-app/apps/teams-cc-app/src/components/capabilities/WebStorage.tsx) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+webStorage) +[Reference](/javascript/api/@microsoft/teams-js/webstorage) | [Known issues](https://github.com/OfficeDev/microsoft-teams-library-js/issues?q=is%3Aissue+webStorage) Preview. Contains functionality to allow web apps to store data in webview cache. |
| platform | High Quality Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/high-quality-message-extension.md | Last updated 11/14/2023 > [!IMPORTANT] > > * Plugins for Microsoft Copilot for Microsoft 365 are in preview and only work in Microsoft 365 Chat in Microsoft Teams.-> Ensure that Copilot for Microsoft 365 is available for your organization. You have two ways to get a developer environment for Copilot: +> * Ensure that Copilot for Microsoft 365 is available for your organization. You have two ways to get a developer environment for Copilot: > * A sandbox Microsoft 365 tenant with Copilot (available in limited preview through [TAP membership](https://developer.microsoft.com/microsoft-365/tap)). > * An enterprise customer production environment with Microsoft Copilot for Microsoft 365 licenses. Message extensions respond to a user input with an Adaptive Card. An Adaptive Ca * Adaptive Card response must include Adaptive Card content and preview card information as part of the same template. [*Mandatory*] - :::image type="content" source="../assets/images/Copilot/validation-guidelines-app-response-copilot.png" alt-text="Screenshot shows an example of a sample app showing M365 Chat app response contains Preview and Content in the same response. "::: + :::image type="content" source="../assets/images/Copilot/validation-guidelines-app-response-copilot.png" alt-text="Screenshot shows an example of a sample app showing M365 Chat app response contains Preview and Content in the same response." lightbox="../assets/images/Copilot/validation-guidelines-app-response-copilot-ext.png"::: <details><summary>Adaptive Card response example</summary> |
| platform | Link Unfurling | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/link-unfurling.md | -The document guides you on how to add link unfurling to your app manifest using Developer Portal and manually. With link unfurling, your app can register to receive an `invoke` activity when URLs with a particular domain are pasted into the compose message area. The `invoke` contains the full URL that was pasted into the compose message area, and you can respond with a card that the user can unfurl, providing additional information or actions. This works similar to a search command with the URL serving as the search term. You can now add link unfurling to Microsoft Teams without installing the app. +The document guides you on how to add link unfurling to your app manifest using Developer Portal and manually. With link unfurling, your app can register to receive an invoke activity when URLs with a particular domain are pasted into the compose message area. The `invoke` contains the full URL that was pasted into the compose message area, and you can respond with a card that the user can unfurl, providing additional information or actions. This works similar to a search command with the URL serving as the search term. You can now add link unfurling to Microsoft Teams without installing the app. :::image type="content" source="../../assets/images/tdp/link-unfurling-adaptive-cards1.png" alt-text="Screenshot shows the link unfurling experience for a Teams app installed or not installed in Teams and other apps." lightbox="../../assets/images/tdp/link-unfurling-adaptive-cards1.png"::: For a complete manifest example, see [manifest reference](~/resources/schema/man ## Handle the `composeExtensions/queryLink` invoke -After adding the domain to the app manifest, you must update your web service code to handle the invoke request. Use the received URL to search your service and create a card response. If you respond with more than one card, only the first card response is used. +After adding the domain to the app manifest, you must update your web service code to handle the `invoke` request. Use the received URL to search your service and create a card response. If you respond with more than one card, only the first card response is used. > [!Note] > The response from a bot must include a `preview` property. contentType: "application/vnd.microsoft.card.thumbnail", ## Zero install for link unfurling -Zero install link unfurling helps you unfurl previews for your shared links even before a user discovers or installs your app in Teams. You can anonymously unfurl cards with a new invoke request or create a preauthenticated Adaptive Card preview for users before they install or authenticate your app. +Zero install link unfurling helps you unfurl previews for your shared links even before a user discovers or installs your app in Teams. You can anonymously unfurl cards with a new `invoke` request or create a preauthenticated Adaptive Card preview for users before they install or authenticate your app. The following image provides a sequential flow to enable and use zero install link unfurling: To get your app ready for zero install link unfurling, follow these steps: 1. Set the property `supportsAnonymizedPayloads` to true in the [manifest schema](../../resources/schem#composeextensions). -1. Set your app to handle the new invoke request `composeExtensions/anonymousQueryLink`. +1. Set your app to handle the new `invoke` request `composeExtensions/anonymousQueryLink`. - Example of the new invoke request: + Example of the new `invoke` request: - :::image type="content" source="../../assets/images/tdp/link-unfurl_1.png" alt-text="Screenshot of the invoke request `composeExtensions/anonymousQueryLink` declaration in the manifest." lightbox="../../assets/images/tdp/link-unfurl_1.png"::: + :::image type="content" source="../../assets/images/tdp/link-unfurl_1.png" alt-text="Screenshot of the `invoke` request `composeExtensions/anonymousQueryLink` declaration in the manifest." lightbox="../../assets/images/tdp/link-unfurl_1.png"::: - Example of the invoke request payload: + Example of the `invoke` request payload: ```json { To test zero install link unfurling, follow these steps: 1. Select **Open** to upload the zip file for your test application. -1. After you've successfully uploaded the app, Go to **Teams** > **Apps** > **Built for your org**. +1. After app upload is successful, go to **Teams** > **Apps** > **Built for your org**. :::image type="content" source="../../assets/images/teams-link-unfurling/build-for-your-org.png" alt-text="Screenshot of Teams client with org uploaded Teams app"::: To test zero install link unfurling, follow these steps: ## Remove link unfurling cache -When a user shares a link in a meeting, the Teams app unfurls the link to an Adaptive Card. The link unfurling result is cached in Teams for 30 minutes. You can update your app to set a cache policy and remove cache for the app, which helps you to show different content in an Adaptive Card when the app's link is shared in a different context in Teams. +When a user shares a link in a meeting, the Teams app unfurls the link to an Adaptive Card. The link unfurling result is cached in Teams for 30 minutes. You can update your app to set a cache policy and remove cache for the app. This action helps you to show different content in an Adaptive Card when the app's link is shared in a different context in Teams. To remove link unfurling cache, update your bot with the `type` as `setcachepolicy` under the `suggestedActions` property. Teams doesn't cache the results for the app links with the `"type": "setCachePolicy"`. |
| platform | Removal Page | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/removal-page.md | Your `manifest.json` defines your tab's features and capabilities. The tab insta |||||| |`canUpdateConfiguration`|Boolean|||A value indicating whether an instance of the tab's configuration can be updated by the user after creation. Default is `true`. | -When your tab is uploaded to a channel or group chat, Teams adds a right-click drop-down menu for your tab. The available options are determined by the `canUpdateConfiguration` setting. The following table provides the setting details: +When your tab is uploaded to a channel or group chat, Teams adds a right-click dropdown menu for your tab. The available options are determined by the `canUpdateConfiguration` setting. The following table provides the setting details: | `canUpdateConfiguration`| true | false | description | | -- | :-: | -- | -- | The following is a sample tab removal code block: *** -When a user selects **Remove** from the tab's drop-down menu, Teams loads the optional `removeUrl` page assigned in your **configuration page**, into an iFrame. The user is shown a button loaded with the `onClick()` function that calls `pages.config.setValidityState(true)` and enables the **Remove** button shown at the bottom of the removal page iFrame. +When a user selects **Remove** from the tab's dropdown menu, Teams loads the optional `removeUrl` page assigned in your **configuration page**, into an iFrame. The user is shown a button loaded with the `onClick()` function that calls `pages.config.setValidityState(true)` and enables the **Remove** button shown at the bottom of the removal page iFrame. After the remove handler is executed, `removeEvent.notifySuccess()` or `removeEvent.notifyFailure()` notifies Teams of the content removal outcome. |
| platform | Enable Sso For Your Adaptive Cards Universal Action | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/enable-sso-for-your-adaptive-cards-universal-action.md | Before you enable SSO for your Adaptive Cards Universal Actions, ensure that you ## SSO in Teams at runtime -SSO for Adaptive Cards Universal Actions in a bot can be enabled by obtaining access token for the Teams app user who's currently signed in. This process involves the bot app client and server, Teams client, Bot Framework, and Microsoft Entra ID. During this interaction, the app user must give consent to obtain the access token in a multi-tenant environment. +SSO for Adaptive Cards Universal Actions in a bot can be enabled by obtaining access token for the Teams app user who's currently signed in. This process involves the bot app client and server, Teams client, Bot Framework, and Microsoft Entra ID. During this interaction, the app user must give consent to obtain the access token in a multitenant environment. The following image shows how SSO works when a Teams app user attempts to access the Adaptive Cards Universal Actions in a bot: |
| platform | Teamsfx Preview And Customize App Manifest | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-preview-and-customize-app-manifest.md | In `manifest.template.json`, you can go to CodeLens to preview the values for `l > [!NOTE] > Provision the environment or execute local debug to generate values for placeholders. -You can go to state file or configuration file by selecting the CodeLens, which provides a drop down list with all the environment names. After selecting one environment, the corresponding state file or configuration file opens. +You can go to state file or configuration file by selecting the CodeLens, which provides a dropdown list with all the environment names. After selecting one environment, the corresponding state file or configuration file opens. :::image type="content" source="toolkit-v4/images/select-environment-v4.png" alt-text="Screenshot is an example of showing the selection of an environment."::: |
| platform | Add Single Sign On | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-single-sign-on.md | You can perform the following steps to add SSO using Teams Toolkit in Visual Stu |Develop Single Sign-on Experience in Teams | [How to Develop Single Sign-on Experience](https://github.com/OfficeDev/TeamsFx/wiki/Develop-single-sign-on-experience-in-Teams) | > [!NOTE]-> When SSO is enabled, Teams Toolkit by default provisions a single-tenant Microsoft Entra app, which means only user and guest accounts in the same directory as your M365 account can sign in to your Teams app. For more information on supporting multi-tenant to update your TeamsFx project, see [Multi-tenancy support for Microsoft Entra app](https://github.com/OfficeDev/TeamsFx/wiki/Multi-tenancy-Support-for-Azure-AD-app). +> When SSO is enabled, Teams Toolkit by default provisions a single-tenant Microsoft Entra app, which means only user and guest accounts in the same directory as your M365 account can sign in to your Teams app. For more information on supporting multitenant to update your TeamsFx project, see [Multi-tenancy support for Microsoft Entra app](https://github.com/OfficeDev/TeamsFx/wiki/Multi-tenancy-Support-for-Azure-AD-app). ## See also |
| platform | Debug Local | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-local.md | The following steps help you set up your Teams Toolkit before you initiate the d # [Windows](#tab/Windows) -1. Select **Debug in Teams (Edge)** or **Debug in Teams (Chrome)** from the **RUN AND DEBUG Γû╖** drop down. +1. Select **Debug in Teams (Edge)** or **Debug in Teams (Chrome)** from the **RUN AND DEBUG Γû╖** dropdown. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Screenshot shows the Browser option."::: Toolkit launches a new Microsoft Edge or Chrome browser instance based on your s # [macOS](#tab/macOS) -1. Select **Debug in Teams (Edge)** or **Debug in Teams (Chrome)** from the **RUN AND DEBUG Γû╖** drop down. +1. Select **Debug in Teams (Edge)** or **Debug in Teams (Chrome)** from the **RUN AND DEBUG Γû╖** dropdown. :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Screenshot shows the Browser lists."::: The following steps help you set up your Teams Toolkit before you initiate the d # [Windows](#tab/Windows) -1. Select **Debug (Edge)** or **Debug (Chrome)** from the **RUN AND DEBUG Γû╖** drop down. +1. Select **Debug (Edge)** or **Debug (Chrome)** from the **RUN AND DEBUG Γû╖** dropdown. :::image type="content" source="toolkit-v4/images/debug-run-v4.png" alt-text="Browser option"::: Toolkit launches a new Microsoft Edge or Chrome browser instance based on your s # [macOS](#tab/macOS) -1. Select **Debug Edge** or **Debug Chrome** from the **RUN AND DEBUG Γû╖** drop down. +1. Select **Debug Edge** or **Debug Chrome** from the **RUN AND DEBUG Γû╖** dropdown. :::image type="content" source="toolkit-v4/images/debug-run-v4.png" alt-text="Browser lists"::: |
| platform | Debug Overview Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-overview-vs.md | Select **Hot Reload** to apply your changes in your Teams app when you want to u :::image type="content" source="images/vs-localdebug-hot-reload-v4.png" alt-text="Select hot reload icon"::: -Select the option **Hot Reload on File Save** from the drop-down to enable auto hot reload. +Select the option **Hot Reload on File Save** from the dropdown to enable auto hot reload. :::image type="content" source="images/vs-localdebug-hot-reload-filesave-v4.png" alt-text="Select hot reload on file save"::: |
| platform | Use CICD Template | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/use-CICD-template.md | Two categories of sign in credentials are involved in CI/CD workflows: |AZURE_TENANT_ID |To identify the tenant in which the subscription resides.| |M365_ACCOUNT_NAME |The Microsoft 365 account for creating and publishing the Teams App.| |M365_ACCOUNT_PASSWORD |The password of the Microsoft 365 account.|-|M365_TENANT_ID |To identify the tenant in which the Teams App gets created or published. This value is optional unless you have a multi-tenant account and you want to use another tenant. Read more on how to find your Microsoft 365 tenant ID.| +|M365_TENANT_ID |To identify the tenant in which the Teams App gets created or published. This value is optional unless you have a multitenant account and you want to use another tenant. Read more on how to find your Microsoft 365 tenant ID.| > [!NOTE] > |