A yet another code-free environment to design and build new directives. This easy to use interface will let you build engaging cards, for your chatbots, using drag and drop elements and customizable properties.
Why Adaptive cards?
Our goal is to provide our clients with the necessary tools and packages that will help them develop visually attractive and engaging content for their chatbots. A step forward in this direction is the introduction of Adaptive Cards.
Using Adaptive Cards you can design intuitive and appealing cards for your chatbot that are not feasible with the existing directives.
For example, you can create a date range picker, an amelioration of Orbita’s traditional date picker directive.
You can use the below code as a directive and place it in the function node. Refer to How do I use directives? documentation.
if(!msg.payload.orbita) {
msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
msg.payload.orbita.directive = [];
}
msg.payload.orbita.directive.push({
"type": "adaptivecard",
"template": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Pick the Date Range",
"wrap": true,
"id": "Date_Range_Text"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "From Date",
"wrap": true
},
{
"type": "Input.Date",
"id": "Start_Date",
"$data": "date",
"separator": true,
"value": "t"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "To Date",
"wrap": true
},
{
"type": "Input.Date",
"id": "End_Date",
"$data": "date",
"separator": true,
"value": "2020-10-19",
"label": "End Date"
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"style": "positive",
"id": "Submit_Date_Range",
"ignoreInputValidation": true
}
]
}
],
"id": "Submit_Container",
"spacing": "Padding",
"height": "stretch",
"separator": false
}
]
}
]
},
{
"type": "RichTextBlock",
"inlines": [
{
"type": "TextRun",
"text": "${$root.textDate}"
}
],
"id": "Final_msg",
"$data": "${$root.textDate}"
}
],
"id": "Date_Range_Container"
},
"templateData": {
"textDate": "Data"
},
"hostAppName": {
"name": "default"
}
})
return msg;