Image inside adaptive not centered when posting in teams
Hi team, I'm trying to post an adaptive card to teams via power automate. Below is the preview of adaptive card in adaptive card designer where it works as expected: Below is what I see in teams after it is posted: As you can see the image is left aligned for some reason while the text block remained intact. The strange thing is this has been functioning as expected until last week. Even existing cards posted to teams has been broken. Below is the card json: { "type": "AdaptiveCard", "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5", "minHeight": "300px", "verticalContentAlignment": "Top", "body": [ { "type": "ColumnSet", "horizontalAlignment": "Center", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "AWARD NAME", "wrap": true, "horizontalAlignment": "Center", "maxLines": 3, "style": "heading", "fontType": "Default", "size": "ExtraLarge", "weight": "Bolder", "color": "Default", "isSubtle": false }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "This certificate is proudly presented to", "wrap": true } ], "horizontalAlignment": "Center", "minHeight": "60px", "verticalContentAlignment": "Center" }, { "type": "TextBlock", "text": "TEST SHARMA", "wrap": true, "horizontalAlignment": "Center", "style": "default", "fontType": "Monospace", "weight": "Bolder" }, { "type": "TextBlock", "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", "wrap": true }, { "type": "TextBlock", "text": "DATE: 15/02/2025", "wrap": true, "spacing": "Medium" }, { "type": "TextBlock", "text": "Presented By: TEST MANAGER", "wrap": true, "spacing": "Medium", "horizontalAlignment": "Center" } ], "horizontalAlignment": "Center" }, { "type": "Column", "width": "stretch", "backgroundImage": { "url": "https://media.istockphoto.com/id/1185382671/vector/abstract-blurred-colorful-background.jpg?s=612x612&w=0&k=20&c=3YwJa7lCw-cQ-hviINULUokL9lYU4RuGjMP_E_0N8E4=", "horizontalAlignment": "Center" }, "horizontalAlignment": "Center", "verticalContentAlignment": "Center", "rtl": false, "items": [ { "type": "TextBlock", "text": "New TextBlock", "wrap": true }, { "type": "Image", "url": "https://w0.peakpx.com/wallpaper/419/208/HD-wallpaper-face-art-abstract-face-painting-profile.jpg", "style": "Person", "size": "Large", "horizontalAlignment": "Center", "altText": "test", "targetWidth": "AtLeast:Standard" } ], "height": "stretch" } ], "spacing": "None", "minHeight": "300px" }, { "type": "ActionSet", "actions": [ { "type": "Action.OpenUrl", "title": "Download Certificate", "url": "https://neudesic.sharepoint.com/:b:/s/neudev/EWDLSQoUHQJGkM-LwPJgwhkB-qVs8nk06027geBe22MUEA?e=WzscF0", "tooltip": "Download" } ], "horizontalAlignment": "Right", "spacing": "Medium" } ], "msTeams": { "width": "full" } }
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
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]" } ] }
Send adaptive card via Graph Mail
Dear community A third-party monitoring application creates static adaptive cards when an alert is triggered. This application calls a PowerShell script and provides a couple parameters including the adaptive card json. I have now tried to pack this adaptive card into a html email and send it via Graph API. Sadly I cannot get it to render the adaptive card for example in Outlook. HTML message <html> <head> <metahttp-equiv="Content-Type"content="text /html;charset=utf-8"> <scripttype='application /adaptivecard+json'> {"type":"AdaptiveCard","version":"1.4","hideOriginalBody":true,"body":[{...}]} </script> </head> <body> </body> </html> Graph Mail $emailRecipients = @( 'email address removed for privacy reasons' ) [array]$toRecipients = ConvertTo-IMicrosoftGraphRecipient -SmtpAddresses $emailRecipients $emailSender = 'email address removed for privacy reasons' $emailSubject = "Sample Email AdaptiveCard" $emailBody = @{ ContentType = 'html' Content = Get-Content -Path 'C:\...\adaptivecard.html' } $body += @{subject = $emailSubject} $body += @{toRecipients = $toRecipients} $body += @{body = $emailBody} $bodyParameter += @{'message' = $body} $bodyParameter += @{'saveToSentItems' = $false} Send-MgUserMail -UserId $emailSender -BodyParameter $bodyParameter I am grateful for any advice or help with this problem. Many thanks SimonAdaptive 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": "Please provide your contact information", "wrap": true, "spacing": "Medium" }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Contact Data", "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": "Please input contact person first name", "label": "First Name", "spacing": "Small", "value": "{{memory.rt_user_first_name}}", "isRequired": true }, { "type": "Input.Text", "label": "Last Name", "id": "rt_user_last_name", "errorMessage": "Please input contact person last name", "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": "Please provide the contact person email" }, { "spacing": "Small", "regex": "^[+][0-9]{10,12}$", "maxLength": 13, "value": "{{memory.rt_user_phone_number}}", "placeholder": "+1", "label": "Phone Number", "type": "Input.Text", "id": "rt_user_phone_number", "errorMessage": "Asking you to kindly enter the phone number in the international format, starting with +, then the country code, operator code and your local number." } ], "id": "contactData", "spacing": "Small" } ] } ] }, { "type": "Container", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Submit" } ] } ] } ] }[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.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 is no, 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.
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 https://adaptivecards.io/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.
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!
