Adaptive Cards provide the ability to show an adaptive card to the user in the conversation flow. Adaptive cards by themselves offer the opportunity to show information in a graphically appealing way or to request information using a graphically appealing form, such as in this example:

Example of adaptive card:

Adaptive cards are in .json and can also be made through 3th party websites like: https://adaptivecards.io/. You can add the code to create the Adaptive Card in the JSON section.

Example of adaptive card JSON:

Skip user input

By clicking the Skip user input button, the adaptive card automatically continues in the flow without waiting for any response from the user.

Input variables

Adaptive cards may have adaptive input variables, so that (e.g.) you have a date used on another function or REST API. To use this, simply create an input variable:

Add these variables using the following syntax: ${variable} to the .JSON code. NOTE: This works different than other functions where you have to use [variable].

Example:

 {
   "type": "TextBlock",
   "text": "${Firstname}",
},

Conditionals

Adaptive cards support conditional formatting.

Example

{
   "type": "TextBlock",
   "text": "${if(Firstname == 'Peter','Hello Peter','Hello Unknown')}",
   "wrap": true
  },

Output variables

Adaptive Cards can also generate output variables. To use these you can either:

• use the name of the Adaptive Card output in the Dialog Manager in combination with the "id" tag that belongs to the desired variable to be used. Hence, assuming that the output in the Dialog Manager is stored under "AdaptiveCard1", the use of the output with a variable input would be {AdaptiveCard1][DateVal].

  • You may store this variable using a SetVariable block under a different name or use an Object to store it and use it in other intents.

• create an output variable in the adaptive card that references the adaptive card ID.

  

• Input elements will output the value inputted by the user based on ID name.

  {
      "type": "Input.Text",
       "placeholder": "Placeholder text",
       "id": "input"
  }

• Action elements will output the ID name, in the example below it will output 'approve'.

  "data": {
       "action": "approve",
       "id": "approve"
  }

Redirecting URLs

URLs can be embedded into Adaptive Cards to redirect users to the desired webpage. When defining these URLs in the Adaptive Card, they should always start with https://www.