Updates from: 03/27/2021 04:18:31
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
export class MyBot extends TeamsActivityHandler {
constructor() { super(); this.onMessage(async (context, next) => {
- TeamsMeetingParticipant participant = GetMeetingParticipantAsync(turnContext, "yourMeetingId", "yourParticipantId", "yourTenantId");
+ TeamsMeetingParticipant participant = getMeetingParticipant(turnContext, "yourMeetingId", "yourParticipantId", "yourTenantId");
let member = participant.user; let meetingInfo = participant.meeting; let conversation = participant.conversation;
The post-meeting and pre-meeting configurations are equivalent.
|Sample name | Description | C# | |-|--|--|
-| Content bubble | Demonstrates how to implement content bubble in-meeting experience. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) |
-| Meeting app | Demonstrates how to use the Meeting Token Generator app to request a token, which is generated sequentially so that each participant has a fair opportunity to interact. This can be useful in situations like scrum meetings, Q&A sessions, and so on. | [View](https://github.com/OfficeDev/microsoft-teams-sample-meetings-token) |
+| Meetings extensibility | Microsoft Teams meeting extensibility sample for passing tokens. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/csharp) |
+| Meeting content bubble bot | Microsoft Teams meeting extensibility sample for interacting with content bubble bot in a meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) |
## See also
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
keywords: teams apps meetings user participant role api
# Apps in Teams meetings
-Meetings are key to productivity in Teams. They enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. As a developer, you can create [configurable tab](../tabs/what-are-tabs.md#how-do-tabs-work), [bot](../bots/what-are-bots.md), and [message extension](../messaging-extensions/what-are-messaging-extensions.md) applications to enhance and enrich a Teams meeting experience. Meeting users can access apps, via the tab gallery, to enable relevant scenarios such as pre-staging a Kanban board, launching an in-meeting actionable dialog, or creating a post-meeting poll. Your meeting app can deliver a user experience for each stage of the meeting lifecycle based upon attendee status.
+Meetings enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. The meeting app can deliver a user experience for each stage of the meeting lifecycle including pre-meeting, in-meeting and post-meeting app experience, depending on the attendee's status.
-TeamsΓÇÖ meeting app extensibility centers on three concepts:
+Teams end-users can access apps during meetings using the tab gallery, for example:
-Γ£ö **Meeting lifecycle** ΓÇö before, during, and after meeting time frame.
-Γ£ö **Participant role** ΓÇö meeting organizer, presenter, or attendee.
-Γ£ö **User type** ΓÇö in-tenant, guest, federated, or anonymous Teams user.
+* Pre-stage a Kanban board
+* Launch an in-meeting actionable dialog
+* Create a post-meeting poll
-<!-- markdownlint-disable MD001 -->
-### Meeting lifecycle scenarios
+TeamsΓÇÖ meeting app extensibility is based on the following concepts:
-## Tabs
+Γ£ö Meeting lifecycle has stages such as before, during, and after meeting time frame.
+Γ£ö Participant roles in a meeting such as meeting organizer, presenter, or attendee.
+Γ£ö User types in a meeting such as in-tenant, guest, federated, or anonymous Teams user.
+
+This article covers information about the meeting lifecycle and how to integrate tabs, bots, and messaging extensions in your meeting. It also enables you to identify participant roles and also use different user types to perform tasks.
+
+> [!NOTE]
+> To work with the meeting app extensibility features, you must have the appropriate permissions.
+
+### Meeting lifecycle
+
+Meeting lifecycle consists of pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and messaging extensions in each stage of the meeting lifecycle.
+
+## Integrate tabs into the meeting lifecycle
+
+Tabs allow team members to access services and content in a specific space within a channel or chat. This lets the team work directly with tabs and have conversations about the tools and data available within tabs. In Teams meeting, users can add a tab by selecting plus <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>, and choosing the app that they want to install as a tab.
> [!IMPORTANT]
-> As with all tab applications, Your app will need to follow the Teams [SSO authentication flow](../tabs/how-to/authentication/auth-aad-sso.md) for tabs.
+> If you have integrated a tab with your meeting, then your app must follow the Teams [single sign-on (SSO) authentication flow](../tabs/how-to/authentication/auth-aad-sso.md) for tabs.
> [!NOTE]
-> * Mobile clients support tabs only in pre-meeting and post-meeting surfaces. The in-meeting experiences, such as in-meeting dialog and panel on mobile will be available soon.
+> * Mobile clients support tabs only in pre and post meeting stages. The in-meeting experiences that is in-meeting dialog and panel are currently not available on mobile.
> * Apps are supported only in private scheduled meetings. ### Pre-meeting app experience
TeamsΓÇÖ meeting app extensibility centers on three concepts:
![pre-meeting tab view](../assets/images/apps-in-meetings/PreMeetingTab.png)
-Γ£ö Permissioned users can add apps to a meeting via the tab gallery in two ways:
+Γ£ö Permissioned users are users who can add apps to a meeting during different stages of the meeting lifecycle. These users can add apps to a meeting through the tab gallery in two ways:
-&emsp;&emsp;&#9679; Via the **Details** tab on the Teams scheduling form.
+ * Using the **Details** tab on the Teams scheduling form.
-&emsp;&emsp;&#9679; Via the meeting **Chat** tab in an existing meeting.</br> </br>
+ * Using the meeting **Chat** tab in an existing meeting.
-Γ£ö Tab apps are accessible in meetings **Details** and **Chats** pages using a plus icon (Γ₧ò) button.|
+Γ£ö Tab apps are accessible in meetings **Details** and **Chats** pages using a plus Γ₧ò button.
-Γ£ö Tab layout should be in an organized state if there are more than ten polls or surveys.
+Γ£ö Tab layout must be in an organized state if there are more than ten polls or surveys.
### In-meeting app experience
-Γ£ö Meeting apps will be hosted in the top upper bar of the chat window and as in-meeting tab experience via the in-meeting tab. When users add a tab to a meeting through the tab gallery, apps that are **during meeting** experiences will be surfaced.
+Γ£ö Meeting apps are hosted in the top upper bar of the chat window and as in-meeting tab experience using the in-meeting tab. When users add a tab to a meeting through the tab gallery, apps that are **during meeting** experiences are shown.
Γ£ö Permissioned users can add apps while in the meeting.
-Γ£ö When loaded in the context of a meeting, apps will be able to leverage the Teams Client SDK to access the `meetingId`, `userMri`, and `frameContext` to appropriately render the experience.
-
-Γ£ö Exporting a result of a survey or polls should notify the users stating, ΓÇÿresults successfully downloadedΓÇÖ.
-
-Γ£ö For an app to be visible in a Teams meeting in two areas:
+Γ£ö When loaded in the context of a meeting, apps can leverage the Teams Client SDK to access the `meetingId`, `userMri`, and `frameContext` to appropriately render the experience.
-&emsp;&emsp;&#9679; **Side panel**. </br>
+Γ£ö Exporting a result of a survey or poll notifies the users that the results successfully downloaded.
-> [!NOTE]
-> If your _app manifest_ specifies that your tab is [optimized for side panel](create-apps-for-teams-meetings.md#during-a-meeting), that is where it will be displayed. It can also be part of a share-tray experience, subject to specified design guidelines.
+Γ£ö An app is visible in a Teams meeting in the side panel or the in-meeting dialog box. Use the in-meeting dialog to showcase actionable content for meeting participants. *See* [Create Apps for Teams meetings](create-apps-for-teams-meetings.md).
-&emsp;&emsp;&#9679; **In-meeting dialog**. Use the in-meeting dialog to showcase actionable content for meeting participants. *See* [Create Apps for Teams meetings](create-apps-for-teams-meetings.md).
+ > [!NOTE]
+ > Your app manifest specifies that your tab is [optimized for side panel](create-apps-for-teams-meetings.md#during-a-meeting), that is where it is displayed. It can also be part of a share-tray experience, subject to specified design guidelines.
-**In-meeting experience:**
+The following images display the app as an in-meeting dialog box and as a separate side panel:
-![in-meeting experience](../assets/images/apps-in-meetings/in-meeting-experience.png)
+![In-meeting experience](../assets/images/apps-in-meetings/in-meeting-experience.png)
![In-meeting-dialog view](../assets/images/apps-in-meetings/in-meeting-dialog.png)
-**In-meeting actionable dialog for users:**
+#### In-meeting actionable dialog for users
-![dialog view](../assets/images/apps-in-meetings/in-meeting-dialog-view.png)
+![Dialog view](../assets/images/apps-in-meetings/in-meeting-dialog-view.png)
### Post-meeting app experience
-**Post-meeting experience:**
-
-![post meeting view](../assets/images/apps-in-meetings/PostMeeting.png)
+![Post meeting view](../assets/images/apps-in-meetings/PostMeeting.png)
-Γ£ö The post-meeting app scenario is similar to the current post-meeting experience with the added benefit of having tabs that exist within the surface.
+Γ£ö The post-meeting app scenario is similar to the current post-meeting experience with the added benefit of having tabs that exist within the surface.
-Γ£ö Permissioned users can add apps from the tab gallery to a meeting via the **Details** tab on the Teams scheduling form and the meeting **Chat** tab in an existing meeting.
+Γ£ö Permissioned users can add apps from the tab gallery to a meeting using the **Details** tab on the Teams scheduling form and the meeting **Chat** tab in an existing meeting.
-Γ£ö Tab layout should be in an organized state if there are more than ten polls or surveys.
+Γ£ö Tab layout must be organized when there are more than ten polls or surveys.
-### Bots
+### Integrate bots into the meeting lifecycle
For bot implementation, start with [build a bot](../build-your-first-app/build-bot.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-reference).
-### Messaging extensions
+### Integrate messaging extensions into the meeting lifecycle
For messaging extension implementation, start with [build a messaging extension](../messaging-extensions/how-to/create-messaging-extension.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-reference).
For messaging extension implementation, start with [build a messaging extension]
### Participant roles
-You can design your app with participant-specific authorization. For example, perhaps only an organizer and/or presenter can create a poll in meetings. Although default participant settings are determined by an organization's IT administrator, a meeting organizer may want to change the settings for a specific meeting. Organizers can make these changes on the Meeting options web page.
+Default participant settings are determined by an organization's IT administrator. The following are the participant roles in a meeting:
+
+* **Organizer**: The organizer schedules a meeting, sets the meeting options, assigns meeting roles, and starts the meeting. Only users with a M365 account with a Teams license can be organizers and control attendee permissions. A meeting organizer can change the settings for a specific meeting. Organizers can make these changes on the **Meeting options** web page.
+* **Presenter**: Presenters have the same capabilities as organizer. However, a presenter cannot remove an organizer from the session or modify meeting options for the session. By default, participants joining a meeting have the presenter role.
+* **Attendee**: An attendee is a user who has been invited to attend a meeting but who is not authorized to act as a presenter. Attendees can interact with other meeting members but cannot manage any of the meeting settings or share content.
-1. **Organizer**. The organizer schedules a meeting, sets the meeting options, assigns meeting roles, and starts the meeting. Only users with a M365 account (possessing a Teams license) can be organizers and control attendee permissions.
-1. **Presenter**. Presenters have nearly the same capabilities as organizer; however, a presenter cannot remove an organizer from the session or modify meeting options for the session. By default, participants joining a meeting have the presenter role.
-1. **Attendee**. An attendee is a user who has been invited to attend a meeting but who is not authorized to act as a presenter. Attendees can interact with other meeting members but cannot manage any of the meeting settings or share content.
+Only an organizer or presenter can add, remove, or uninstall apps. Only organizer or presenter can create polls in a meeting.
-_See_ [**Roles in a Teams meeting**](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019)
+For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
You can access the **Meeting options** page as follows:
-&#11200; In Teams, go to **Calendar** ![calendar logo](../assets/images/apps-in-meetings/calendar-logo.png), select a meeting, and then **Meeting options**.
+* In Teams, go to **Calendar** ![calendar logo](../assets/images/apps-in-meetings/calendar-logo.png), select a meeting, and then **Meeting options**.
-&#11200; In a meeting invitation, select **Meeting options**.
+* In a meeting invitation, select **Meeting options**.
-&#11200; During a meeting, select **Show participants** ![show participants icon](../assets/images/apps-in-meetings/show-participants.png) in the meeting controls. Then, above the list of participants, choose **Manage permissions**.
+* During a meeting, select **Show participants** ![show participants icon](../assets/images/apps-in-meetings/show-participants.png) in the meeting controls. Then, above the list of participants, choose **Manage permissions**.
### User types > [!NOTE]
-> User types can join meetings and assume one of the participant roles described above. The User type is not exposed as part of the **getParticipantRole** API.
+> Users with specific user types assigned to them can join meetings and assume one of the participant roles described in [participant roles](#participant-roles). The user type is not included in the **getParticipantRole** API.
-1. **In-tenant**. These users belong to the organization and have credentials in Azure Active Directory for the tenant. They are usually full-time, onsite or remote employees.
-1. **Guest**. A guest is a participant from another organization who has been invited to access Teams or other resources in your organization's tenant. Guests are added to your organizationΓÇÖs Active Directory and can be given nearly all the same Teams capabilities as a native team member with full access to team chats, meetings, and files. _See_ [Guest access in Microsoft Teams](/microsoftteams/guest-access)
-1. **Federated/External**. A federated user is an external Teams user in another organization who has been invited to join a meeting. Since these users have valid credentials with federated partners, they are treated as authenticated by Teams but do not have access to your teams or other shared resources from your organization. If you want external users to have access to teams and channels, guest access might be a better option. _See_ [Manage external access in Microsoft Teams](/microsoftteams/manage-external-access)
-1. **Anonymous**. Anonymous users do not have an Active Directory identity and are not federated with a tenant. The anonymous participant is like an external user, but their identity is not projected into the meeting. Anonymous users will not be able to access apps in a meeting window.
+The following user types identify what each user can do and what they can access:
-## Next steps
+* **In-tenant**: In-tenant users belong to the organization and have credentials in Azure Active Directory (AAD) for the tenant. They are usually full-time, onsite, or remote employees. An in-tenant user can be an organizer, presenter, or attendee.
+* **Guest**: A guest is a participant from another organization invited to access Teams or other resources in the organization's tenant. Guests are added to your organizationΓÇÖs AAD and have the same Teams capabilities as a native team member with access to team chats, meetings, and files. A guest user can be an organizer, presenter, or attendee. For more information, see [guest access in Teams](/microsoftteams/guest-access).
+* **Federated or external**: A federated user is an external Teams user in another organization who has been invited to join a meeting. These users have valid credentials with federated partners and are authorized by Teams. They do not have access to your teams or other shared resources from your organization. Guest access is a better option for external users to have access to teams and channels. For more information, see [manage external access in Teams](/microsoftteams/manage-external-access).
+* **Anonymous**: Anonymous users do not have an AAD identity and are not federated with a tenant. The anonymous participant is like an external user, but their identity is not projected in the meeting. Anonymous users are not able to access apps in a meeting window. An anonymous user cannot be an organizer but can be a presenter or attendee.
+
+## See also
+
+> [!div class="nextstepaction"]
+> [Tab](../tabs/what-are-tabs.md#how-do-tabs-work)
+
+> [!div class="nextstepaction"]
+> [Bot](../bots/what-are-bots.md)
+
+> [!div class="nextstepaction"]
+> [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md)
> [!div class="nextstepaction"] > [Design your app](../apps-in-teams-meetings/design/designing-apps-in-meetings.md)+
+## Next steps
+ > [!div class="nextstepaction"] > [Build your app](create-apps-for-teams-meetings.md)
platform Enable SSO Auth Me https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/enable-SSO-auth-me.md
+
+ Title: SSO support for your messaging extensions
+
+description: How to enable SSO support for your messaging extensions
++++
+# Single sign-on (SSO) support for messaging extensions
+
+Single sign-on support is now available for messaging extensions and link unfurling. Enabling Single sign-on (SSO) for messaging extensions silently refreshes the authentication token, which minimizes the number of times you need to enter your sign in credentials for Microsoft Teams.
+
+This document guides you on how to enable the SSO and store your authentication token, if required.
+
+## Prerequisites
+
+The prerequisite to enable SSO for messaging extensions and link unfurling are as follows:
+* You must have an [Azure](https://azure.microsoft.com/en-us/free/) account.
+* You must configure your app through the AAD portal, and update your Teams application manifest for your bot as defined in [register your app through the AAD portal](../../bots/how-to/authentication/auth-aad-sso-bots.md#register-your-app-through-the-aad-portal).
+
+> [!NOTE]
+> For more information on creating an Azure account and updating your app manifest, see [Single sign-on (SSO) support for bots](../../bots/how-to/authentication/auth-aad-sso-bots.md).
+
+## Enable SSO for messaging extensions and link unfurling
+
+After the prerequisites are completed, you can enable SSO for messaging extensions and link unfurling.
+
+**To enable SSO**
+1. Update your bots [OAuth connection](../../bots/how-to/authentication/auth-aad-sso-bots.md#update-the-azure-portal-with-the-oauth-connection) details in the Azure portal.
+2. Download the [messaging extensions sample](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config) and follow the setup instructions provided by the wizard.
+ > [!NOTE]
+ > Use your bots OAuth connection when setting up your messaging extensions.
+3. In the [TeamsMessagingExtensionsSearchAuthConfigBot.cs](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config/Bots/TeamsMessagingExtensionsSearchAuthConfigBot.cs) file, update the value from *auth* to *silentAuth* in the `OnTeamsMessagingExtensionQueryAsync` and / or `OnTeamsAppBasedLinkQueryAsync`.
+
+ > [!NOTE]
+ > We do not support other handlers SSO, except `OnTeamsMessagingExtensionQueryAsync` and `OnTeamsAppBasedLinkQueryAsync` from the TeamsMessagingExtensionsSearchAuthConfigBot.cs file.
+
+4. You receive the token in `OnTeamsMessagingExtensionQueryAsync` handler in the `turnContext.Activity.Value` payload or in the `OnTeamsAppBasedLinkQueryAsync`, depending on which scenario you are enabling the SSO for:
+
+ ```json
+ JObject valueObject=JObject.FromObject(turnContext.Activity.Value);
+ if(valueObject["authentication"] !=null)
+ {
+ JObject authenticationObject=JObject.FromObject(valueObject["authentication"]);
+ if(authenticationObject["token"] !=null)
+ }
+
+ ```
+
+ If you are using the OAuth connection, add the following code to the TeamsMessagingExtensionsSearchAuthConfigBot.cs file to update or add the token in the store:
+
+ ```C#
+ protected override async Task<InvokeResponse> OnInvokeActivityAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
+ {
+ JObject valueObject = JObject.FromObject(turnContext.Activity.Value);
+ if (valueObject["authentication"] != null)
+ {
+ JObject authenticationObject = JObject.FromObject(valueObject["authentication"]);
+ if (authenticationObject["token"] != null)
+ {
+ //If the token is NOT exchangeable, then return 412 to require user consent
+ if (await TokenIsExchangeable(turnContext, cancellationToken))
+ {
+ return await base.OnInvokeActivityAsync(turnContext, cancellationToken).ConfigureAwait(false);
+ }
+ else
+ {
+ var response = new InvokeResponse();
+ response.Status = 412;
+ return response;
+ }
+ }
+ }
+ return await base.OnInvokeActivityAsync(turnContext, cancellationToken).ConfigureAwait(false);
+ }
+ private async Task<bool> TokenIsExchangeable(ITurnContext turnContext, CancellationToken cancellationToken)
+ {
+ TokenResponse tokenExchangeResponse = null;
+ try
+ {
+ JObject valueObject = JObject.FromObject(turnContext.Activity.Value);
+ var tokenExchangeRequest =
+ ((JObject)valueObject["authentication"])?.ToObject<TokenExchangeInvokeRequest>();
+ tokenExchangeResponse = await (turnContext.Adapter as IExtendedUserTokenProvider).ExchangeTokenAsync(
+ turnContext,
+ _connectionName,
+ turnContext.Activity.From.Id,
+ new TokenExchangeRequest
+ {
+ Token = tokenExchangeRequest.Token,
+ },
+ cancellationToken).ConfigureAwait(false);
+ }
+ #pragma warning disable CA1031 //Do not catch general exception types (ignoring, see comment below)
+ catch
+ #pragma warning restore CA1031 //Do not catch general exception types
+ {
+ //ignore exceptions
+ //if token exchange failed for any reason, tokenExchangeResponse above remains null, and a failure invoke response is sent to the caller.
+ //This ensures the caller knows that the invoke has failed.
+ }
+ if (tokenExchangeResponse == null || string.IsNullOrEmpty(tokenExchangeResponse.Token))
+ {
+ return false;
+ }
+ return true;
+ }
+
+ ```
+
+## See also
+
+> [!div class="nextstepaction"]
+> [Add authentication to your messaging extensions](add-authentication.md)
+
+> [!div class="nextstepaction"]
+> [Use SSO for bots](../../bots/how-to/authentication/auth-aad-sso-bots.md)
+
+> [!div class="nextstepaction"]
+> [Link unfurling](link-unfurling.md)
+
platform Auth Silent Aad https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-silent-aad.md
if (loginHint) {
### Authenticate
-If ADAL has an unexpired token cached for the user, use the token. Alternately, attempt to get a token silently by calling `acquireToken(resource, callback)`. ADAL.js will call your callback function with the requested token, or give an error if authentication fails.
+If ADAL has a token cached for the user that has not expired, use that token. Alternately, attempt to get a token silently by calling `acquireToken(resource, callback)`. ADAL.js calls the callback function with the requested token, or gives an error if authentication fails.
If you get an error in the callback function, show a sign in button and fall back to an explicit sign in.
if (authContext.isCallback(window.location.hash)) {
} } ```+
+### Handle sign out flow
+
+Use the following code to handle sign out flow in AAD Auth:
+
+> [!NOTE]
+> While logout for Teams tab or bot is done, the current session is also cleared.
+
+```javascript
+function logout() {
+localStorage.clear();
+window.location.href = "@Url.Action("<<Action Name>>", "<<Controller Name>>")";
+}
+```
platform Configuration Page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/configuration-page.md
A configuration page is a special type of [content page](content-page.md). The u
## Configuring a channel or group chat tab
-The application must reference the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and call `microsoft.initialize()`. Also, the URLs used must be secured HTTPS endpoints and available from the cloud. The following code is an example of a configuration page:
+The application must reference the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and call `microsoft.initialize()`. Also, the URLs used must be secured HTTPS endpoints and available from the cloud.
+
+### Example
+
+An example of a configuration page is shown in the following image:
+
+<img src="~/assets/images/tab-images/configuration-page.png" alt="Configuration page" width="400"/>
+
+The corresponding code for configuration page is shown in the following section:
```html <head>
The application must reference the [Microsoft Teams JavaScript client SDK](/java
... ```
-Choose either **Select Gray** or **Select Red** button in the configuration page, to display the tab content with a gray or red icon. Choosing the relative button fires either `saveGray()` or `saveRed()`, and invokes the following:
+Choose either **Select Gray** or **Select Red** button in the configuration page, to display the tab content with a gray or red icon.
+
+The following image displays the tab content with gray icon:
+
+<img src="~/assets/images/tab-images/configure-tab-with-gray.png" alt="Configure tab with select gray" width="400"/>
+
+The following image displays the tab content with red icon:
+
+<img src="~/assets/images/tab-images/configure-tab-with-red.png" alt="Configure tab with select red" width="400"/>
+
+Choosing the relative button triggers either `saveGray()` or `saveRed()`, and invokes the following:
1. The `settings.setValidityState(true)` is set to true. 1. The `microsoftTeams.settings.registerOnSaveHandler()` event handler is triggered.
microsoftTeams.settings.setSettings({
## Mobile clients
-If you choose to have your channel or group tab appear on the Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property. For more information, see [guidance for tabs on mobile](~/tabs/design/tabs-mobile.md).
+If you choose to have your channel or group tab appear on the Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property. For more information, see [guidance for tabs on mobile](~/tabs/design/tabs-mobile.md).
platform Connectors Using https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-using.md
The `ActionCard` action supports three input types:
If you want a multiselect list initially displayed in the compact style, you must specify both `"isMultiSelect": true` and `"style": true`.
+For more information on Connector card actions, see **[Actions]**(/outlook/actionable-messages/card-reference#actions) in the actionable message card reference.
+ > [!NOTE] > Specifying `compact` for the `style` property in Microsoft Teams is the same as specifying `normal` for the `style` property in Microsoft Outlook.-
-For all other details about Connector card actions, see **[Actions](/outlook/actionable-messages/card-reference#actions)** in the actionable message card reference.
+>
+> For the HttpPOST action, the bearer token is included with the requests. This token includes the Azure AD identity of the Office 365 user who took the action.
## Setting up a custom incoming webhook