Bot Emulator将“强调”显示为AdaptiveCard中的默认样式
问题描述 投票：0回答：1
[当我在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** [email protected]"
},
{
"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** [email protected]"
},
{
"title": "Submitted to",
"value": "**David** [email protected]"
}
]
}
]
},
{
"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
投票
投票
如何呈现任何卡，尤其是自适应卡，完全取决于卡发送到的通道。 Bot Framework允许您将卡配置为希望显示的方式，但无法控制通道如何选择处理和显示传入的活动。例如，Facebook将卡片转换为带有链接的图像。
此渲染考虑因素同样适用于Emulator。尽管模拟器对于测试非常有用，并且可以代表真实的渲染效果，但最终您的机器人将在用户使用的其他渠道（Facebook，Slack，Web Chat）上运行。我将专注于设计考虑该通道的卡，并使用Emulator进行整体机器人测试。
[如果您认为在Adaptive Card Designer和Emulator中的卡渲染方式之间应该有更大的同等，我建议您在BotFramework-Emulator存储库中提交issue。请确保包括相关的详细信息，例如您在此处提供的信息。
希望帮助！
最新问题
- 如何在 R studio ggsurvplot 中添加文本？
- 为什么这段代码在C上会出现打开文件问题？
- 函数未从 html 获取调用
- 使用“文件名:行”语法打开文件的行
- 如何在android中更新LinearProgressIndicator
- 处理抖动：使用 Rigidbody 克服 Unity 中的角色运动问题
- Angular - 如何在使用自定义组件时检查 ngForm 是否有效
- 在 Flutter App 中集成自定义 TensorFlow Lite 模型：替换后对象检测不起作用
- bitnami/mongodb docker 容器无法启动，因为配置文件上的“权限被拒绝”
- 我想使用 API 向我的 Facebook 页面添加评论
- 向量化操作：TypeError - 只有整数标量数组可以转换为标量索引
- 如何将我的 UWP 应用添加到 Microsoft Edge 中的共享菜单？
- 在Snowflake SQL中基于DateTime构建会话逻辑
- Expo-react-native：无法 adb 反向：找不到设备“adb”
- 输入错误的电子邮件或密码时MongoDB连接自动断开
- VISION 没有属性枚举
- 维基数据上的 SPARQL：一个国家的官方语言，而不仅仅是区域语言
- Terraform 创建地图（任意）并填充变量值
- Windows 版 Docker 缺少快速启动终端
- 如何以实现下述所需行为的方式添加两个 pandas 数据框
© www.soinside.com 2019 - 2024. All rights reserved.