Adaptive Cards Input Values in Submit

Question

Hi I'm using the Adaptive card SDK in a web page, using a Sample Card like this:

  var card = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
    {
        "type": "TextBlock",
        "text": "Present a form and submit it back to the originator"
    },
    {
        "type": "Input.Text",
        "id": "firstName",
        "placeholder": "What is your first name?"
    },
    {
        "type": "Input.Text",
        "id": "lastName",
        "placeholder": "What is your last name?"
    }
],
"actions": [
    {
        "type": "Action.Submit",
        "title": "Action.Submit"
    }
]};

and rendering using the usual rubric. I'd like to get the inputs back with the submit so I tried this

     // Set the adaptive card's event handlers. onExecuteAction is invoked
    // whenever an action is clicked in the card
    adaptiveCard.onExecuteAction = function (action) { console.log(action.toJSON()) }

which just gives me: Object title: "Action.Submit" type: "Action.Submit" __proto__: Object

How do I get the values of the input fields on the submit action?

TIA for any comments, advice and answers

Sebastian Zolg Sebastian Zolg · Accepted Answer · 2020-09-15T06:20:41

You can use the data property of the action object just like this:

  adaptiveCard.onExecuteAction = function (action) {
    alert(`Hello ${action.data.firstName} ${action.data.lastName}`);
  }

Here's a full jsfiddle.

There are many other interesting properties on the action object, but I haven't found good documentation. However, the source code of the adaptive card visualizer contains some usage examples.

Adaptive Cards Input Values in Submit

1 Answers