I'm trying to send a Connector Card with the Hero Image tag.
I have followed the examples from the MessageCard Playground
but even when copying the examples exactly, they will not show either. No errors, the card shows fine, except for the hero image.
The json I'm sending:
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Task 42",
"title": "Task Done: \"Building the Super Computer\"",
"sections": [
{
"activityTitle": "Mice of Earth",
"activitySubtitle": "9/13/2016, 11:46am",
"activityImage": "http://static.website.com/images/smallimage.jpg",
"facts": [
{
"name": "Team:",
"value": "Team-Poster"
},
{
"name": "Task #:",
"value": "42"
}
],
"text": "Build supercomputer to answer the ultimate question",
"heroImage": {
"image": "http://static.website.com/images/party-1644648_1920.jpg",
"title": "This is the image's alternate text"
},
}
]
}
The Outlook Actionable Messages documentation also talks about the hero image, but lacks examples.
Yes, Currently the Hero Image is not supported in Microsoft teams for Connector Cards. You can follow the documentation here : https://msdn.microsoft.com/en-us/microsoft-teams/teams-bots-cards and https://msdn.microsoft.com/en-us/microsoft-teams/connectors, it is clearly stated.
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>"
}
]
})
I recently made my first Slack app - a sort of Tech Support FAQs tool for my workplace workspace.
I originally wanted the responses to be much more complex using the Slack Block Kit, and having trawled the documentation on the Slack API site it looked like I could simply exchange Attachments for Blocks:
function respondWithFaq(text, callbackId, respond, choice) {
frequentlyAskedQuestions.callback_id = callbackId
frequentlyAskedQuestions.text = 'What are you trying to do?'
respond({
text: text,
attachments: [frequentlyAskedQuestions[choice]], //All different choices are saved in a .json array and then saved at the top in a variable called frequentlyAskedQuestions
replace_original: true
})
}
However, when I swap that tag out the messages never print. I have used the Block Kit builder to try and construct more complex and useful responses using multiple sections but it doesn't seem to like more than 1 section in it's responses.
My .json files are structured in arrays depending on which choice was made in the previous select menu like so:
[
{
"fallback": "Upgrade your Slack client to use messages like these.",
"color": "#3AA3E3",
"attachment_type": "default",
"callback_id" : "slack_help",
"actions": [
{
"name": "subject_list",
"text": "Select one",
"type": "select",
"options": [
{
"text": "Add somebody to a channel",
"value": "addToChannel"
},
{
"text": "Find an old message",
"value": "oldMessageThread"
},
{
"text": "Fix my camera",
"value": "cameraBroken"
},
{
"text": "Fix my audio",
"value": "audioBroken"
},
{
"text": "Add a new workspace",
"value": "addWorkspace"
},
{
"text": "Submit a support ticket",
"value": "submitTicket"
}
]
}
]
},
{
"fallback": "Upgrade your Slack client to use messages like these.",
"color": "#3AA3E3",
"attachment_type": "default",
"callback_id" : "box_help",
"actions": [
{
"name": "subject_list",
"text": "Select one",
"type": "select",
"options": [
{
"text": "Fix Box Tools",
"value": "boxTools"
},
{
"text": "Unable to open a file from Box",
"value": "microsoftOnline"
},
{
"text": "Find a file or folder",
"value": "findFile"
},
{
"text": "Edit a file that has been shared with me",
"value": "editFile"
},
{
"text": "Merge my Box accounts",
"value": "accountMerge"
},
{
"text": "Submit a support ticket",
"value": "submitTicket"
}
]
}
]
},
and so on...
I wondered if this was something to do with the Response URL formatting but having read that documentation it appears that Blocks can be used within that.
Any advice or documentation that could help me with this?
I recognise that I am quite new to coding and perhaps I've done something really obvious - please point it out so I can learn!
I followed this tutorial online to create the app, and as they used attachments so did I. Then I tried to adapt from there.
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"} ]
}
}
);
I've been trying to send cards to Teams channels through a connector. The cards do appear but any hero image I try to send isn't displayed.
The Message Card Playground displays the image correctly but it simply doesn't show up in Teams. I have no issues with the "normal" images.
Here is the JSON that I'm sending through the webhook, but I've also tried the Twitter - Hero image sample card and it doesn't work either :
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Hero card testing",
"title": null,
"text": null,
"themeColor": "19b5fe",
"sections": [
{
"title": null,
"activityImage": "https://pbs.twimg.com/profile_images/862653089916096512/ljJwcmFp_bigger.jpg",
"activityTitle": "Hero image card",
"activitySubtitle": "This is a test",
"facts": [],
"text": null,
"heroImage": {
"image": "https://pbs.twimg.com/media/DFv74A0XkAEdwQ_.jpg"
},
"images": []
}
]
}
Am I missing something ?
I hit the same problem. It looks like as a sort of workaround you can use the inline image markdown syntax in a non-section's text.
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Summary",
"title": "Title",
"text": "",
"themeColor": "E81123"
}
I describe it as a workaround though because the image is not scaled in any way when displayed. As you can see from this example a large image is left very large and overflowing the container.
HeroImage is not currently supported in Teams. This is on the backlog but no ETA at this point.
Hero Images ('heroImage') are currently support only in Outlook. Would be available in Teams sometime in future.
Card with a hero image
Try the sample Twitter markup for in the card playground: https://aka.ms/messagecardplayground
Consider there is a action card response from the MS bot & it looks as follows in skype:
When this similar response comes in the REST APIs i.e using Direct Line APIs. The following is the relevant part of JSON response.
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
},
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"text": "Hero Card\n\nSpace Needle\n\nThe <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.\n\n(Current Weather) action?weather=Seattle, WA",
"images": [],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
}
Now, the question is about how do we parse this json to get the button data [(Current Weather) action?weather=Seattle, WA"] out of the text attribute? Is the only way is patter match ?
Has anyone faced or know solution, please put some light here too ;)
Update: If its different channel like skype/webchat/etc.. the JSON response looks very proper to consume, following is the sample JSON.
{
"type": "message",
"id": "5AdoK89rtSc|000000000000000018",
"timestamp": "2016-12-06T09:53:20.4777291Z",
"channelId": "webchat",
"from": {
"id": "rich3cards",
"name": "RichCards"
},
"conversation": {
"id": "5AdoK89rtSc"
},
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Hero Card",
"subtitle": "Space Needle",
"text": "The <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.",
"images": [
{
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
}
],
"buttons": [
{
"type": "postBack",
"value": "action?weather=Seattle, WA",
"title": "Current Weather"
}
]
}
}
]
As mentioned in the comments, you are using DirectLine v1.1. Unfortunately, v1.1 doesn't support attachments/cards and so there isn't a good way to understand/parse the card.
You might want to consider moving to DirectLine v3 which has full support for attachments.
Alternatively, if you want to support Cards, you might have to do something custom as shown in the DirectLine sample. There, the bot is sending the hero card through the ChannelData field and the client is parsing that accordingly. However, you might have to add the logic to detect who is talking to the bot so you send the cards as ChannelData only if the caller is DirectLine and not one of the other clients (such as skype)