I trying to find how to put actionable icons on Adaptive cards to use with Microsoft Teams. The aim to replace button with image icon(with all button behavior).
in Adaptive Cards 1.2 any image can have an action, see this example:
{
"type": "Image",
"style": "Person",
"url": "${creator.profileImage}",
"size": "Small",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
The action can be submit, openUrl etc like other actions. You can find the option in the designer aswell to try it.
Related
How can I get user response from the adaptive card using Adaptive Cards Action.Submit action from MS Teams channel using Microsoft Bot Framework?
Here is my sample Adaptive Card with two button Yes and No. Once the user will click on any button, I need to capture the response in the bot application in the backend implemented using Microsoft Bot Framework 4.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "Does this information help you?"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "Yes",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyYes",
"userIds": "" ,
"data":{
"key1": true,
"key2":"okay"
},
"fallback": {
"type": "Action.Submit",
"title": "Yes"
}
},
{
"type": "Action.Execute",
"title": "No",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyNo",
"userIds": "" ,
"data":{
"key1": false,
"key2":"np"
},
"fallback": {
"type": "Action.Submit",
"title": "No"
}
}
]
}
]
}
Every channel has some additional requirement to achieve this kind of requirement obviously MS Teams Channels Adaptive card required special property with the name "msteams" to the object in an object submit action's data property. As per your adaptive card, it only contains 'data' property so change a little bit and try it out.
Example:
{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
},
"extraData": {}
}
}
Reference: Adaptive Cards in Teams
Essentially, your bot is a service waiting to be called by the user. When the user sends a regular text message, that will come in to your bot as a "MessageActivity" event. However, if they click a button in an Adaptive Card, that will come as an "InvokeActivity" event, so you can hook into that and check if the user clicked one of your buttons, and respond appropriately. Here's an example of a bot doing that based on one of it's cards. See in particular OnMessageActivityAsync vs OnInvokeActivityAsync (C# only - see below for Node).
Here's another very detailed blog on working with this, covering both DotNet and Node, from the Microsoft Bot Framework team. That post is a bit old, so it doesn't cover what you're using in your sample, which is quite new - Universal Actions. It's just a slightly newer way of specifying the json for the Action.
This is totally optional, but there's also a way to make the card buttons behave a little differently. For instance, when the user clicks a button you can make it appear as if the user -typed- that text into the bot. See here for more on that.
Going through the issues page of bot framework composer, I stumbled on this issue which shows an interesting UI card for getting the user's satisfactory :
Does this looks like an adaptive card ? How can we reproduce that ?
the easiest thing to do is go to the designer on Adaptivecards.io. They have a super simple Adaptive Cards Designer experience that is drag and drop.
on other tabs they have example templates which you can launch in the designer to see how they work and play with them.
In your example above, the card is simply a text field with two image links and the images are clickable.
You can use the containers and/or columns components in the designer to layout the items.
You can use a hero card to get user satisfaction response by using thumbs up/thumbs down emoji.
[Herocard
text = Are you satisfied?
buttons = 👍 | 👎
]
Following JSON is a sample for thumbs up and down input choice
{
"type": "TextBlock",
"text": "Do you like the product"
},
{
"type": "Input.ChoiceSet",
"style": "expanded",
"isMultiSelect": false,
"choices": [
{
"title": "👍",
"value": "yes"
},
{
"title": "👎",
"value": "no"
}
],
"placeholder": "Placeholder text",
"spacing": "None"
},
I'm trying to add required validation to check whether the comment box is empty or not. I have checked on multiple places and blogs to make it work but some how validation is not working at all in Teams. When i'm using Designer of Adaptive card it is working as expected.
Below is the JSON code i'm using in my teams bot.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "Input.Text",
"label": "Comments",
"style": "text",
"isMultiline": true,
"id": "MultiLineVal",
"isRequired": true,
"errorMessage": "required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
Designer Screen grab
Have a look at this reference on input validation and notice that it's referrring to Adaptive Cards 1.3 and above, whereas, as explained here, Teams is currently a bit behind, supporting up to Adaptive Cards 1.2 only. The products, while related, are different and have different release cycles - hopefully 1.3 will come soon for Teams.
When posting adaptive cards to Microsoft Teams from Flow, the message appears to be squished to about 50% width. It doesn't expand to fit the message container in Teams.
Squished Adaptive Card
The "Full Width" Adaptive Card functionality was released at some point and is now available.
Microsoft has documentented how it works:
Constructing full width cards
To make a full width Adaptive card the
width object in msteams property in the card content must be set to
Full. In addition, your app must include the following elements:
{
"type": "AdaptiveCard",
"body": [{
"type": "Container",
"items": [{
"type": "TextBlock",
"text": "Digest card",
"size": "Large",
"weight": "Bolder"
}]
}],
"msteams": {
"width": "Full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
Current behavior is by design, however we have backlog item to support full width adaptive card. I'll keep this thread updated.
I am trying to create a bot and deploy it onto different platforms, but when I return images in the carousel for the chatbot, Skype doesn't render them, while the same works for Facebook and even on the web widget provided by Gupshup.
If you want to know the chatbot platform i'm using it would be Gupshup with api.ai hooked for nlp , do you know the problem i am encountering?
I have tried different ways of getting the image. First I got it from the site I am making the chatbot for, then I tried shortening the url using google and finally I tried uploading the image on Google drive.The image format is jpg could that be the issue?
http://imgur.com/a/19aG3
[Update:7/5/2017] - Skype issue is now resolved. The carousel code that is working for Facebook Messenger will also work for Skype.
Sample JSON for Carousel on Skype:
{
"type": "catalogue",
"msgid": "cat_212",
"items": [{
"title": "White T Shirt",
"subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$10",
"imgurl": "https://pixel.nymag.com/imgs/fashion/daily/2016/06/02/t-shirt/everlane.w710.h473.2x.jpg",
"options": [{
"type": "url",
"title": "View Details",
"url": "https://pixel.nymag.com/imgs/fashion/daily/2016/06/02/t-shirt/everlane.w710.h473.2x.jpg"
},
{
"type": "text",
"title": "Buy"
}
]
},
{
"title": "Grey T Shirt",
"subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$12",
"imgurl": "https://cdn.shopify.com/s/files/1/0407/0829/products/Grey_t-shirt_front_1024x1024.jpg?v=1466588290",
"options": [{
"type": "url",
"title": "View Details",
"url": "https://cdn.shopify.com/s/files/1/0407/0829/products/Grey_t-shirt_front_1024x1024.jpg?v=1466588290"
},
{
"type": "text",
"title": "Buy"
}
]
}
]}
Result:
Images are not loading for the carousel on Skype because there have
been recent changes in Microsoft framework which are not yet
incorporated in Gupshup's bot platform. Although next week you should
be able to see those images load once we at Gupshup pushes the fix
into production. There will be no need of changing the code from your
end as the same code for carousel works across the supported
platforms.
I will update this answer once the fix is live into production.
PS: I work for Gupshup.