I don't want to use builder.Prompts.choicesince i want to allow user type answer not only click buttons. So i use sourceEvent, works great with facebook messenger but know i don't have ability to test my bot in emulator, since buttons not appear.
replyMessage.sourceEvent({
facebook: {
quick_replies: [
{
"content_type": "text",
"title": "Money Management",
"payload": "Money Management"
},
{
"content_type": "text",
"title": "Retirement Plans",
"payload": "Retirement Plans"
}
]
},
});
How to show buttons with sourceEvent in emulator?
Ok screenshot we see that buttons get to bot emulator as attachments.
let replyMessage = new builder.Message(session).text("hi");
replyMessage.addAttachment(
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"buttons": [ {"type": "postBack", "title": "Your title", "value": "your value"} ]
}
}
);
Related
I'm building a Microsoft Teams app with the botbuilder in typescript. Everything is working fine except the UI is not matching exactly what I want. Im using an adaptive card to render my responses to the user and typically the adaptive card has a top border (seen below is black) but mine doesnt have it and i'm trying to figure out how i can make it work.
I want my card to have the black border on top as shown here for in github's bot:
See image
This is what mine currently shows:
see image
below is my code to render the card. What i'm i doing wrong?
await context.sendActivity({ attachments: [
CardFactory.adaptiveCard({
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"msteams": {
"width": "Full"
},
"body": [
{
"type": "TextBlock",
"text": "My card doesnt have the border.",
"wrap": true
}
]
})
] });
I figured it out and it was a simple fix. The code now looks like this.
"body": [
{
"type": "TextBlock",
"text": "My card doesnt have the border.",
"wrap": true,
"style": {
"borderTopWidth": 1,
"borderTopColor": "#000"
}
}
] });
I finally figured out the solution. I had to the office 365 connector card to get that color strip. FINALLY!
Here's the code sample for Nodejs/typescript:
CardFactory.o365ConnectorCard({
"title": "card title",
"text": "card text",
"summary": "O365 card summary",
"themeColor": "#E67A9E",
"sections": [
{
"text": "This is some <strong>bold</strong> text"
},
{
"text": "This is some <em>italic</em> text"
},
{
"text": "This is some <strike>strikethrough</strike> text"
},
{
"text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
},
{
"text": "bullet list <ul><li>text</li><li>text</li></ul>"
},
{
"text": "ordered list <ol><li>text</li><li>text</li></ol>"
},
{
"text": "hyperlink Bing"
},
{
"text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
},
{
"text": "preformatted text <pre>text</pre>"
},
{
"text": "Paragraphs <p>Line a</p><p>Line b</p>"
},
{
"text": "<blockquote>Blockquote text</blockquote>"
}
]
})
On Microsoft Teams, we have a bot that sends AdaptiveCard message activities to users through the Microsoft Bot Framework REST API. Sometimes, the AdaptiveCard contains an Action.OpenUrl. With regular links such as https://google.com it works as expected, but since about one month, URL parameters with a mailto url such as mailto:recipient#domain.com no longer work: the message is sent, the button appears but clicking it does not do anything.
Sample request:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conversation_id>/activities
Body:
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "mailto:antoine.chopin#heyaxel.com",
"title": "TEST"
}
]
}
],
"actions": []
}
}
]
}
Currently openSafeUrlMT does not allow mailto urls. we already have a backlog feature request on this. Concern team is working on this.
We are implementing search command for microsoft teams.
When composeExtension/query is invoked then bot returns list of attachments with previews that includes a Tap Tap = new CardAction { Type = "invoke", Value.... Like in this example https://learn.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/search-commands/respond-to-search?tabs=dotnet#response-example
After this teams shows search result. When user clicks on any result then bot is invoked with composeExtension/selectItem and returns new AdaptiveCard as result. Then teams shows this card but without app icon/title. Also following error is logged in teams
0-angular-jquery.min-eee9041.js:114 2021-01-15T16:29:22.175Z AppsService: getInstalledAppForUser - Invalid appId specified
(anonymous) # 0-angular-jquery.min-eee9041.js:114
(anonymous) # 3.2-app.min-e6c3257.js:1
...
Uncaught (in promise) Invalid appId specified
But when user submit this card then it's shown correctly (with app icon/title and etc).
Can somebody help to fix this problem? Thanks in advance :)
This is the response for composeExtension/selectItem
{
"composeExtension": {
"attachments": [
{
"content": {
"type": "AdaptiveCard",
"body": [
{
"items": [
{
"text": "Untitled task",
"type": "TextBlock"
...
}
],
"separator": false,
"type": "Container"
}
//...
],
"actions": [
{
"url": "https://.....",
"title": "View activity",
"type": "Action.OpenUrl"
}
],
"version": "1.2"
},
"contentType": "application/vnd.microsoft.card.adaptive",
"preview": {
"content": {
"title": "Preview"
},
"contentType": "application/vnd.microsoft.card.hero"
}
}
],
"type": "result",
"attachmentLayout": "list"
},
"responseType": "composeExtension"
}
Thank you for the Insights. We have raised a bug on the issue and it is being tracked internally.
For our bot in Teams, using the Microsoft Bot Framework, I want the bot to send a card with a button that, when clicked, will open a task module through a deep link
Deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=<card>
Where <card> comes from the example in the docs:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Here is a ninja cat:"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png",
"size": "Medium"
}
],
"version": "1.0"
}
URL encode the JSON to: %7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
We then have deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
Finally, send message through Bot Framework API:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conv_id>/activities
Body:
{
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"text": "Hi 👋<br/><br/>What do you need?",
"textFormat": "xml",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content" : {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"actions": [{
"type": "Action.OpenUrl",
"title": "Display task",
"url": "https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D"
}],
"body": []}}]}
The message appears in Teams as expected, but when clicking the button nothing happens. What am I doing wrong?
The issue was that I was sending my bot id instead of my app id for the APP_ID parameter.
I don't understand this in the docs though:
Note that it's valid for APP_ID and BOT_APP_ID to be the same, and in many cases will be if an app has a bot since it's recommended to use that as an app's ID if there is one.
How is one supposed to achieve this?
I am serving out O365 connector cards to my teams channel in my chatbot, for the user to use an HttpPost action to send data back to the bot.
Here is a sample invoke message when the user saves:
{
"name": "actionableMessage/executeAction",
"type": "invoke",
"timestamp": "2018-06-16T20:58:24.388Z",
"localTimestamp": "2018-06-16T21:58:24.388+01:00",
"id": "snip",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/emea-client-ss.msg/",
"from": {
"id": "snip",
"name": "my name",
"aadObjectId": "snip"
},
"conversation": {
"conversationType": "personal",
"id": "long conversation id"
},
"recipient": {
"id": "bot id",
"name": "bot name"
},
"entities": [
{
"locale": "en-US",
"country": "US",
"platform": "Web",
"type": "clientInfo"
}
],
"channelData": {
"tenant": {
"id": "tenant id"
},
"source": {
"name": "message"
}
},
"replyToId": "message id",
"value": {
"body": "{\"sportType\":\"1\", \"tournamentName\":\"FIFA Soccer World Cup\",\"startTime\":\"2018-06-14T03: 00: 00.000Z\", \"endTime\":\"2018-07-16T07: 30: 00.000Z\", \"timeZone\":\"Russian Standard Time\", \"tournamentId\": \"1\"}",
"actionId": "SaveTournament"
}
}
In response to a save card, I am returning an ActionCard in the response body, and I am including an HTTP header "CARD-UPDATE-IN-BODY" with a value "true". Here is a sample response message:
{
"#type": "ActionCard",
"inputs": [
{
"#type": "TextInput",
"isMultiline": true,
"maxLength": 500.0,
"id": "SaveStatus",
"isRequired": false,
"title": "Save Status",
"value": "You updated the tournament FIFA Soccer World Cup running from 6/14/2018 to 7/16/2018 in timezone Russian Standard Time"
}
],
"actions": [
{
"#type": "HttpPOST",
"body": "{\"tournamentId\": \"1\"}",
"name": "Update FIFA Soccer World Cup again",
"#id": "UpdateTournament#1"
}
],
"name": "Save Tournament",
"#id": "SaveTournament"
}
I have traced this in my web app so I know that is what is being returned to the bot framework middleware.
In my teams app in the browser,when I trace the response message with Fiddler, the card invoke response is not getting the refresh card I send, it is just getting a generic 200 response with an empty response body. Can anyone point me to a demo of refresh cards that work with Teams, or tell me what's wrong with my messages?
Teams doesn't support updating the original card by responding to the invoke message. Instead, you need to explicitly update the message by calling the Bot Framework API (see https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/bots/bot-conversations/bots-conversations#updating-messages).
The incoming invoke message has the information you need to update the original message:
<serviceurl>/v3/conversations/<conversationid>/activities/<activityid>
<serviceurl>: serviceUrl
<conversationid>: conversation.id
<activityid>: replyToId
(The details of how to update a message depends on exactly which SDK you're using, but in the end you'll need those 3 items to refer to the message.)