Bot Emulator在AdaptiveCards中将“强调”显示为默认样式
当我在designer中创建卡片时，默认样式（背景）以白色显示，并且我可以用ColumnSets进行Containers或"style":"emphasis"的更改他们的背景色。
另一方面，当卡在Bot Framework仿真器中呈现时，一切都以"style:"emphasis"的形式显示，就像这样（左侧为设计器结果，右侧为仿真器结果）
我知道渲染1.2版本独占时会遇到一些问题，但是即使使用最简单的卡片，它也会改变样式。看起来emphasis是DirectLine中的默认样式，因为当我将样式设置为"style":"default"时，它也会显示为emphasis。
这是Expense Report Sample，JSON是：
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**EXPENSE APPROVAL**"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/pending.png",
"height": "30px",
"altText": "Pending"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "Trip to UAE",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "Small",
"size": "Small",
"weight": "Bolder",
"color": "Accent",
"text": "[ER-13052](https://adaptivecards.io)"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "EXPORT AS PDF",
"url": "https://adaptivecards.io"
}
]
}
],
"width": "auto"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Submitted By",
"value": "**Matt Hidinger** matt@contoso.com"
},
{
"title": "Duration",
"value": "2019/06/19 - 2019/06/25"
},
{
"title": "Submitted On",
"value": "2019/04/14"
},
{
"title": "Reimbursable Amount",
"value": "$ 404.30"
},
{
"title": "Awaiting approval from",
"value": "**Thomas** thomas@contoso.com"
},
{
"title": "Submitted to",
"value": "**David** david@contoso.com"
}
]
}
]
},
{
"type": "Container",
"spacing": "Large",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "DATE"
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Large",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "CATEGORY"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "AMOUNT"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "06/19",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Air Travel Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 300",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp1",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent1",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM.",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Leg 2 on Tue,Jun 19th, 2019 at 7:15 PM.",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment1",
"placeholder": "Add your comment here."
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 1
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "06/19",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Auto Mobile Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 100",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown2",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp2",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Contoso Car Rentrals, Tues 6/19 at 7:00 AM",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment2",
"placeholder": "Add your comment here."
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 2
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "06/25",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Air Travel Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 4.30",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown3",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp3",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment3",
"placeholder": "Add your comment here."
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 3
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "Large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Total Expense Amount \t",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Non-reimbursable Amount",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Advance Amount",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "404.30"
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t"
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Amount to be Reimbursed",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "$ 404.30"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"id": "chevronDown4",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "show history",
"targetElements": [
"cardContent4",
"chevronUp4",
"chevronDown4"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Show history",
"wrap": true
}
],
"width": 1
},
{
"type": "Column",
"id": "chevronUp4",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "hide history",
"targetElements": [
"cardContent4",
"chevronUp4",
"chevronDown4"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Hide history",
"wrap": true
}
],
"width": 1
}
]
}
]
},
{
"type": "Container",
"id": "cardContent4",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Expense submitted by **Matt** on Wed, Apr 14th, 2019",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Expense approved by **Thomas** on Thu, Apr 15th, 2019",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "reject"
}
}
]
}
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
1 个答案:
答案 0 :(得分：1)
如何渲染任何卡，尤其是自适应卡，完全取决于卡发送到的通道。 Bot Framework允许您将卡配置为希望显示的方式，但无法控制通道如何选择处理和显示传入的活动。例如，Facebook将卡片转换为带有链接的图像。
此渲染注意事项也适用于Emulator。尽管模拟器对测试很有用，并且可以代表真实的渲染效果，但最终您的机器人将在用户使用的其他渠道（Facebook，Slack，Web Chat）上运行。我将集中精力设计与该通道有关的卡，并使用Emulator进行总体机器人测试。
如果您觉得卡在Adaptive Card Designer和Emulator中的呈现方式之间应该有更大的同等，我建议您在BotFramework-Emulator存储库中提交issue。确保包括相关详细信息，例如您在此处提供的信息。
希望有帮助！
相关问题
- Arial Narrow字体在Windows CE Emulator中显示为Tahoma
- Gmap3样式默认为
- Bot框架模拟器提供错误为“无法发送”
- 机器人模拟器中的ERR_SSL_PROTOCOL_ERROR
- Bot在模拟器中返回0
- 如何在Microsoft Bot框架中设置“建议措施”的样式？
- Elasticsearch“ query_string”查询错误显示为“ Lexical error”
- 从Bot Emulator测试时，“无法发布活动。未经授权”
- Bot Emulator在AdaptiveCards中将“强调”显示为默认样式
- PyCharm-将调试器中的“显示为十六进制”设置为默认值
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？