Search code examples
javascriptsdkadaptive-cards

Adaptive Cards Input Values in Submit

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

Solution

  • 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.

    Sample submit

    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.