teams adaptive cards with jpg image - node.js

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?

Related

Images hosted in share point aren't displaying when posted to team via webhook

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:

Adaptive card in teams not workig - REST API

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.

Display comments on adaptive cards in BOT emulator

I am displaying some data in using adaptive card in BOT emulator,I want to add one comment section there.I tried this way:
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "test",
"isMultiline": true,
"placeholder": "Enter your comment",
}
],
"actions": [
{
"type": "Action.Submit",
"id":"submit",
"title": "OK",
"data":
{
"test":""
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
but not getting any output when click on OK action.How can we do it?

How do you implement Azure bot adaptive card?

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'
}])
);

Action.Submit buttons in Adaptive card does not render in Skype

I have a simple adaptive card which works well in the web chat app, this is the card
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Hello!",
"weight": "bolder",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "What can I do for you?",
"wrap": true
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Buy",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "What do you want to buy?",
"weight": "bolder"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Ticket",
"data": {
"action_button": "buy_ticket"
}
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Check",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Nothing to check",
"weight": "bolder"
}
]
}
}
]
}
you can see it in this link http://adaptivecards.io/visualizer/index.html?hostApp=Skype by pasting the code there.
The webchat works fine as you can see here:
but the skype does not even render the Action.Submit button.
It is supposed to work as Skype is supported for this card type.
I've also tested it on Android and it has the same bug.
UPDATE:
How can I create a card like this? this is a skype bot.
Skype does not currently fully support adaptive cards so this behavior is expected. While some features of adaptive cards may work in skype they are not fully supported so strange behaviors such as these are expected. You can find a list of channels that do and do not support adaptive cards here.

Resources