...
Why Adaptive cards?
Our goal is to provide our clients you with all the necessary tools and packages that will help them you develop visually attractive and engaging content for their chatbotsyour chatbot. 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 traditional directives.
For example, you can create a date range picker, an amelioration of Orbita’s traditional existing date picker directive.
...
Orbita’s Adaptive Cards
If you have a Sample design in mind, you can create an Adaptive card from scratch. Else, you can get started with any of the sample cards from https://adaptivecards.io/samples/ and tweak them to your liking.
You will find the adaptive cards at Experience Manager > Project > Side Menu > Hierarchy icon > Adaptive cards.
Click on the 
plus icon at the bottom of the page to create a new Adaptive Card.
Give a Title and Description to the card you are about to create.
...
You will land on the Adaptive Cards designer. It contains:
Elements Palette - All the basic elements to create an attractive card for your chatbot.
Canvas - You will drag and drop the elements from the Elements Palette to the Canvas. This is where you will design your card.
Element Properties - Each element have customizable properties. You can edit them here.
Custom Data Editor - You can set dynamic data content here and use
...
them in the Elements.
Card Payload Editor - The Final JSON code of the card you designed. This payload can be copied to the
msg.payload.orbita.directivearray in a function node to use the card in the Experience Designer.
...
Using Adaptive Cards in Experience Designer
There are two ways to use Adaptive Cards in Experience Designer.
Using Adaptive Card node. (Refer to Adaptive Card node documentation)
Using the Card Payload code as a directive in a function node.
Using the Adaptive card node
Add an Adaptive Card node to the flow.
...
In the Adaptive Card node, select the Card you want to display.
...
Invoke the intent in the Chatbot.
...
Using the Card Payload
If you want to add additional functionality to the card such as invoking an intent after one card is submitted, you can do it by using the Card Payload as a directive in a function node.
Add a function node to the flow.
...
Add the below code to the function node
| Code Block |
|---|
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,
//*****Place your template code here*****
"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;}) |
Go to the Adaptive Cards Designer and copy the code from the Card Payload Editor.
...
Paste it inside the template object in the function node.
...
Invoking an intent after the card submit
In the Function node, find Actions property and add eventName property.
Add the same event name to the Intent you want to fire upon submitting this card.
Related Articles
| Filter by label (Content by label) | ||||||||
|---|---|---|---|---|---|---|---|---|
|