AdaptiveCard: how to use it in Node.js
I am trying to use the AdaptiveCards npm package in NodeJS to develop a card programmatically and I cannot see how to generate JSON to pass the message. So far, my code is pretty simple:
session.send(new builder.Message(session).addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: createCard()
}));
function createCard() {
let card = new adaptiveCards.AdaptiveCard({ type: "AdaptiveCard" });
// add a text block
card.addItem(new adaptiveCards.TextBlock({
text: 'Issue #1',
weight: "bolder",
size: "medium"
}));
return card;
}
I tried calling the method render
, but it didn't work. I also tried calling JSON.stringify(card)
, but I got an error TypeError: Converting circular structure to JSON
. Any ideas? If I pass JSON to the content attachment everything works fine.
+4
source to share
2 answers
To submit an adaptive map using the Bot Framework SDK for Node.js, use the JSON format described in Adaptivecards.io , then add the adaptive map object as a binding to the object botbuilder.Message
, then send the message as usual.
Example:
// adaptive cards example from:
// https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-send-rich-cards
bot.dialog('adaptive_card_demo', function(session) {
var adaptiveCardMessage = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
speak: "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
body: [
{
"type": "TextBlock",
"text": "Adaptive Card design session",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Conf Room 112/3377 (10)"
},
{
"type": "TextBlock",
"text": "12:30 PM - 1:30 PM"
},
{
"type": "TextBlock",
"text": "Snooze for"
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"style":"compact",
"choices": [
{
"title": "5 minutes",
"value": "5",
"isSelected": true
},
{
"title": "15 minutes",
"value": "15"
},
{
"title": "30 minutes",
"value": "30"
}
]
}
],
"actions": [
{
"type": "Action.Http",
"method": "POST",
"url": "http://foo.com",
"title": "Snooze"
},
{
"type": "Action.Http",
"method": "POST",
"url": "http://foo.com",
"title": "I'll be late"
},
{
"type": "Action.Http",
"method": "POST",
"url": "http://foo.com",
"title": "Dismiss"
}
]
}
});
session.send(adaptiveCardMessage);
session.endDialog();
});
+5
source to share
I am new to learning node.js. Could you tell me how can I store the variable in a responsive map?
bot.dialog('LeaveStatus',function(session){
var msg = new builder.Message(session)
.addAttachment({
contentType:"application/vnd.microsoft.card.adaptive",
content:{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version":"1.0",
"body":[
{
"type":"TextBlock",
"text": "Leave Status",
"weight": "bolder",
"size": "medium",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "Employee ID:"
},
{
"type": "Input.Text",
"id": "CT-20[0-9]{2}-[0-9]{3}",
"placeholder":"Enter Employee ID in format \'CT-YYYY-NNN\'."
},
{
"type": "ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type": "FactSet",
"facts":[
{
"title":"Employee Name:",
"value":"Yuthika"
}
]
}
]
},
{
"type":"Column",
"items":[
{
"type": "Factset",
"facts":[
{
"title":"Date",
"text": "I want to add current date here"
}
]
}
]
}
]
},
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"items":[
{
"type": "TextBlock",
"text": "Sick Leaves",
"weight":"bolder"
},
{
"type":"FactSet",
"facts":[
{
"title":"Taken",
"text":0,
"spacing":"medium"
},
{
"title":"Left",
"text":0,
"separator": true
}
]
}
]
},
{
"type":"Column",
"items":[
{
"type": "TextBlock",
"text": "Earned Leaves",
"weight":"bolder"
},
{
"type":"FactSet",
"facts":[
{
"title":"Taken",
"text":0,
"spacing":"medium"
},
{
"title":"Left",
"text":0,
"separator": true
}
]
}
]
},
{
"type":"Column",
"items":[
{
"type": "TextBlock",
"text": "Casual Leaves",
"weight":"bolder"
},
{
"type":"FactSet",
"facts":[
{
"title":"Taken",
"text":0,
"spacing":"medium"
},
{
"title":"Left",
"text":0,
"separator": true
}
]
}
]
}
]
},
{
"type":"TextBlock",
"inlines":[
{
"type":"TextRun",
"text":"Current Status",
"color":"good",
"weight":"bolder"
},
{
"type":"TextRun",
"text":"Your"
},
{
"type":"TextRun",
"text":"type of leave"
},
{
"type":"TextRun",
"text":"has been"
},
{
"type":"TextRun",
"text":"confirmed/rejected"
},
{
"type":"TextRun",
"text":"from"
},
{
"type":"TextRun",
"text":"leaveDate"
},
{
"type":"TextRun",
"text":"for"
},
{
"type":"TextRun",
"text":"no.of days"
},
{
"type":"TextRun",
"text":"days"
}
]
}
]
}
});
session.send(msg);
})
.triggerAction({
matches: 'Check leave status'
});
0
source to share