How can we post Base64 images to Ms Teams from a bot that is pulling them from sharepoint to a QnA kb?
Could you please have a look on Data URIs document and try the below sample json.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Image",
"style": "Person",
"url": "data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==",
"size": "Small"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Related
I'm trying to migrate some of our reports from slack to Microsoft Teams.
We are currently posting images and csv files to slack from an Azure Function.
Early on I noticed that I cannot post images directly but I can mention their URLs in the card and a preview displays and clicking on it should take me to the actual image.
I started out thinking it would be pretty straightforward. And i went ahead and started with the webhooks option. The only problem is that the it supports only 2 types of cards and i have virtually no control over the image size and other properties. And if I'm to use the Adaptive Card(any other card), then I would have to ditch webhooks and make use of the Graph API, which I've already started.
Then I started noticing that the images disappear, as in they just not get displayed anymore. I believe that this could be an authentication issue between sharepoint/ teams as mentioned in this answer -
Adaptive cards for MS Teams - images displaying in web interface but not desktop application
Teams in browser shows the images but the desktop app doesn't. Also they aren't displaying in my mobile app for teams too.
I have already modified my existing application to send a copy of the image/file (whatever it creates) to a folder inside the sharepoint which is the back end to this channel in teams (used sharepoint API v1)
And I intend to post a thumbnail card with a url to the images/file in Sharepoint.
It would really help if someone could help me with the below :
Anyway to fix the authentication issue between Sharepoint ~ Teams
Alternate options to send an image, if 1. is not feasible.
Please help :)
Edit :
Adding card JSON :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Report1",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
Adaptive cards are now supported on Incoming webhook. For sending adaptive cards using Incoming Webhooks, You need to follow the Bot Activity Message Type format: format. where you can add the card json to the content field.
Example:
Post Web-hook URL
Request Body:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
}
]
}
Result:
I send adaptive card to teams.
When I use png image it works fine, when I use jpg the image is not displayed properly in teams:
Below is the code (I created it using https://adaptivecards.io/designer/, and the image does show up correctly there):
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Image",
"url": "https://he.wikipedia.org/wiki/PNG#/media/%D7%A7%D7%95%D7%91%D7%A5:PNG_transparency_demonstration_1.png"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "someText",
"data": {
"text": "someText"
}
}
]
}
]
}
What is the problem?
I created a bot (nodejs server) for teams - through bot framework.
I'm trying to send adaptive card that I created through: adaptive cards designer
and I get error :
{"code":"BadArgument","message":"ContentType of an attachment is not set"}
The request body :
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
]
}
I would appreciate help
When adding attachments you'll want to set the contentType and content properties of the attachment object.
https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#attachment-object
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
}
]
}
As per the comments above, this is a pro-active message, but using the Bot Framework libraries are a much better approach than trying to call the bot endpoints directly (I wondered if, by "REST", you meant the Bot Framework endpoint or the Graph Api, but in either case the Bot Framework is easier to work with for proactive messages).
Please see specifically this sample for how to do this in Node.
For web chat, I am using a simple adaptive card.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Please enter the email id",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"placeholder": "abc#abc.com",
"id": "e_mail_id"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
On submit, it does desirable job at the back end but the value entered in text box in adaptive card disappears. How can we retain the values in adaptive cards after submit action is called?
It was an issue with front end. Had to update Web chat from version 4.5.2 to 4.6.0 . Seems like this issue is a fix in the recent version of web chat.
My understanding for creating an adaptive card in azure bot is by hard coding it. Is there a better to create an Adaptive card? Because imagine if we have to create 120 cards. We have to hard code files that is like the codes below which is not a good practice. Please help! Thanks
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url":"google.image.com",
"size": "small"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Google",
"url": "google.com"
}
]
}
There's a couple of different ways you can do this. Given the card:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Image",
"id": "img",
"selectAction": {
"type": "Action.OpenUrl",
"title": "Google",
"url": "http://www.google.com"
},
"url": "https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Google",
"url": "http://www.google.com"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Which will render as:
And given that we're importing it with:
import * as cardJson from './adaptiveCard.json';
And then our code looks something like this:
const card = CardFactory.adaptiveCard(cardJson);
const msg = MessageFactory.text('');
msg.attachments = [card];
await context.sendActivity(msg);
1. Edit the JSON directly
If we use this to change the image:
cardJson.body[0].url = 'https://skillbotbuilder.gallerycdn.vsassets.io/extensions/skillbotbuilder/skillbotbuilder/1.0/1546976085901/Microsoft.VisualStudio.Services.Icons.Default';
we get:
So, you can use your .json as more of a template and then build off of it with javascript. Or:
2. Use a different type of card
Here's a link to other card types
You can then use CardFactory to build the cards.
A Hero Card similar to the above would look something like this:
const hero = CardFactory.heroCard(
null,
CardFactory.images(['https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image']),
CardFactory.actions([{
type: 'Action.OpenUrl',
title: 'Google',
value: 'Google.com'
}])
);