botframework - 无法在搜索消息扩展中发送高级自适应卡片
问题描述
我尝试发送一张简单的自适应卡片，并且能够在我的搜索消息扩展中成功发送。然后我尝试了下面的自适应卡，它更高级并使用了更多控件/元素，但我无法在我的聊天中发送它。是否有任何控件/元素列表在搜索消息扩展中不起作用。我在尝试不同的自适应卡在聊天中发送时遇到以下错误。
TypeError: Cannot read property 'action' of null
at e.tryMatchToEnumedStringsForKnownPanleActionProperties (https://statics.teams.cdn.office.net/hashed/3.2-app.min-54a576c.js:1:2193665)
at e.sendPanelAction (https://statics.teams.cdn.office.net/hashed/3.2-app.min-54a576c.js:1:2191074)
at https://statics.teams.cdn.office.net/hashed/3.2-app.min-54a576c.js:1:951108
at f (https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:127:115)
at https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:127:345
at m.$eval (https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:142:180)
at m.$digest (https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:139:290)
at m.v.$digest (https://statics.teams.cdn.office.net/hashed/3.2-app.min-54a576c.js:1:5166871)
at https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:142:267
at e (https://statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:41:350) undefined
statics.teams.cdn.office.net/hashed/0.2-angular-jquery.min-eee9041.js:114
{statusCode: 500, headers: {…}, errorMessage: 'Invoke failed due to internal error', errorCode: 0, errorSubCode: undefined, …} undefined
2021-09-08T10:02:22.859Z InputExtensionService: Input extension invoke command failed
以下是自适应卡的代码：
import { IEntity } from '../model/IEntity';
import { Attachment, CardFactory } from "botbuilder";
export class ContactResultCard {
public static getCard(contact: IEntity): Attachment {
let url = `https://pbs.twimg.com/docs/MenuPortal.aspx?GoPage=CRMAccountCard.aspx?AccountID='${contact.ID}'&_Division_='${contact.Division}'`;
const card = CardFactory.adaptiveCard(
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://iconape.com/wp-content/files/hd/32658/svg/test-dao.svg",
"size": "Small",
"width": "20px",
"height": "20px",
"horizontalAlignment": "Center",
"spacing": "Small"
}
],
"style": "default",
"width": 12
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": contact.Title,
"height": "stretch"
}
],
"width": 70,
"height": "stretch",
"style": "default"
},
{
"type": "Column",
"minHeight": "0px",
"style": "default",
"backgroundImage": {
"horizontalAlignment": "Center",
"url": "https://i.postimg.cc/7LHgLjp6/background-Teams.jpg",
"fillMode": "RepeatHorizontally"
},
"height": "stretch",
"width": 30,
"items": [
{
"type": "TextBlock",
"text": contact.EntityType,
"weight": "Bolder",
"horizontalAlignment": "Center",
"wrap": true,
"height": "stretch",
"size": "Small"
}
],
"horizontalAlignment": "Center",
"spacing": "Small"
}
],
"height": "stretch"
}
],
"style": "default"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 75,
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": contact.AccountContact,
"size": "Large",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": contact.JobTitleDescription,
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": contact.Division,
"wrap": true
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "M:",
"wrap": true,
"weight": "Bolder",
"size": "Small"
}
]
},
{
"type": "Column",
"width": 90,
"items": [
{
"type": "TextBlock",
"text": contact.Phone,
"color": "Accent",
"size": "Small",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "T:",
"wrap": true,
"weight": "Bolder",
"size": "Small"
}
]
},
{
"type": "Column",
"width": 90,
"items": [
{
"type": "TextBlock",
"text": contact.Mobile,
"color": "Accent",
"size": "Small",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "E:",
"wrap": true,
"weight": "Bolder",
"size": "Small"
}
]
},
{
"type": "Column",
"width": 90,
"items": [
{
"type": "TextBlock",
"text": contact.Email,
"color": "Accent",
"size": "Small",
"wrap": true
}
]
}
]
}
]
},
{
"type": "Column",
"width": 20,
"items": [
{
"type": "Image",
"url": "https://i.postimg.cc/XJwDktgd/placeholder-contact.png",
"horizontalAlignment": "Center",
"size": "Medium",
"width": "55px"
}
]
}
]
}
]
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 70
},
{
"type": "Column",
"width": 30,
"items": [
{
"type": "TextBlock",
"text": "Open in Test",
"wrap": true,
"horizontalAlignment": "Center",
"color": "Accent",
"weight": "Bolder",
"size": "Small"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": url
}
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
);
return card;
}
}
这就是我发送自适应卡的方式：
public async handleTeamsMessagingExtensionSelectItem(
context: TurnContext,
obj: any
): Promise {
const item = this.response.find(e => e.ID == obj.name);
const card = TestCardFactory.getCard(item);
return {
composeExtension: {
type: "result",
attachmentLayout: "list",
attachments: [{preview: CardFactory.heroCard("title", "Test"),
...card}],
},
};
}
解决方案
非常感谢chetan，我能够找出罪魁祸首。以下是导致问题的元素：
- “背景图片”
- 没有文本的列，例如：{“type”：“Column”，“width”：70}，
推荐阅读
- reactjs - 在我的 TextInput 上更新我的 defaultValue 的值
- javascript - JavaScript 在编辑时显示字段的 varchar 描述
- android - 启用 TabLayout 不会启用 onTouchEvents - 选项卡不可点击
- containers - 关于容器的 AWS Marketplace Metering 服务
- python - 为什么占位符在张量流中不起作用？
- php - 通过 htaccess 使用 URL 参数重写动态 URL
- sql - 使用另一列中的现有值创建新列
- python - 将字典转换为两列熊猫数据框
- css - 切换菜单项时，徽标和汉堡包图标移至顶部
- docker - 是否可以 docker 并行构建多阶段映像？