We have a published app in the Teams App Store.
The app has attachments functionality which is built based on the task module.
To upload/download attachment we make an AdaptiveCard and add Submit.Action with msteams object and add out object to it. Example:
"data": {"msteams": {"type": "task/fetch"}, "mmt": {"type": "attachments/upload"}}
Everything worked fine till the 10th of September, when the Teams Desktop Apps stopped rendering our cards (iOS and Android continued working):
After an investigation we've found that Action.Submit caused it. Here's the Action data:
{
"type": "Action.Submit",
"title": "Upload image",
"data": {
"mmt": {
"id": 101,
"type": "bur/kek",
"contentType": "hi/microsoft"
},
"msteams": {
"type": "task/fetch"
}
}
},
The issue is caused by these lines:
"id": 101,
"type": "bur/kek"
If we change id from type int to string or rename field "type" to "anyType" the issue does not appear.
So this looks like a BUG to me.
We are able to repro the issue. Sending card having "id" as int isn't rendering. I faced no issue if I make "id" as string and "type" as "bur/kek".
We have raised a bug for this. Internal team is looking into it. I will update you one it is fixed or if we got update from them.
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 am trying to initiate a call when pressing a button within an adaptive card (in microsoft teams)
I add URL as callto:[useremail]
eventhough when I write this in the search bar in chrome it works, but when pressing the button in the adaptive card it gives me an error on the chrome page.
any idea why might this happen?
Edit:
Here's a sample card of what I used:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"size": "small",
"style": "person",
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"selectAction":{
"type": "Action.OpenUrl",
"url": "callto:rex#gmail.com"
}
}
]
}
]
}
]
}
]
}
It looks like links inside Teams don't support any protocols other than the usual HTTP/S. You can turn your callto link into an https link using a redirect URL service like these: https://www.cnet.com/news/10-links-to-shorten-your-links/
If you need to generate your callto links dynamically, I'm not sure how many of those services have API's your bot can use. TinyURL does though.
It's also pretty simple to just host your own redirection service in your own domain. You could even use the same domain that your bot is running on, so your link might end up looking something like this: https://rexbot.azurewebsites.net/api/callto/rex#gmail.com
Also, you might consider getting support for this from Teams directly. You can request that they support more URL protocols.
We need help in understanding how Microsoft teams like and dislike works with BotFramework. When user clicks on like option provided in background we are getting reactionID but how do we get to know for which specific message user has given his feedback. Do we have this feasibility on Teams?
You can find it in the replyToId. Example from the docs:
The messageReaction event is sent when a user adds or removes his or her reaction to a message which was originally sent by your bot. replyToId contains the ID of the specific message.
{
"reactionsAdded": [
{
"type": "like"
}
],
"type": "messageReaction",
"timestamp": "2017-10-16T18:45:41.943Z",
"id": "f:9f78d1f3",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/amer-client-ss.msg/",
"from": {
"id": "29:1I9Is_Sx0O-Iy2rQ7Xz1lcaPKlO9eqmBRTBuW6XzkFtcjqxTjPaCMij8BVMdBcL9L_RwWNJyAHFQb0TRzXgyQvA",
"aadObjectId": "c33aafc4-646d-4543-9d4c-abd28e4d2110"
},
"conversation": {
"isGroup": true,
"id": "19:3629591d4b774aa08cb0887902eee7c1#thread.skype"
},
"recipient": {
"id": "28:f5d48856-5b42-41a0-8c3a-c5f944b679b0",
"name": "SongsuggesterLocal"
},
"channelData": {
"channel": {
"id": "19:3629591d4b774aa08cb0887902eee7c1#thread.skype"
},
"team": {
"id": "19:efa9296d959346209fea44151c742e73#thread.skype"
},
"tenant": {
"id": "72f988bf-86f1-41af-91ab-2d7cd011db47"
}
},
"replyToId": "1:19uJ8TZA1cZcms7-2HLOW3pWRF4nSWEoVnRqc0DPa_kY"
}
Note, however, that this replyToId is specific to Teams and I don't believe it will persist if you set it yourself. Once you have that, you can update the activity.
If you're trying to analyze which messages are reacted to, you might want to log the outgoing activity's Id and Text in TurnContext.OnSendActivities. Then, when a reaction comes in, you can use the new Activity Handler to handle the message and add the reaction to your log. I believe this would come in OnUnrecognizedActivityTypeAsync. This is similar to the previous link, update the activity.
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.