如何解决无法使用 Node JS 渲染自适应卡片
我正在尝试在 Node.js 上使用 JavaScript 呈现可操作的消息。卡片有效载荷直接从 https://messagecardplayground.azurewebsites.net/ 中选取:
{
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json","type": "AdaptiveCard","version": "1.0","body": [
{
"type": "ColumnSet","columns": [
{
"width": "32px","items": [
{
"type": "Image","width": "16px","horizontalAlignment": "center","url": "https://messagecardplayground.azurewebsites.net/assets/trello-logo.png","altText": "Trello Logo"
}
]
},{
"width": "stretch","items": [
{
"type": "TextBlock","text": "Trello"
}
]
},{
"width": "auto","verticalContentAlignment": "center","width": "12px","url": "https://messagecardplayground.azurewebsites.net/assets/Close.png","altText": "Close"
}
]
}
]
},{
"type": "ColumnSet","spacing": "large","separator": true,"width": "32px","style": "person","url": "https://messagecardplayground.azurewebsites.net/assets/person_m2.png","altText": "Leo Adams Profile Picture"
}
]
},"text": "**Leo Adams added a card**"
},{
"type": "TextBlock","spacing": "none","isSubtle": true,"text": "\"Visual design for Project A\" to \"Fabrikam\" list"
},"spacing": "small","text": "Due date: 12/12/2017"
},"wrap": true,"text": "Comment: \"We need to make sure we have updated designs for our meeting on Monday.\""
}
]
}
]
},{
"type": "Container","items": [
{
"type": "ColumnSet","columns": [
{
"width": "32px"
},{
"width": "stretch","items": [
{
"type": "ActionSet","actions": [
{
"type": "Action.ShowCard","title": "Add a comment","card": {
"type": "AdaptiveCard","body": [
{
"type": "Input.Text","isMultiline": true,"id": "textinputid"
},{
"type": "ActionSet","actions": [
{
"type": "Action.Http","method": "POST","body": "{}","title": "OK","url": "https://messagecardplaygroundfn.azurewebsites.net/api/HttpPost?code=zJaYHdG4dZdPK0GTymwYzpaCtcPAPec8fTvc2flJRvahwigYWg3p0A==&message=The comment was added successfully"
}
]
}
]
}
},{
"type": "Action.ShowCard","title": "Move card","body": [
{
"type": "Input.ChoiceSet","placeholder": "Pick a list","id": "choiceinputid","isRequired": true,"choices": [
{
"title": "List 1","value": "List 1"
},{
"title": "List 2","value": "List 2"
}
]
},"body": "{{choiceinputid.value}}","url": "https://messagecardplaygroundfn.azurewebsites.net/api/HttpPost?code=zJaYHdG4dZdPK0GTymwYzpaCtcPAPec8fTvc2flJRvahwigYWg3p0A==&message=The card was moved to '{{choiceinputid.value}}' successfully"
}
]
}
]
}
}
]
}
]
}
]
}
]
}
]
}
我正在使用 https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/render-a-card 中的示例代码。
我得到的输出是:
<div class="ac-container ac-adaptiveCard" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 15px 15px 15px 15px; margin: 0px 0px 0px 0px;" tabindex="0"><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"></div></div>
这只是呈现一个空的身体。
你能告诉我我在这里做错了什么吗?我们是否有可以从中汲取灵感的示例工作代码?
非常感谢您在这里帮助我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。