Adding an Action to your Adaptive Card

When you creating your adaptive card, you will need to add an Action:

The JSON usually looks like this:

  "actions": [
      {
          "card":
          {
              "type": "AdaptiveCard",
              "body":
              [
                  {
                      "id": "dueDate",
                      "type": "Input.Date"
                  },
                  {
                      "isMultiline": true,
                      "placeholder": "Add a comment",
                      "id": "comment",
                      "type": "Input.Text"
                  }
              ],
              "actions":
              [
                  {
                      "type": "Action.Http",
                      "title": "OK",
                      "method": "POST",
                      "url": "APPROVEURL",
                      "body": "..."
                  }
              ],
              "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
          },
          "title": "Set due date",
          "isPrimary": false,
          "type": "Action.ShowCard"
      },
      {
          "url": "https://cardplatform.app",
          "title": "View",
          "isPrimary": false,
          "type": "Action.OpenUrl"
      }
  ]

Here are the main points:

1. url of the action is APPROVEURL and the CardPlatform will insert the correct approval url
2. body this will be the data returned to CardPlatform

The body of the action, is a JSON structure, of the data to return. Here is an example:

{
  "title": "Heading",
  "Due Date": "%7B%7BdueDate.value%7D%7D",
  "comment": "%7B%7Bcomment.value%7D%7D",
  "choice": "Approve",
  "returnurl": "RETURNURL"
}

The returnurl only needs RETURNURL and CardPlatform will insert the correct url to return the values to;

For items which return values from the input fields, it is always surrounded by double curly brackets – like {{comment.value}}, and it needs to be encoded as %7B%7Bcomment.value%7D%7D

Implement in PowerAutomate

To implement in PowerAutomate, we will first do the body. Add a compose action

In the contents of the Compose action, add the JSON for the body

Notice for the variables, we have used the uriComponent function to encode it, so the full function will be:

uriComponent('{{dueDate.value}}')

When the action body is inserted into the body element, all the double inverted quote need to be escaped from ” to \”, so add another Compose Action

The replace function replaces all the double inverted quote with an escaped form, and flattens it to a string

replace(string(outputs('Action')),'"','\"')

Now we can send the full adaptive card, using the Send Adaptive Card action

Fill in the Recipient field

The Adaptive Card will be the full JSON card, like so:

{
    "type": "AdaptiveCard",
    "body":
    [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Card Title"
        }
    ],
    "actions":
    [
        {
            "type": "Action.ShowCard",
            "title": "Set due date",
            "card":
            {
                "type": "AdaptiveCard",
                "body":
                [
                    {
                        "type": "Input.Date",
                        "id": "dueDate"
                    },
                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "placeholder": "Add a comment",
                        "isMultiline": true
                    }
                ],
                "actions":
                [
                    {
                        "type": "Action.Http",
                        "title": "OK",
                        "method": "POST",
                        "url": "APPROVEURL",
                        "body": "@{outputs('ActionEncode')}"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "http://adaptivecards.io"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

The main points:

1. url of the action is APPROVEURL
2. body is the ActionEncode compose action

The full flow will look like this:

When you run the flow, the card will show in your inbox

When the card returns to the flow, it will have all the data from the body in its return:

The fields are:

Field	Value
Respondent Email	Email address of the person responding to the card
Respondent Name	Name of person responding to the card
Response Date	Date the response was made
Choice	The choice made – this is the value specified in the choice field of the body
Comment	This was specified in the body JSON, its the comment field
Due Date etc	These are fields specified in the body JSON

Now you can send any adaptive card, and receive its reply.