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.

I'm not totally following. Do you mean you want to have your own error message that would look similar to the "Unable to reach app" error? — Hilton Giesenow
Also, to be clear, I assume the adaptive card action calling back to your bot, and your bot is making the POST request to the backend service? — Hilton Giesenow
@HiltonGiesenow Yes, the bot is making the POST Request to a web service. — nadz
@HiltonGiesenow Instead of showing a message separately i would like to show a custom error message as show above within the same activity (adaptive card activity) — nadz
so is your question about how to show the error specifically, or it is about how to change an existing card that you've sent already? — Hilton Giesenow

Hilton Giesenow Hilton Giesenow · Accepted Answer · 2020-04-26T10:12:08

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.

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

1 Answers