How to render error messages on Teams Adaptive Card on User Action

Question

I have a teams bot sending adaptive cards proactively to users when desired. When the user presses submit on the form i'm making a POST request to another web service that returns the following payload:

{
   success: bool,
   message: ''
}

If the result is a success (success: true), i will be updating the adaptive card. But if the result is not a success (success: false), i want to simply show an error as shown below.

How do i go about showing an error message like above? Any help appreciated.

Answer 1

There's nothing out of the box per se for an error message exactly like that, but you could mock something up using by embedding an image, and adding some text using one of the built-in text styles to get the red colour. In particular, look at the "Color" section in this doc and using the "attention" colour. Here's a running sample.

In your case, you want an image and text, so you'd need a columnset, like this:

{
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "size": "small",
                  "style": "person",
                  "type": "Image",
                  "url": "path to your image"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "whatever your error message is",
                  "weight": "bolder",
                  "wrap": true,
                  "color": "attention"
                }
              ]
            }

As a further point, because you're wanting items to appear below the buttons, you'd want to use an "actionset" to position the buttons in the middle of the card, rather than always in the bottom. See here for more, unless you don't mind exactly where the error text appears.

[update] Have a look at the initial sample on the Designer, and especially at the "bleed" property, for making the text full width.