Want to display the text of the button clicked in adaptive cards

Question

I have created a Teams bot and I have a few submit action buttons. On clicking these buttons I would want to let the user know that the button has been clicked. Im using adaptive cards and submit action.

card.Actions.Add(new AdaptiveSubmitAction()
            {
                Title = item.Key,
                Data = item.Value,
                DataJson = "{\"Type\": \"Sort\"}"

            });

On clicking the "sort button I want the bot postback "sort".

This is how I see in teams

Thanks in advance

Answer 1

It's possible to do this using the special "msteams" payload, and specifying "messageBack", or "imBack" as the message type, similar to this:

{
  "type": "Action.Submit",
  "title": "Click me for messageBack",
  "data": {
    "msteams": {
        "type": "messageBack",
        "displayText": "I clicked this button",
        "text": "text to bots",
        "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
    }
  }
}

You can read more about it here.

Because you're using C#, you'd need an actual class to represent this, so you could do something like:

public class msteams
{
   public string type {get; set;} = "messageBack";
   public string displayText {get; set;}
   public string text {get; set;}
   public string value {get; set;}
}

Then you would set it like this:

card.Actions.Add(new AdaptiveSubmitAction()
            {
                Title = item.Key,
                Data = new msTeams() { displayText = "...", ... }
            });

Obviously you could use attributes to change the name of the class, property names, etc. For a more simple approach, you can just the "imBack" option, which I've wrapped below with attributes as well:

    public class AdaptiveCardImBackButton
    {
        [JsonProperty("type")]
        public string Type { get; set; } = "imBack";

        [JsonProperty("value")]
        public string Value { get; set; }
    }

Then I wrap that again, to get it to serialize the outer "msteams" attribute, as follows:

 public class AdaptiveCardImBackButtonContainer
    {
        [JsonProperty("msteams")]
        public AdaptiveCardImBackButton AdaptiveCardImBackButton { get; private set; }

        public AdaptiveCardImBackButtonContainer(string value)
        {
            AdaptiveCardImBackButton = new AdaptiveCardImBackButton() { Value = value };
        }
    }

The final usage in your code is really simple:

            card.Actions.Add(new AdaptiveSubmitAction()
            {
                Title = "sort",
                Data = new AdaptiveCardImBackButtonContainer("sort")
            });