'Unable to render an adaptive card with Node JS
I am trying to render and actionable message using JavaScript on Node. The card payload is directly picked from 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",
"items": [
{
"type": "Image",
"width": "12px",
"url": "https://messagecardplayground.azurewebsites.net/assets/Close.png",
"altText": "Close"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "large",
"separator": true,
"columns": [
{
"width": "32px",
"items": [
{
"type": "Image",
"width": "32px",
"style": "person",
"horizontalAlignment": "center",
"url": "https://messagecardplayground.azurewebsites.net/assets/person_m2.png",
"altText": "Leo Adams Profile Picture"
}
]
},
{
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "**Leo Adams added a card**"
},
{
"type": "TextBlock",
"spacing": "none",
"isSubtle": true,
"text": "\"Visual design for Project A\" to \"Fabrikam\" list"
},
{
"type": "TextBlock",
"spacing": "small",
"isSubtle": true,
"text": "Due date: 12/12/2017"
},
{
"type": "TextBlock",
"spacing": "none",
"isSubtle": true,
"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",
"spacing": "small",
"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",
"card": {
"type": "AdaptiveCard",
"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"
}
]
},
{
"type": "ActionSet",
"spacing": "small",
"actions": [
{
"type": "Action.Http",
"method": "POST",
"body": "{{choiceinputid.value}}",
"title": "OK",
"url": "https://messagecardplaygroundfn.azurewebsites.net/api/HttpPost?code=zJaYHdG4dZdPK0GTymwYzpaCtcPAPec8fTvc2flJRvahwigYWg3p0A==&message=The card was moved to '{{choiceinputid.value}}' successfully"
}
]
}
]
}
}
]
}
]
}
]
}
]
}
]
}
I am using the sample code from https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/render-a-card.
The output that I get is:
<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>
which just renders an empty body.
Could you please tell me what I am doing wrong here? Do we have a sample working code that I can take inspiration from?
Many thanks in advance for helping out me here.
Solution 1:[1]
I had a similar issue, where I was receiving the definition into my method as a string, and I had to convert that into a proper Javascript object using JSON.parse(). Once I did that, it worked as expected.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Scott Pitman |