Using Adaptive Cards to display carousels in Health Bot
Can we attach an array of Adaptive Cards using the Dynamic Card, to display as Carousel? I am trying to do something like below in a Dynamic Card, but it just displays empty cards in the carousel. (function(){ var data = ${dataList}; var cards = data.map(function(item) { return { type: "AdaptiveCard", $schema: "http://adaptivecards.io/schemas/adaptive-card.json", version: "1.3", body: [ { type: "Container", isVisible: true, items: [ { type: "Image", style: "person", url: item.imageUrl, altText: item.imageAltText, size: "medium" }, { type: "TextBlock", text: item.title, weight: "bolder", size: "medium", wrap: true } ] }, { type: "ActionSet", actions: [ { type: "Action.OpenUrl", title: "View Profile", url: item.buttonUrl, id: item.buttonId } ] } ] } }); return cards; })(); ${dataList} is an array of objects with properties imageUrl, imageAltText, title, buttonUrl and buttonId. I came across documentation on how to implement this in Copilot Studio - https://learn.microsoft.com/en-us/microsoft-copilot-studio/guidance/adaptive-card-display-carousels Do we have any documentation available for Health Bot as well? Appreciate any guidance !! Thanks, Abhilash
Images in Adaptive Cards in New Teams Client not showing
Hello Community, I've encountered an issue with Teams Webhook Connector where images in Adaptive Cards are not displaying correctly in the New Teams Client, although they work as expected in the classic version. Our clients have reported that while messages are visible, the images fail to appear. This problem does not occur in the classic Teams client or when viewed in a browser, which I presume is utilizing the classic client as well. To clarify, I'm using the latest Adaptive Cards version (v1.5) compatible with Teams, and this issue is consistent across both Windows and Apple versions of the New Teams Client. Unfortunately, there seems to be no information available about this compatibility issue in the Adaptive Cards documentation or designer tool. Below is a simple Adaptive Card JSON that illustrates the problem: { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "This is a headline" }, { "type": "Image", "url": "https://img.cdn-pictorem.com/uploads/collection/D/DN4DFF8JRC/900_Nature-Art_colorful--paintings.jpg", "width": "300px" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5" } For visual reference, here is how the card renders in both clients: Classic Teams Client: New Teams Client: I have not found a workaround yet and would greatly appreciate guidance on how to resolve this issue. Any suggestions or updates regarding the new client's support for Adaptive Cards would be very helpful. Thank you. Best regards
Adaptive cards aren't rendering on Teams sent from Webhook
I'm trying to make an AdaptiveCard that will show some information about an outage. This JSON looks great on adaptivecards.io/designer, but everything inside the 'body' isn't rendered in Teams. Here is an image of what appears when I try to call the webhook. And here's what it looks like on adaptivecards.io { "text": "Datto Alert Raise on [device_hostname] [device_description] | [site_name]", "fallbackText": "Datto Alert Resolve on [device_hostname] [device_description] | [site_name]", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.5", "body": [ { "type": "TextBlock", "size": "default", "weight": "default", "color": "default", "text": "Datto" }, { "type": "TextBlock", "text": "New Datto RMM alert", "wrap": true }, { "type": "TextBlock", "text": "New alert on [device_hostname] [device_description] | [site_name]", "wrap": true, "size": "Medium", "weight": "Bolder" }, { "type": "TextBlock", "text": "IP address: [device_ip] | Last user: [lastuser]", "wrap": true, "color": "Dark" }, { "type": "FactSet", "facts": [ { "title": "Category:", "value": "[alert_category]" }, { "title": "Description:", "value": "[alert_message]" } ] } ], "actions": [ { "type": "Action.OpenUrl", "title": "New UI View Device", "url": "https://[platform]rmm.centrastage.net/device/[device_id]/[device_hostname]" }, { "type": "Action.OpenUrl", "title": "Old UI View Device", "url": "https://zinfandel.centrastage.net/csm/device/summary/[device_id]" }, { "type": "Action.OpenUrl", "title": "New UI View Alert", "url": "https://[platform]rmm.centrastage.net/alert/[alert_uid]" }, { "type": "Action.OpenUrl", "title": "New UI Web Remote", "url": "https://[platform].centrastage.net/csm/remote/rto/[device_id]" }, { "type": "Action.OpenUrl", "title": "New UI View Site", "url": "https://[platform]rmm.centrastage.net/site/[site_id]" } ] }
Adaptive card do not render image on Teams Desktop
Hello Community, We are facing a challenge with the image rendering in our Adaptive cards only in the Teams Desktop application. All is working fine with the Teams on the Web, and when we test it in the designer. The images are stored in our SharePoint. Will this be the problem ? See bellow our json adaptive card, and some screenshots { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3", "type": "AdaptiveCard", "body": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Request No. ", "wrap": true, "size": "Small", "isSubtle": true, "horizontalAlignment": "Right" } ], "backgroundImage": { "horizontalAlignment": "Right" }, "horizontalAlignment": "Right" }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "44", "wrap": true, "size": "Small", "isSubtle": true, "horizontalAlignment": "Right" } ], "horizontalAlignment": "Right" } ], "horizontalAlignment": "Right" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "wrap": true, "text": " Urgent - New Support Request", "horizontalAlignment": "Center", "size": "ExtraLarge", "weight": "Bolder", "color": "Warning", "spacing": "None", "height": "stretch" } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "Requested by ", "wrap": true, "weight": "Bolder" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Image", "size": "Small", "style": "Person", "url": "data:image/png;base64" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": " Doe, John", "wrap": true } ], "verticalContentAlignment": "Center" } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "Location", "wrap": true, "weight": "Bolder" }, { "type": "TextBlock", "text": "Urgent", "wrap": true, "weight": "Bolder", "color": "Accent" }, { "type": "TextBlock", "text": "Issue With", "wrap": true, "weight": "Bolder" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "France", "wrap": true, "weight": "Bolder" }, { "type": "TextBlock", "text": "Yes", "wrap": true, "color": "Accent" }, { "type": "TextBlock", "text": "Office", "wrap": true } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "Description", "wrap": true, "weight": "Bolder" }, { "type": "TextBlock", "text": "This is my error please help me", "wrap": true } ] } ] } ], "separator": true }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Attachements", "wrap": true, "isSubtle": true }, { "type": "ImageSet", "imageSize": "Large", "images": [ { "type": "Image", "url": "SharePointURL", "selectAction": { "type": "Action.OpenUrl", "url": "SharePointURL" } }, { "type": "Image", "url": "SharePointURL", "selectAction": { "type": "Action.OpenUrl", "url": "SharePointURL" } } ] } ] } ] } ] }, { "type": "ActionSet", "horizontalAlignment": "Left", "actions": [ { "type": "Action.ShowCard", "title": "Complete", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "What was the error?", "wrap": true }, { "type": "Input.Text", "isMultiline": true, "id": "error" }, { "type": "TextBlock", "text": "What was the solution?", "wrap": true }, { "type": "Input.Text", "isMultiline": true, "id": "solution" } ], "actions": [ { "type": "Action.Submit", "title": "Send", "id": "send", "associatedInputs": "auto", "data": { "action": "complete", "request": "44", "link": "Link to the SharePoint List", "issuewith": "Office" } } ], "verticalContentAlignment": "Top" }, "id": "complete" }, { "type": "Action.Submit", "title": "Handle", "id": "handle", "data": { "action": "handle", "request": "44", "link": "Link to the SharePoint List", "issuewith": "Office" } }, { "type": "Action.Submit", "title": "Create a task", "id": "task", "associatedInputs": "auto", "data": { "action": "task", "request": "44", "link": "Link to the SharePoint List", "issuewith": "Office" } } ], "height": "stretch", "separator": true } ] } Thank you for you help.
[Adaptive cards] Background color changed with the new Teams
Hello, Since the new Teams update, rendering of the background color on adaptive cards are different. Attention (red) and Warning (orange) are looking too much alike using both Light and Dark theme. I'm using colored containers as card header, so it makes reading them confusing. Old Teams version : 1.7.00.7956 New Teams version : 24102.2223.2870.9480 Thank you.Adaptive card 'Toggle visibility' function stopped working in the New MS Teams
Toggle visibility function in adaptive cards stopped working in the new version of MS Teams. The issue is not reproducible in the older version of MS Teams. It can be reproduced in developer portal with the following card structure example: { "type":"AdaptiveCard", "$schema":"http://adaptivecards.io/schemas/adaptive-card.json", "version":"1.4", "body":[ { "type":"Container", "items":[ { "type":"TextBlock", "text":"Request", "size":"Large", "wrap":true, "weight":"Bolder", "spacing":"Small", "horizontalAlignment":"Center" }, { "type":"TextBlock", "text":"Pleaseprovideyourcontact information", "wrap":true, "spacing":"Medium" }, { "type":"Container", "items":[ { "type":"ColumnSet", "columns":[ { "type":"Column", "width":"stretch", "items":[ { "type":"TextBlock", "text":"ContactData", "wrap":true, "style":"default", "fontType":"Default", "size":"Medium", "weight":"Bolder" } ] }, { "type":"Column", "width":"20px", "items":[ { "type":"Image", "url":"https://adaptivecards.io/content/up.png", "id":"chevronUp1" }, { "type":"Image", "url":"https://adaptivecards.io/content/down.png", "id":"chevronDown1", "isVisible":false } ], "selectAction":{ "type":"Action.ToggleVisibility", "targetElements":[ "contactData", "chevronDown1", "chevronUp1" ] } } ] }, { "type":"Container", "items":[ { "type":"Input.Text", "id":"rt_user_first_name", "errorMessage":"Pleaseinputcontactpersonfirstname", "label":"FirstName", "spacing":"Small", "value":"{{memory.rt_user_first_name}}", "isRequired":true }, { "type":"Input.Text", "label":"LastName", "id":"rt_user_last_name", "errorMessage":"Pleaseinputcontactpersonlastname", "spacing":"Small", "value":"{{memory.rt_user_last_name}}", "isRequired":true }, { "spacing":"Small", "regex":"^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$", "isRequired":true, "value":"{{memory.rt_user_email}}", "placeholder":"email address removed for privacy reasons", "label":"Email", "type":"Input.Text", "id":"rt_user_email", "errorMessage":"Pleaseprovidethecontactpersonemail" }, { "spacing":"Small", "regex":"^[+][0-9]{10,12}$", "maxLength":13, "value":"{{memory.rt_user_phone_number}}", "placeholder":"+1", "label":"PhoneNumber", "type":"Input.Text", "id":"rt_user_phone_number", "errorMessage":"Askingyoutokindlyenterthephonenumberintheinternationalformat,startingwith+,thenthecountrycode,operatorcodeandyourlocalnumber." } ], "id":"contactData", "spacing":"Small" } ] } ] }, { "type":"Container", "items":[ { "type":"ActionSet", "actions":[ { "type":"Action.Submit", "title":"Submit" } ] } ] } ] }
Image inserted in incoming webhook is not working for new Teams version.
I am trying to insert an image into anincoming webhook using adaptive card and message card. But it is not displaying in the new Microsoft Teams version (23217.806.2340.1703.). But this is working on Old Teams version 1.6.00.24078 (64-bit). I am using below sample code to display this card. { "type": "message", "attachments": [ { "contentType": "application/vnd.microsoft.card.adaptive", "contentUrl": null, "content": { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.5", "body": [ { "type": "TextBlock", "text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)" }, { "type": "Image", "url": "https://adaptivecards.io/content/cats/1.png" } ] } } ] } Please reply if you have any solution to this issue or have any suggestions. Thanks,Is there any way to add an Add-in or Adaptive Card to the Posts Tab in a Teams Channel?
Is there any way to insert a custom app or Adaptive Card to the right side of the Posts tab? I am searching for a way to extend the Conversation (chat) User Interface in MS Teams by adding contextual custom information in a panel to the right of the chat stream. I understand I could have a Bot in the chat that posts an adaptive card in the chat stream, but that will flow off the top of the screen when a few more users post messages to the channel. The screen real estate I want to use is the right-most area of the Posts tab ; currently Teams has a "Open channel details" button in the upper right corner of the Posts tab. That button opens a panel that displays info about the channel. That is exactly where I want to insert my customer UI elements. Research to date suggests the answer isno, neither the Posts tab nor the Files tab can be extended with customer Add-ins. Please comment with your insight. Thanks!Adaptive Card to send message to the end user by command / Bot Framework SDK - JavaScript - node.js
For MS Teams chatbot, by adaptive cards, I want the bot to send text message to the client when the client chooses the respective command. What İs want is opposite of Action.Submit - I want user to receive message when the button is clicked. I try to optimize Action.OpenUrl and Action.Submit but results weren't satisfying.
Incoming Webhook duplicated message
Hello! We're using Teams Incoming Webhook to send notifications to a channel when a ticket is opened in our workflow management tool and we're facing a strange behavior when posting to the webhook through Java's HttpClient (java.net.http). Every time we send a notification, it arrives "duplicated". The first one arrives as expected and the card is filled with all the data needed. The second one arrives approximately one minute after the first one and there's almost no data in this second card. In our implementation we have a serverless function (AWS Lambda) that handles the step of ticket opening process. After opening the ticket successfully, the notification is sent to Teams via the webhook. According to our logs, the HTTP request that sends the notification is made only once, as expected. So, we're initially considering that there's nothing wrong with the HttpClient. Note: when we post to the webhook using Postman or curl, everything works fine and the notification arrives with no duplication. So, I ask: is there any way to debug the webhook? Thanks!
