【发布时间】：2021-11-12 04:50:30
【问题描述】：
我尝试发送一个简单的自适应卡片，并且能够在我的搜索消息扩展中成功发送。然后我尝试了下面的自适应卡，它更高级并使用了更多控件/元素，但我无法在我的聊天中发送它。是否有任何控件/元素列表在搜索消息扩展中不起作用。 我在尝试不同的自适应卡片在聊天中发送时遇到以下错误。
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}],
},
};
}
【问题讨论】：
-
您可以调试卡，将您的卡数据分成较小的部分发送，并检查哪个部分不工作。通过这种方式，您可以了解卡中的确切问题。另外请将您的简单卡内容与Advance卡进行比较，您可以轻松识别卡的哪个部分失败。
-
非常感谢 chetan，我能够找出罪魁祸首。以下是导致问题的元素：“backgroundImage”和没有文本的列，例如：{“type”：“Column”，“width”：70}，
标签： botframework chatbot microsoft-teams adaptive-cards