CODEWITHSUNDEEP
c#botframeworkmicrosoft-teamsadaptive-cardsweb-chat
MarcoWirtl
MarcoWirtl

Reputation: 145

How to rewrite a Adaptive Card Submit Action for MSTeams also working in Web Chat?

Hi i'm using adaptive Cards and want to generate a Submit Action which works in MS Teams as well as in Webchat.

In Emulator this works fine. After i'm clicking the Button its like the user would type in "Test" in the chat.

"actions": [
    {
      "type": "Action.Submit",
      "title": "Test",
      "data": "Test"
    }

This doesnt work in MS Teams. How to bring this to work?

Upvotes: 1

Views: 2007

Answers (2)

Kyle Delaney
Kyle Delaney

Reputation: 12264

My blog post explains that if you want to use a string submit action you will need to do it differently in Web Chat and Teams:

There is some special Adaptive Card functionality that is specific to the Microsoft Teams channel. You can supply a special property with the name msteams to the object in an object submit action's data property in order to access this functionality. By doing so, you can get a submit action to behave like an action of your choosing. The object you put in the msteams property must have a type property in order to specify the submit action's special behavior.

When the type property is "messageBack" the submit action will behave like a messageBack card action, which is like a combination of imBack and postBack. This means you can specify both visible text that will be displayed in the conversation history as well as invisible data that gets sent to the bot behind the scenes.

{
  "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\"}"
    },
    "extraData": {}
  }
}

The displayText string is what gets displayed in the conversation history. The text string will populate the activity's text property but will be invisible to the user. The activity's value property will get populated in the usual way by combining the values of any input fields with any additional properties in the data property's object, but it will also include any properties that have been serialized into the value property of the msteams property's object.

When the type property is "imBack" the submit action will behave like a imBack card action. This of course will work similarly to a string submit action but it has the advantage of not breaking when the card contains input fields, though the input fields' values will not be sent to bot when the user clicks this action and neither will any additional properties you put in the data property's object. Also, Microsoft Teams does not support string submit actions at the time of this writing, so you will need to use this special Teams feature if you want to simulate string submit actions.

{
  "type": "Action.Submit",
  "title": "Click me for imBack",
  "data": {
    "msteams": {
        "type": "imBack",
        "value": "Text to reply in chat"
    },
    "extraData": "(this will be ignored)"
  }
}

If you want to have the same submit action work the same way in both channels, it will need to be an object submit action. If you want a string submit action to work on both channels then your bot will need to check which channel the activity came from and react accordingly.

Upvotes: 4

Krishna089
Krishna089

Reputation: 101

Please try the following sample adaptive card Json,

{"type":"AdaptiveCard","version":"1.0","body":[{"type":"TextBlock","text":"Imback Button"}],"$schema":"http://adaptivecards.io/schemas/adaptive-card.json","actions":[{"type":"Action.Submit","title":"Can you Help me","data":{"msteams":{"type":"imBack","value":"Can you help me"}}}]}

you can test adaptive cards in App studio app in Teams.

Hope this will help you. Thanks.

Upvotes: 1

Related Questions