I have created an outgoing webhook for my teams channel.
When user enters #aa it calls my external web service and server responds with an adaptive card.
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": " Project Management Hours",
"horizontalAlignment": "Center",
"wrap": true
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": " Notes",
"horizontalAlignment": "Left",
"wrap": false
},
{
"type": "Input.Text",
"isMultiline": true,
"id": "MultiLineVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"associatedInputs": "Auto"
"data": {
"id": "1234567890"
},
]
}
}
]
}';
The user in teams is present with this form. When they click submit, I want the data collected from the form sent back to the same webservice. How do i accomplish this?
#Meghana-MSFT is correct.
Adaptive Cards in Outgoing Webhooks only support openURL card actions.
For more information, please review the documentation here.
Related
I am new to PVA and everything associated with it. I currently have a working multiple choice Herocard for Teams that displays a menu option for the user, whatever option they choose the PVA topic is redirected. In test bot PVA it shows a nice vertical selection, but when I publish and channel with Teams, it looks like this image,
Teams Image
So, I figured maybe I can create a Adaptive Card that can have the same functionality, but with the vertical selection option for Teams like this image,
Adaptive Card
I'm not very familiar with Adaptive Cards, though I have tried a few iterations using Containers and TextBlocks. It was able to be displayed in the Test bot as well as teams, but I wasn't able to click on an option and be redirected to a different topic. I've come to the conclusion that ActionSets may be the key to allowing the user to click on a selection box and redirect to another PVA topic (Correct me if I'm wrong please :D, or maybe I missed something when trying the Containers and Textblocks)
Does anyone have an idea on how I can bridge this adaptive card to Bot Framework Composer to display the adaptive card in teams for users to select an option and that option would then redirect to another PVA topic. I know I'm missing something to be able to communicate with my Adaptive Card on Bot Framework Composer, heres an image
Bot Framework Composer
AdaptiveCard
`
[import](common.lg)
# adaptivecardjson_Main_Menu(Location)
- ```
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Employee Handbook",
"associatedInputs": "none"
}
],
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "Policy Manual",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "Payroll",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "Insurance Benefits",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "Health Savings Account",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "401(k)",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
},
{
"type": "ActionSet",
"spacing": "Small",
"separator": true,
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Submit",
"title": "Other",
"associatedInputs": "none"
}
],
"id": "dialog.UserChoice"
}
]
}```
# AdaptiveCard_Main_Menu(Location)
[Activity
Attachments = ${json(adaptivecardjson_Main_Menu(Location))}
]
# SendActivity_XJFtJ8()
- ${AdaptiveCard_Main_Menu(virtualagent.user_city)}
I listed what I tried above, I really need someone else's insights, ideas or maybe someone knows a solution to this. I was expecting to somehow connect a condition called dialog.UserChoice that would allow for the Adaptive Card to display the options and with Bot Framework with whatever option that is selected to be redirected to that topic.
I'm relatively new to this so please bare with me. I'm creating adaptive cards in PowerAutomate to post in Teams. I was previously using the built-in card designer in PowerAutomate but that's been deprecated (and consequently added weeks to my implementation as I'm severely struggling with Designer).
I've created a card in Designer, added it to my flow, and made changes as needed. I now need to troubleshoot some issues so I want to load it back into Designer. When I paste my payload back into the designer to refine it (the bottom left section), the app elements (main window) are not not always refreshing. Sometimes it does, sometimes it doesn't.
I could be doing something totally incorrect but what I'm doing has been working with moderate success up until recently where it works totally randomly.
Below is the code I'm trying to populate into designer. I usually find success when I paste this into the default template leaving the Sample Data as is. At the moment, nothing is happening when I do so.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "Miami Warehouse",
"color": "Accent",
"isSubtle": true,
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "The packing slip for PO: #{outputs('Get_item')?['body/PO']} has been reviewed and processed. ",
"wrap": true,
"color": "Default"
},
{
"type": "TextBlock",
"text": "Let us know when you've inventoried the shipment.",
"wrap": true,
"color": "Attention",
"size": "Large",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Please update the package information below.",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "#{outputs('Get_item')?['body/Name']}",
"url": "#{outputs('Get_item')?['body/Link']}",
"id": "linktofile"
}
],
"id": "file"
},
{
"placeholder": "File Name",
"type": "Input.Text",
"id": "filename",
"spacing": "Medium",
"label": "File Name:",
"value": "#{outputs('Get_item')?['body/Name']}"
},
{
"type": "Input.Text",
"placeholder": "PO Number",
"id": "po",
"spacing": "Medium",
"label": "PO Number:",
"value": "#{outputs('Get_item')?['body/PO']}"
},
{
"type": "Input.Text",
"placeholder": "Client Name",
"id": "client",
"spacing": "Medium",
"label": "Client:",
"value": "#{outputs('Get_item')?['body/Client']}"
},
{
"type": "Input.Text",
"placeholder": "Project Name",
"id": "project",
"spacing": "Medium",
"label": "Project Name:",
"value": "#{outputs('Get_item')?['body/Project']}"
},
{
"type": "Input.ChoiceSet",
"choices": #{body('Select')},
"id": "projectmanager",
"value": "#{outputs('Get_item')?['body/Project_x0020_Manager']}",
"label": "Project Manager"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"type": "Column",
"items": [
{
"type": "Input.Text",
"spacing": "None",
"placeholder": "Optional",
"id": "trackingnumber",
"label": "Tracking Number:",
"value": "#{outputs('Get_item')?['body/Tracking_x0020_Number']}"
}
]
},
{
"width": "stretch",
"type": "Column",
"items": [
{
"placeholder": "Optional",
"type": "Input.Text",
"spacing": "Medium",
"id": "carrier",
"label": "Carrier:",
"value": "#{outputs('Get_item')?['body/Carrier']}"
}
]
}
]
},
{
"type": "Input.Text",
"isMultiline": true,
"id": "notes",
"spacing": "Medium",
"label": "Description:",
"placeholder": "",
"value": ""
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "SHIPMENT INVENTORIED",
"id": "inventoried"
}
]
}
]
}
This is probably due to JSON that you have provided is not valid
As you can see here it is showing error at Input.ChoiceSet if I make #{body('Select'} as string i.e. "#{body('Select'}" it doesn't give any error and I can see the preview of it.
This error you will get in Adaptive Card designer itself if you look closely, also there are multiple JSON validator available on web. Such as https://jsonlint.com/
I am currently learning about Adaptive cards for using it in Power Automate to send them to Microsoft teams.
As an exercise I needed to build this card: Candidate FeedBack form
I built the card in the Microsoft Adaptive card designer and I got this card payload:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "CANDIDATE FEEDBACK FORM"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "{CandidateUrl}",
"altText": "ProfilePicture",
"horizontalAlignment": "Left",
"style": "Person"
}
],
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "{Candidate Name}",
"wrap": true,
"color": "Dark"
}
]
}
]
},
{
"type": "Container",
"backgroundImage": {
"url": "https://www.solidbackgrounds.com/images/950x350/950x350-light-gray-solid-color-background.jpg"
},
"items": [
{
"type": "Input.Text",
"placeholder": "Input candidate comments",
"id": "CandidateComments",
"isMultiline": true,
"isRequired": true,
"label": "Comments",
"errorMessage": "You must set the candidate comments"
},
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Hire",
"value": "Hire"
},
{
"title": "No Hire",
"value": "No Hire"
}
],
"placeholder": "Placeholder text",
"isRequired": true,
"style": "expanded",
"id": "Decision",
"label": "Decision",
"errorMessage": "You must select the decision"
},
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Past experience in the topic area",
"value": "Experience"
},
{
"title": "Inclusive behaviors and work ethics",
"value": "Inclusivity"
},
{
"title": "Ability to work without supervision",
"value": "Independent"
}
],
"placeholder": "Placeholder text",
"isMultiSelect": true,
"style": "expanded",
"label": "Suggest follow-up discussion regarding:",
"id": "Suggestion"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
The card is working ok but I got an idea and I have not been able to do it. The thing is that I would like that the Suggestion Choice element only appears if the user selects the "Hire" decision, because it does not have much sense to have a follow-up discussion with someone that you decided not to hire.
I noticed that the ChoiceSet has a property called "Only show when" but I only have been able to make it work using the sample data editor. For example when I add this data to the sample data editor:
{
"Test":"Testing"
}
And this expression in "Only show when": ${$root.Test == "Testing"}, It works but I don't need it to do it with sample data but when the id "Decision" is equal to "Hire". So that is the question, how can I achieve that the ChoiceSet is only shown when the id "Decision" is equal to "Hire".
PS: Other thing that I saw is that I can unmark the ChoiceSet as "Initially Visible" and there is an action "ToggleVisibility" which can make it visible, but I don't know how to trigger that action only when the Hire decision is chosen.
Thank you in advance!
You can't do it directly from the UI itself. You can update the card when user submits it, but right now there is no such action available that can execute some event on checkbox check and uncheck.
I'm developing a one-on-one Bot App (Azure Bot Framework) for MS Teams. A use case is simple: a user installs the Bot and Bot sends him with a welcome message plus a bunch of available functions (a menu).
My questions:
What is the best practice to display the main menu for the Bot if we speak about MS Teams?
Is it possible to have the main menu for Bot with buttons? And how to create it?
As I found Microsoft suggests using a dropdown menu (https://learn.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-menus) for this purpose. But it doesn't work on mobile devices and a user has to write the command to the Bot manually - it is not the best option from UX point of view.
When I try to use buttons then I struggle with another problem: in the Adaptive Card buttons show in one line. If I separate buttons in the different column sets then:
In the desktop app everything is fine (but anyway buttons have different width).
In the iOS app everything is fine (but anyway buttons have different width).
In the Android app buttons are displayed glued to each other (without any vertical margin between them)
JSON for main menu that I used:
{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "%%0"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Use enhanced password policy",
"style": "positive",
"data": {
"id": "services/pw_policy"
}
}
],
"spacing" : "Medium"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Reset HPA password",
"style": "positive",
"data": {
"id": "services/hpa_reset_pswd"
}
}
],
"spacing" : "Medium"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Use Colmn Set
{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "%%0"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Use enhanced password policy",
"style": "positive",
"data": {
"id": "services/pw_policy"
}
}
],
"spacing": "Medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Reset HPA password",
"style": "positive",
"data": {
"id": "services/hpa_reset_pswd"
}
}
],
"spacing": "Medium"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
How to implement multiselect in drop down list through adaptive cards to fill a form which contains the name of employees to select.
If not what are the other ways to implement multiselect in Ms Teams through bot.
Multiselect like this.
Check and build samples.
Check this sample Adaptive card
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"speak": "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
"body": [
{
"type": "TextBlock",
"text": "${summary}",
"size": "Large",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": " ${location} ",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}",
"isSubtle": true,
"spacing": "None"
},
{
"type": "TextBlock",
"text": "Snooze for"
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"value": "${reminders.overrides[0].minutes}",
"choices": [
{
"$data": "${reminders.overrides}",
"title": "${hours} hours",
"value": "${hours}"
},
{
"$data": "${reminders.overrides}",
"title": "${minutes} minutes",
"value": "${minutes}"
},
{
"$data": "${reminders.overrides}",
"title": "${seconds} seconds",
"value": "${seconds}"
}
],
"isMultiSelect": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Snooze",
"data": {
"x": "snooze"
}
},
{
"type": "Action.Submit",
"title": "I'll be late",
"data": {
"x": "late"
}
}
]
}