Adaptive Cards
47 TopicsBuild a Gift Declaration solution with the Power Platform
As part of a program hosted by Greenlight Solutions to get young talent Microsoft Certified in Power Platform; 15 students – myself included - were each given a scenario where everyone was expected to develop a solution using the Microsoft Power Platform.4.3KViews4likes0CommentsAdaptive 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" } ] } ] } ] }1.1KViews3likes7CommentsBuild a Training Request solution using the Power Platform
As part of a program hosted by Greenlight Solutions to get young talent Microsoft Certified in Power Platform; 15 students – myself included - were each given a scenario where everyone was expected to develop a solution using the Microsoft Power Platform4.3KViews3likes0CommentsImage inserted in incoming webhook is not working for new Teams version.
I am trying to insert an image into an incoming 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,8.1KViews2likes39CommentsMicrosoft Teams Adaptive Card Renderer on Input.ChoiceSet
Default Behaviour in Input.ChoiceSet: When a choice from the ChoiceSet is selected, there is no event sent to the bot. Expected Behaviour: If there is any change in selection in Input.ChoiceSet, a event should get triggered to the bot, so that we can do some necessary changes/updates in the responseCard. How can we do that using the existing component of Input.ChoiceSet ?1.3KViews2likes2CommentsAdaptive Cards from Flow bot showing up blank in iOS
Hey there! I've created a flow in Power Automate that, when a new item is created in a specific SharePoint list is created, it posts an adaptive card in a channel in Teams. The card includes a bunch of information from that list, a button link to edit the list item, and another button linking off to some related material. On desktop, each new item on the list creates a new card in the desktop app channel as expected. However, on mobile, this happens: I have the following at the top of my adaptive card: "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", Is it perhaps something with how I initialized it? (I will say that adaptive cards messaged to individual users by Flow bot seem to be working fine.) This is my first post, so please let me know if I've been naughty and this belongs somewhere else. (I see a bug posting area in UserVoice and something called answers.microsoft.com and the difference between these three very similar-seeming areas unfortunately eludes me.)Solved4.5KViews2likes5CommentsAdaptive 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.2.6KViews1like9CommentsImages 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 regards14KViews1like42CommentsUnable to reach app - Adaptive Cards
I've written some adaptive cards to track employee responses to tasks. The adaptive card comes from the power automate 'Post an adaptive card and wait for a response' flow. My card has a single button on it that allows the user to respond and the flow will have a bot post the time at which they pressed the button. However, it seems that Teams randomly doesn't process the odd button press and leaves the error below, however, the response is still posted by the bot so the flow is working fine. I can't seem to find what is in common between the times when it fails and when it succeeds, has anyone had this issue with Teams and adaptive cards with responses? It is supposed to be changed to something like below. (The response)9.5KViews1like23CommentsHow can open sign in dialog inside the ms team
I am trying to create custom app through bot framework i want to open sign in dialog box inside the ms teams but i don't know how can i do this every time when i click on link sign in page open in the browser. I am testing in emulator every time when i click on link it open in browser welcome.json { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Hi! I'm Bot - welcome to our app for Microsoft Team!", "wrap": true, "weight": "Bolder" } ] }, { "type": "Container", "items": [ { "type": "TextBlock", "wrap": true, "weight": "Lighter", "text": "I'm here to help you manage your tickets with in teams." }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Here's what can i do:" }, { "type": "TextBlock", "text": "Create a new ticket.", "wrap": true } ] } ], "verticalContentAlignment": "Bottom" }, { "type": "TextBlock", "text": "Post ticket related notifications to the team channel of your choice.", "wrap": true }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "For more information, visit our [knowledge base article](https://example.com/blog/). If you're the help desk administrator, please link to start using Bot for Microsoft Teams, [Book a demo](https://example.com/) if you don't have account", "wrap": true } ] }, { "type": "Container", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.OpenUrl", "title": "Link", "url": "https://ngrok.io/sign_in" } ] } ] } ] } bot.ts this.onMembersAdded(async (context, next) => { const welcomeCard: Attachment = CardFactory.adaptiveCard(WelcomeCard); const membersAdded = context.activity.membersAdded; for (const member of membersAdded) { if (member.id !== context.activity.recipient.id) { // If we are in Microsoft Teams if (context.activity.channelId === 'msteams') { // Send a message with an @Mention await this._messageWithMention(context, member, welcomeCard); } else { await context.sendActivity({ attachments: [welcomeCard] }); } } } // By calling next() you ensure that the next BotHandler is run. await next(); });2.2KViews1like5Comments