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.

Table of Contents

exclude	Related Articles

Why Adaptive cards?

Our goal is to provide you with all the necessary tools and packages that will help you develop visually attractive and engaging content for your 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 traditional directives.

For example, you can create a date range picker, an amelioration of Orbita’s 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.directive array in a function node to use the card in the Experience Designer.

Adaptive_Cards_Intro.mp4

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.

Image Removed

In the Adaptive Card node, select the Card you want to display.

Image Removed

Invoke the intent in the Chatbot.

Image RemovedAdaptive_Cards_in_Experience_Designer.mp4

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

Exporting and Importing an Adaptive card

Export

To export an Adaptive card, use the vertical ellipses against the Adaptive card you would like to export.

Image Added

Click on the Export tab and then the Copy to Clipboard button.

Image Added

Import

To import an Adaptive card, follow the steps above to export the code.

Create a new Adaptive card.
Click on the vertical ellipses button and select Import/export
Image Added
Select the Import tab, paste the code, and click on Import.
Image Added

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 a function an Adaptive Card node to the flow.

Image Removed

Image Added

Add the below code to the function node.

Code Blockif(!msg.payload.orbita) { msg.payload.orbita = {}; } if(!

In the Adaptive Card node, select the Card you want to display.

Image Added

Invoke the intent in the Chatbot.

Image AddedAdaptive_Cards_in_Experience_Designer.mp4

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.

Image Added

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": {
        //*****Paste the code from Card Payload Editor*****        
    },
    "templateData": {
        //*****Paste the code from Custom Data Editor*****        
    },
    "hostAppName": {
        "name": "default"
    }
})

When using the Card in the function node. Make sure that the code contains the below four objects in msg.payload.orbita.directive array

type - Should be the directive type. Here, it is adaptivecard.
template - The code from Card Payload Editor.
templateData - The code from Custom Data Editor.
hostAppName - It should contain the name property with value default

Getting the `template` and `templateData` properties

You can get the template code from the Adaptive Cards Designer > Card Payload Editor.

Paste the code inside the template object in the function node.

You can get the templateData code from the Adaptive Cards Designer > Custom Data Editor.

Paste the code inside the templateData object in the function node.

Invoking an intent after an Action

In the Function node, find the Function node, find Actions property, and add the below code to it.

Code Block
"data": { "message": "Thankyou for Selecting a Date Range", "eventName": "A-Wrong" }

Image Removed

Add the same event name to the Intent you want to fire after the Action.

Image Removed

Clicking on the submit button of the card in the chatbot will give the message from the data object and trigger the intent that contains the eventName.

Image Removed

Customizing Adaptive Cards

You can modify some of the properties of the Adaptive Cards elements by adding a function node after the directive or the Adaptive card node (Sample flow attached).

For example,

You can set a range for the chatbot user to pick the dates from.
Image Removed
You can restrict the user to select dates only between 16 Oct 2020 to 30 Oct 2020 as shown in the above card.
You can set the date fields to have dynamic placeholder dates.
Image Removed
You can display the date fields based on today’s date dynamically.

Customizing Adaptive Card.mp4

it.

Code Block
"data": { "message": "Thankyou for Selecting a Date Range", "eventName": "A-Wrong" }

Image Added

Add the same event name to the Intent you want to fire after the Action.

Image Added

Clicking on the submit button of the card in the chatbot will give the message from the data object and trigger the intent that contains the eventName.

Image Added

Customizing Adaptive Cards

You can modify some of the properties of the Adaptive Cards elements by adding a function node after the directive or the Adaptive card node (Sample flow attached).

For example,

You can set a range for the chatbot user to pick the dates from.
Image Added
You can restrict the user to select dates only between 16 Oct 2020 to 30 Oct 2020 as shown in the above card.
You can set the date fields to have dynamic placeholder dates.
Image Added
You can display the date fields based on today’s date dynamically.

Customizing Adaptive Card.mp4

Callback functions

You can give success and error callback functions for the buttons on Adaptive cards.

In the Experience Designer, connect a function node to the Adaptive card node as shown in the screenshot.

Image Added

Place the below code in the callback functions function node to replace the Actions object and execute the callback functions.

Code Block

var _ = global.get('lodash');

var index = _.findIndex(msg.payload.orbita.directive, { type: 'adaptivecard'});

var adaptiveCard = _.find(msg.payload.orbita.directive, { type: 'adaptivecard'});

adaptiveCard.template.actions = [
            {
                "type": "Action.Submit",
                "title": "Login",
                "style": "positive",
              
                "data": {
                  "serviceCall": {
                    "url": "https://sandbox5.orbita.cloud:8443/api/login",
                    "type": 'POST',
                     "orbitaAction": 'login',
                     "successCallback": "function (data, status, xhr) {console.log(data,status,xhr,cardId); orbitaChatBot.init({logincompleted: true, token: data.token}); window.submitQuery('thank you')}",
                     "errorCallback": "function(xhr,status, error){var card = document.getElementById(cardId); var image = card.getElementsByTagName('img'); $(image[0].parentElement).after(`<span style='text-align: center; padding:5px; color:red'> Invalid input </span>`);}"
                  }
                }
            }
        ]
            
msg.payload.orbita.directive[index] = adaptiveCard;

return msg;

In this example, clicking on the button will call the login API.
successCallback: If the login is successful, the thankyou utterance is passed.
errorCallback: If the login is unsuccessful, the text “Invalid Input“ in red color will be shown on the Adaptive card.

Image Added

You can use the success and error callbacks to execute your custom logic.

Host configuration

Using the host config, you can define common styles such as font family, font sizes, default spacing, and so on to all your adaptive cards within the environment.

You can access host config from the Global menu > Organization > Application Settings.

Image Removed

Image Added

You will see a preview of the adaptive card on the host config page

Sample host config code

Code Block

{
  "hostCapabilities": {},
  "choiceSetInputValueSeparator": ",",
  "supportsInteractivity": true,
  "spacing": {
    "small": 3,
    "default": 8,
    "medium": 20,
    "large": 30,
    "extraLarge": 40,
    "padding": 10
  },
  "separator": { "lineThickness": 1, "lineColor": "#EEEEEE" },
  "imageSizes": { "small": 40, "medium": 80, "large": 160 },
  "containerStyles": {
    "default": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#6f6f6f",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "light": {
          "default": "#646464",
          "subtle": "#767676",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "accent": {
          "default": "#0063B1",
          "subtle": "#0063B1",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "good": {
          "default": "#028A02",
          "subtle": "#DD028A02",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "warning": {
          "default": "#B75C00",
          "subtle": "#DDB75C00",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "attention": {
          "default": "#EC130E",
          "subtle": "#DDEC130E",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        }
      },
      "backgroundColor": "#FFFFFF"
    },
    "emphasis": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#6f6f6f",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "light": {
          "default": "#737373",
          "subtle": "#DD737373",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "accent": {
          "default": "#1F6BF1",
          "subtle": "#881F6BF1",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "good": {
          "default": "#0D860A",
          "subtle": "#DD0D860A",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "warning": {
          "default": "#BD5400",
          "subtle": "#DDBD5400",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        },
        "attention": {
          "default": "#E31B13",
          "subtle": "#DDE31B13",
          "highlightColors": { "default": "#22000000", "subtle": "#11000000" }
        }
      },
      "backgroundColor": "#F9F9F9"
    }
  },
  "inputs": {
    "label": {
      "inputSpacing": 1,
      "requiredInputs": {
        "size": "Default",
        "color": "Default",
        "isSubtle": false,
        "weight": "Default",
        "suffix": " *",
        "suffixColor": "Attention"
      },
      "optionalInputs": {
        "size": "Default",
        "color": "Default",
        "isSubtle": false,
        "weight": "Default"
      }
    },
    "errorMessage": {
      "size": "Default",
      "color": "Attention",
      "isSubtle": false,
      "weight": "Default"
    }
  },
  "actions": {
    "maxActions": 100,
    "spacing": "Default",
    "buttonSpacing": 8,
    "showCard": {
      "actionMode": "Inline",
      "inlineTopMargin": 8,
      "style": "emphasis"
    },
    "preExpandSingleShowCardAction": false,
    "actionsOrientation": "Vertical",
    "actionAlignment": "Stretch"
  },
  "adaptiveCard": { "allowCustomStyle": false },
  "imageSet": { "maxImageHeight": 100 },
  "media": { "allowInlinePlayback": true },
  "factSet": {
    "title": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Bolder",
      "wrap": true
    },
    "value": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Default",
      "wrap": true
    },
    "spacing": 8
  },
  "alwaysAllowBleed": false,
  "_legacyFontType": {
    "fontFamily": "'Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif'",
    "fontSizes": {
      "small": 12,
      "default": 14,
      "medium": 17,
      "large": 21,
      "extraLarge": 26
    },
    "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 }
  },
  "fontTypes": {
    "default": {
      "fontFamily": "Calibri, sans-serif",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 }
    },
    "monospace": {
      "fontFamily": "'Courier New', Courier, monospace",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 }
    }
  }
}

Sample CSS

Code Block

.ac-media-poster.empty {
  height: 200px;
  background-color: #f2f2f2;
}
.ac-media-playButton {
  width: 56px;
  height: 56px;
  border: 1px solid #eeeeee;
  border-radius: 28px;
  box-shadow: 0px 0px 10px #eeeeee;
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  cursor: pointer;
}
.ac-media-playButton-arrow {
  color: black;
}
.ac-media-playButton:hover {
  background-color: white;
}
.ac-image.ac-selectable {
  cursor: pointer;
}
.ac-image.ac-selectable:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.ac-image.ac-selectable:active {
  background-color: rgba(0, 0, 0, 0.15);
}
a.ac-anchor {
  text-decoration: none;
}
a.ac-anchor:link {
  color: #008bbc;
}
a.ac-anchor:visited {
  color: #008bbc;
}
a.ac-anchor:link:active {
  color: #008bbc;
}
a.ac-anchor:visited:active {
  color: #008bbc;
}
.ac-container.ac-selectable,
.ac-columnSet.ac-selectable {
  padding: 0px;
}
.ac-container.ac-selectable:hover,
.ac-columnSet.ac-selectable:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.ac-container.ac-selectable:active,
.ac-columnSet.ac-selectable:active {
  background-color: rgba(0, 0, 0, 0.15) !important;
}
.ac-pushButton {
  text-align: center;
  vertical-align: middle;
  cursor: default;
  font-family: "Calibri", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  color: #5f5f5f;
}
.ac-pushButton:focus {
  border-color: #5f5f5f;
}
.ac-pushButton.style-positive {
  background-color: #4285f4;
  color: white;
}
.ac-pushButton.style-positive:hover,
.ac-pushButton.style-positive:active {
  background-color: #4285f4;
}
.ac-pushButton.style-destructive {
  background-color: #db4437;
  color: white;
}
.ac-pushButton.style-destructive:hover,
.ac-pushButton.style-destructive:active {
  background-color: #db4437;
}
.ac-quickActionButton {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  font-family: "Calibri", sans-serif;
  font-size: 14px;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  background-color: #dddddd;
}
.ac-input {
  font-family: "Calibri", sans-serif;
  font-size: 14px;
  color: black;
}
.ac-input.ac-textInput.ac-input-validation-failed,
.ac-input.ac-numberInput.ac-input-validation-failed,
.ac-input.ac-dateInput.ac-input-validation-failed,
.ac-input.ac-timeInput.ac-input-validation-failed,
.ac-input.ac-multichoiceInput.ac-choiceSetInput-compact.ac-input-validation-failed {
  border: 1px solid red !important;
}
.ac-input.ac-toggleInput.ac-input-validation-failed,
.ac-input.ac-choiceSetInput-expanded.ac-input-validation-failed,
.ac-input.ac-choiceSetInput-multiSelect.ac-input-validation-failed {
  outline: 1px solid red;
}
.ac-input-container {
  display: flex;
  align-items: flex-end;
}
.ac-input.ac-textInput {
  resize: none;
}
.ac-input.ac-textInput.ac-multiline {
  height: 72px;
}
.ac-input.ac-textInput,
.ac-input.ac-numberInput,
.ac-input.ac-dateInput,
.ac-input.ac-timeInput {
  height: 31px;
}
.ac-input.ac-textInput,
.ac-input.ac-numberInput,
.ac-input.ac-dateInput,
.ac-input.ac-timeInput,
.ac-input.ac-multichoiceInput {
  border: 1px solid #dddddd;
  padding: 4px 8px 4px 8px;
}
/* ac-inlineActionButton should set height to the same as ac-input.ac-textInput */

.ac-inlineActionButton {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  font-family: "Calibri", sans-serif;
  font-size: 13.3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  background-color: transparent;
  height: 31px;
}
.ac-inlineActionButton.textOnly {
  padding: 0 8px;
}
.ac-inlineActionButton.iconOnly {
  padding: 0;
}
.ac-inlineActionButton:hover {
  background-color: #eeeeee;
}
.ac-inlineActionButton:active {
  background-color: #cccccc;
}
.default-ac {
  background-color: #eceff1;
  border: 1px solid #e6e6e6;
  padding: 8px;
  width: 80%;
  margin: 10px 0;
  border-radius: 4px;
}

Please refer to the Microsoft Adaptive Card Documentation for more information on the Elements and their properties.

Attachments

preview	false
upload	false
old	false
patterns	.*json

Versions Compared

Old Version 11

New Version Current

Key

Why Adaptive cards?

Orbita’s Adaptive Cards

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

Using the Card Payload

Exporting and Importing an Adaptive card

Export

Import

Using Adaptive Cards in Experience Designer

Using the Adaptive card node

Using the Card Payload

Getting the `template` and `templateData` properties

Invoking an intent after an Action

Customizing Adaptive Cards

Customizing Adaptive Cards

Callback functions

Host configuration

Related Articles

Page Comparison

Versions Compared

Old Version 11

New Version Current

Key

Why Adaptive cards?

Orbita’s Adaptive Cards

Using Adaptive Cards in Experience DesignerThere 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

Using the Card Payload

Exporting and Importing an Adaptive card

Export

Import

Using Adaptive Cards in Experience Designer

Using the Adaptive card node

Using the Card Payload

Getting the template and templateData properties

Invoking an intent after an Action

Customizing Adaptive Cards

Customizing Adaptive Cards

Callback functions

Host configuration

Related Articles

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.

Getting the `template` and `templateData` properties