[英]How do you implement Azure bot adaptive card?
My understanding for creating an adaptive card in azure bot is by hard coding it. 我对在azure bot中创建自适应卡的理解是通过硬编码来实现的。 Is there a better to create an Adaptive card?
有没有更好的创建自适应卡? Because imagine if we have to create 120 cards.
因为想象一下,如果我们必须创建120张牌。 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);
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. 因此,您可以将
.json
用作模板的更多内容,然后使用javascript构建它。 Or: 要么:
Here's a link to other card types 这是其他卡类型的链接
You can then use CardFactory to build the cards. 然后,您可以使用CardFactory来构建卡片。
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'
}])
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.