Side-panel Teams meeting app becomes unusable but stays open/visible when user joins a breakout room
I am working with a side-panel Teams meeting app. A customer noticed behavior that I have been able to replicate but have not found an explanation for, or a way to prevent. Issue summary When a user has a side panel app open, and the user is pushed into a Teams meeting breakout room, the side panel app remains open/visible but the app content disappears (making the app unusable). Replicating this behavior 1. User has app open in Teams meeting side panel. In the below screenshot, note that the app is listed in the interface (red circle), and open in the side panel. 2. User is pushed into a breakout room. The user does not interact with the interface and is automatically pushed into a breakout room. 3. Upon joining the breakout room, the app appears to remain open in the side panel, but the content disappears. In the below screenshot, note that: The side panel app content is now empty/blank. The app icon disappears from the Teams meeting interface (red circle). This is expected, but just want to note that the app is not attached to the breakout room at all. Thoughts My understanding is that apps don't carry over from the main Teams meeting into breakout rooms (though apps can still be added inside of breakout rooms), so the curiosity here is why the side panel app remains open when moving from the main room to a breakout room. And one more interesting note — using the three dots and "Reload" on a side panel app gets the app to reload and work again inside the breakout room, despite the app not being listed as an interface tab within the breakout room. I don't necessarily need the app to remain usable as a user joins a breakout room, but I am wondering what's going on here with the app remaining open/visible.
Can we place a cancel button next to the sign-in button in the sign-in prompt (OAuth prompt)
Hi Team, Currently we ate using the below code and oauth prompt settings for using the MS delegated graph api permissions. private async Task<DialogTurnResult> PromptStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken) { return await stepContext.BeginDialogAsync(nameof(OAuthPrompt), null, cancellationToken); } Can we add one more button Cancel for users if they are not interested to sign in. Currently we are handling by adding a custom message saying user to type 'cancel' if they don't want to continue sign in. But that's like an extra effort from user side. Also, we have tried the below code, public static OAuthCard GetOAuthCard() { var oauthCard = new OAuthCard { Text = "BotFramework OAuth Card", ConnectionName = "OAuth connection", // Replace with the name of your Azure AD connection. Buttons = new List<CardAction> { new CardAction(ActionTypes.Signin, "Sign In", value: "https://example.org/signin"), new CardAction(ActionTypes.ImBack, "Cancel") }, }; return oauthCard; } But this also didn't worked. We have sent this card as a text prompt attachment but sign in button didn't workedTeams Bot vs. Azure Bot
Hi, What is the differences between the Bot what you can setup on Teams' Development Portal and Azure Bots? Azure Bot's requires response group. But Bots from development portal seems to not requiring that. Is the development portal only way to setup such a bots, or should I be able to setup those bots from some other way as well?
Ability to add metadata to manifest to inspect when receive chat for routing to different pipelines
Hello, We have developed a Microsoft Teams application that we deploy from the Microsoft Teams store. So, we have a single inbound chat channel (Azure Bot) for multiple inbound tenants - and we route to the custom tenant\instance base on their tenant ID. It all works great. Chime V5 site We have some customers who deploy our solution for IT Support, HR, and even legal departments. When our customers deploy, they generally take our app manifest, possibly update the icon and name, and then push to the left side navigator of their MS Teams clients. If they are just using the IT Support chat service, then is simple an only involves pushing one manifest. Info on some of the MS Teams app package stuff. However, since the traffic is taking place using a single inbound chat channel, and some customers might want 3 separate MS Teams navigation\bots (IT Support, HR Questions, Legal) we currently can only install one icon and then we need display some menu (adaptive card) when the employee starts a chat. This is OK, but not great. So, we might have 1, 2, or even 10 chat services that we deploy for a customer. Right now, we place all of these behind one MS Teams icon on the left side navigator. For instance: Blog article on pushing to teams If we could attach some metadata (even a very simple int) to a field in the manifest, and have this value attached to chat session, then we could attach multiple icons to the left side navigator - and automatically 'route' the inbound chat to the appropriate chat service. For example, these are all totally different chat services (bots) that have different AI prompts, agent routing options, adaptive cards, and UI. We'd like to be able to create unique icons on the MS Teams client for each chat pipeline - and some simple addition to the manifest could help with this Is there anyway to 'attach' any custom metadata at the MS Teams manifest level and have that value included as part of the chat conversation? For instance, basic IT Support would be a 1 HR requests 2 Legal 3 and we could use our single service, and Azure Bot, to take in 3 different requests from 3 different icons and have them routed to the appropriate bot pipeline.
Cannot navigate to newly created channel tab by Graph API
Description: We are experiencing an issue with navigation in our published MS Teams custom app. The app is published to the org catalog. We are using microsoft/teams-js and teamsfx to implement a "Create Tab" user experience. The problem is that after the tab is successfully created, we use the pages.navigateToApp to open the tab and in some cases the navigation fails. The code snippet we use to create the tab looks like as follows: export class GraphClient { credential: TeamsUserCredential; client: Client; constructor(clientId: string, initiateLoginEndpoint: string) { this.credential = new TeamsUserCredential({ clientId, initiateLoginEndpoint, }); const authProvider = new TokenCredentialAuthenticationProvider(this.credential, { scopes }); this.client = Client.initWithMiddleware({ authProvider: authProvider, }); } async getTeamsApp(externalId: string): Promise<{ id: string; externalId: string; displayName: string; distributionMethod: string; } | null> { const response = await this.client.api('/appCatalogs/teamsApps').filter(`externalId eq '${externalId}'`).get(); return response['@odata.count'] === 0 ? null : response.value[0]; } async getTeamsInstalledApp( teamId: string, teamsAppId: string ): Promise<{ id: string; teamsAppDefinition: { id: string; teamsAppId: string; }; } | null> { const response = await this.client .api(`/teams/${teamId}/installedApps`) .filter(`teamsAppDefinition/teamsAppId eq '${teamsAppId}'`) .get(); return response['@odata.count'] === 0 ? null : response.value[0]; } async installAppToTeam(teamId: string, teamsAppId: string): Promise<void> { const teamsAppInstallation = { 'email address removed for privacy reasons': `https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/${teamsAppId}`, }; await this.client.api(`/teams/${teamId}/installedApps`).post(teamsAppInstallation); } async addTabToChannel( teamId: string, channelId: string, teamsAppId: string, tabCreationProps: TabCreationProps ): Promise<{ tabEntityId: string; webUrl: string; }> { const tabEntityId = generateRandomString(32); const teamsTab = { displayName: tabCreationProps.displayName, 'email address removed for privacy reasons': `https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/${teamsAppId}`, configuration: { entityId: tabEntityId, contentUrl: tabCreationProps.contentUrl, websiteUrl: tabCreationProps.websiteUrl, removeUrl: tabCreationProps.removeUrl, }, }; await this.client.api(`/teams/${teamId}/channels/${channelId}/tabs`).post(teamsTab); return { tabEntityId, webUrl: tabCreationProps.websiteUrl }; } } export async function ensureAppInstalledInTeam( graphClient: GraphClient, teamId: string, teamsAppId: string ): Promise<void> { const installedApp = await graphClient.getTeamsInstalledApp(teamId, teamsAppId); if (!installedApp) { await graphClient.installAppToTeam(teamId, teamsAppId); } } export async function createTabInChannel( graphClient: GraphClient, teamId: string, channelId: string, teamsAppExternalId: string, tabCreationProps: TabCreationProps ): Promise<{ tabEntityId: string; teamsAppId: string; channelId: string; webUrl: string; }> { const teamsAppDefinition = await graphClient.getTeamsApp(teamsAppExternalId); if (!teamsAppDefinition) { console.error('Teams App is not found in org catalog of current Teams environment.'); throw new Error('Unable to locate Teams App in current organization catalog.'); } const teamsAppId = teamsAppDefinition.id; try { await ensureAppInstalledInTeam(graphClient, teamId, teamsAppId); const { tabEntityId, webUrl } = await graphClient.addTabToChannel( teamId, channelId, teamsAppId, tabCreationProps ); // Navigate to the newly created channel tab pages.navigateToApp({ appId: teamsAppId, channelId: channelId, pageId: tabEntityId, }) } catch (error) { console.error('Fail to ensure the app is installed in the channel before adding a channel tab', error); throw new Error('Fail to pin content in Teams channel. Please check the logs for details.'); } } Expected Behavior: The newly created tab should be open instead of opening the channel conversation tab or raising error. Actual Behavior: If a user has never opened any channels of a team in Teams, then pinning any channel tab under that team in the Teams app will successfully open a new tab. If a user has already opened one of the channels in that team and pins that same opened channel's tab, it will redirect to the channel's conversation interface. If the user opens another channel that has not been opened before in that team and pins that channel tab, it will redirect but then a dialog error will pop up, displaying the channel’s conversation interface. However, in both cases, the tab is created, and once the conversation interface is shown, the new tab can be seen within the channel. If pinning a tab results in a dialog error and displays the channel’s conversation interface, the tab does not appear in the channel.
Adaptive Card with Table not rendering on iOS mobile app
I sent message with Adaptive Card via Microsoft Bot Framework and it displayed correctly in MS Teams desktop version. But it couldn't render in iOS mobile version. { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5", "msteams": { "width": "full" }, "body": [ { "type": "Table", "columns": [ { "width": "auto" }, { "width": "auto" }, { "width": "auto" }, { "width": "auto" } ], "rows": [ { "type": "TableRow", "cells": [ { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Name", "wrap": true } ] }, { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Email", "wrap": true } ] }, { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Phone", "wrap": true } ] } ] }, { "type": "TableRow", "cells": [ { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Minh Tran", "wrap": true } ] }, { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "email address removed for privacy reasons", "wrap": true } ] }, { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "", "wrap": true } ] }, { "type": "TableCell", "horizontalAlignment": "Center", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Show", "data": { "action": "show_customer", "customer_id": 684 } } ], "horizontalAlignment": "Center" } ] } ] } ], "verticalCellContentAlignment": "Center", "gridStyle": "default" } ] }
CSS Properties being stripped from Teams Chat messages from Bot
Hi Team, We've noticed that certain CSS properties are no longer appearing in HTML messages when sent to Teams Chat. Previously, our bot styled messages using display and border properties, but now these properties are missing from the HTML when we inspect the page. Steps to Reproduce: Start the Echo bot from the sample templates (I used Teams Toolkit to deploy it to Teams or run it in the Test tool). In the TeamsBot.ts file, modify the onMessage function by replacing await context.sendActivity(...) with the following code. This example adds styling to an echo message. const a: Partial<Activity> = { text: `<span style="display: block; color: red; border-radius: 4px; padding: 4px; border: 1px solid red; ">Echoo:</span> <span style="display: block;">${txt}</span>`, textFormat: TextFormatTypes.Xml }; await context.sendActivity(a); Note: I also tried sending the HTML directly with context.sendActivity(...) without setting the textFormat property in the Activity, and observed the same result. Run the bot in the Test tool and Teams to compare behavior. Observed behavior: In the Test tool: All styles are applied as expected. In Teams: Only the color property is applied, while display, padding, and border properties are ignored (stripped out of the HTML). Here’s an example of the HTML output in Teams: <div dir="auto" id="content-1730973548675" aria-label="Echoo: test styles properties" class="fui-Primitive ___16zla5h f1oy3dpc fqtknz5 fyvcxda"> <span style="color: red;">Echoo:</span> <span>test styles properties</span> </div> Could you provide insights on whether this change is intended, and if there are any workarounds for preserving these CSS properties in Teams messages? Thank you!
What if post adaptive card and wait for a response timeout
Hi Team, Scenario: Post the adaptive card to the team chat. If the user doesn't respond after 2 hours, the adaptive card should be updated as "Expired"with a new design on the same conversation. In an attempt to comply with this, I used a "Post adaptive card in char and wait for response." Challenges: What would happen if I posted an adaptable card and waited for a response timeout? I wouldn't get a response. An error is being thrown. Expectations include waiting for a response after receiving an adapted card. In any case, your card has already produced a message ID and posted. This action should to return a Message Id in the event that a timeout occurs. Would you kindly respond if you have discovered a solution?
New Teams Workflow Based Webhooks Notification Issues
Hi all, Hoping someone else has experienced the same and is able to help out. We've started looking at migrating away from the old webhooks that are being deprecated and in to the Workflows replacement. One of the things we set up back at the start of October was using Azure Key Vault events alerting to alert about events as below: This was set up and working fine, the events sent a JSON payload that got parsed in the Workflow after being posted to the Teams webhook and then successfully posted in specific Teams Channels: This was all working great until some time recently when we went back and found that this functionality just no longer works and the Key Vault events metrics show all delivery attempts as failures. Once we'd enabled diagnostic logging for the delivery failures all that it really gives is that it was a bad request: { "time": "2024-11-22T09:52:15.9868768Z", "resourceId": "/SUBSCRIPTIONS/PLACEHOLD_SUB_ID/RESOURCEGROUPS/PLACERHOLDER_NAME/PROVIDERS/MICROSOFT.EVENTGRID/SYSTEMTOPICS/TEST-EVENTGRID-TOPIC", "eventSubscriptionName": "PLACEHOLDER_NAME", "category": "DeliveryFailures", "operationName": "Deliver", "message": "outcome=BadRequest, latencyInMs=170, id=PLACEHOLDER_ID, outputEventSystemId=PLACEHOLDER_ID, state=Filtered, deliveryTime=11/22/2024 9:52:15 AM, deliveryCount=0, probationCount=0, deliverySchema=EventGridEvent, trackedSystemTopicState=CreatedExplicitlyByUser, eventSubscriptionDeliverySchema=EventGridEvent, outputEventFields=InputEvent| EventSubscriptionId| DeliveryTime| State| Id| LastHttpStatusCode| DeliverySchema| LastDeliveryAttemptTime| SystemId| UseMappedResourceArmIdForBilling| TrackedSystemTopicState, outputEventFieldCount=, dedicatedQueueDeliveryQueueId=, requestExpiration=1/1/0001 12:00:00 AM, delivered=False id=PLACEHOLDER_ID, inputEventSystemId=PLACEHOLDER_ID publishTime=11/22/2024 9:52:15 AM, eventTime=11/22/2024 9:52:15 AM, eventType=Microsoft.KeyVault.SecretNewVersionCreated, deliveryTime=11/22/2024 9:52:15 AM, filteringState=FilteredWithRpc, inputSchema=EventGridEvent, publisher=MICROSOFT-KEYVAULT-VAULTS.UKSOUTH-1.EVENTGRID.AZURE.NET, size=662, subject=PLACEHOLDER_NAME, inputEventFields=Id| PublishTime| SerializedBody| EventType| Topic| Subject| FilteringHashCode| SystemId| Publisher| FilteringTopic| TopicCategory| DataVersion| MetadataVersion| InputSchema| EventTime| FilteringPolicy, inputEventFieldCount=16, type=HttpPost, subType=LogicApps, supportsBatching=False, aadIntegration=False, managedIdentityType=None, urlPath=PLACEHOLDER_URL, deliveryResponse=BadRequest, errorCode=BadRequest, HttpRequestMessage: httpVersion=1.1, HttpResponseMessage: HttpVersion=1.1, StatusCode=BadRequest(BadRequest), StatusDescription=Bad Request, IsRedirected=False, RedirectUrl=, "} I can point the Key Vault at another non-Microsoft webhook and it will successfully post the payload with no issue. I can also take the payload and post it to the above webhook myself and it will work fine, which leads mean to think it's either something in the way Azure posts these events has changed and the new Teams Workflow webhook doesn't like it, or the Teams Workflow webhook has changed in what it's expecting and the Azure events don't have what's required. If anyone else has experienced and overcome this issue it would be great to know what you did, as this is driving me round the bend. I'm not even sure if this is the right place to post about this problem! Thanks all.
