MS Teams Bot App - How to display main menu with buttons? - botframework

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"
}

Related

How to display a selection option Adaptive Card in PVA Teams using Bot Framework Composer

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.

How to create a teams card using external webservice and post data

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.

Only show an element when another input element is set - Adaptive Cards

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.

Image in Adaptive card inside Action.ShowCard button in showing undefined

I have an Adaptive card the code is below. The problem I am facing is The card that will be displayed after clicking the Action.ShowCard button can not render Image. It says undefined. The same image gets displayed when I use it in a normal card. I think it cannot render the image that is in the card of the button. To test it you can copy the code in your App Studio's UI Tool and click Send me this card
Screen shot of what I get
Main code
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
],
"actions":[
{
"type": "Action.ShowCard",
"title": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"msteams": {
"entities": []
},
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png",
"size": "Small"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Color theorysdjkf",
"wrap": true,
"weight": "Bolder",
"color": "Attention"
}
],
"verticalContentAlignment": "Center"
}
],
"height": "stretch",
"horizontalAlignment": "Center",
"separator": true,
"spacing": "Large"
},
{
"type": "TextBlock",
"wrap": true,
"spacing": "Small",
"text": "You selected **A**"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "This is a long explanation for the answer and I think it is getting so long and long and long long long long "
}
]
}
],
"style": "emphasis",
"spacing": "Small"
}
]
},
"style": "positive"
}
]
}
Looks like it is a platform issue.
We have raised a bug for it.
We will let you know once it is resolved.
Thanks!!
I tried base64 encoding the image (and tried a very small minified version - 23k), but that also failed. It looks like a bug to me. There are several Microsoft people here on Stack Overflow so they'll pick this up and feed it back if they can repro it (which they should have no trouble doing).

Microsoft Teams Adaptive Card Input.ChoiceSet Apostrophe Rendered Differently

When I create an Adaptive Card for Microsoft Teams with an Input.ChoiceSet value and that value contains an apostrophe, Microsoft Teams OS X and web clients show ', the iOS and Android clients show the apostrophe (correct).
What can I do differently to get the Input.ChoiceSet value to render the apostrophe in every case?
Here's the card schema and a render below.
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Command Center",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Please choose a scenario to submit."
},
{
"type": "Input.ChoiceSet",
"id": "scenario-id",
"style": "compact",
"isMultiSelect": false,
"value": "71ae62b1-f04e-11e9-b862-577308a243ca",
"choices": [
{
"value": "71ae62b1-f04e-11e9-b862-577308a243ca",
"title": "Foo's Bar"
},
{
"value": "16db3124-f42d-11e9-bde7-819811d8b810",
"title": "Second"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"id": "popup",
"title": "Continue...",
"data": {
"msteams": {
"type": "task/fetch"
}
}
}
]
}
}
]
}
Teams OS X and Teams Android Render
#MarkSingleWire Thanks for reporting this. We have raised a bug for this and we are looking into this internally.

Resources