Teams / Power Automate adaptive cards

When sharing information or sending out a notification on teams I like to use the adaptive card feature. Adaptive Cards are the Teams method of sharing and displaying blocks of information in an easy-to-read manor without the complexity of customizing CSS or HTML to render them. With adaptive cards you can even create polls, show weather information, and create hyperlinks.

Creating a feedback form

  • Create a Power Automate flow with the required trigger.
  • Add the Post adaptive card in a chat or channel Teams action.
  • Select the Group chat (Channel or Group Chat) or provide the chat ID.
  • Add the following JSON code for an example feedback form with a title, single line, and multi-line text input fields and two types of choice list.
{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "id": "Title",
      "text": "EXAMPLE FEEDBACK FORM",
      "horizontalAlignment": "Left"
    },
    {
      "type": "Input.Text",
      "placeholder": "{acFullName}",
      "style": "text",
      "isMultiline": false,
      "maxLength": 75,
      "id": "acFullName"
    },
    {
      "type": "Input.Text",
      "placeholder": "{acComments}",
      "style": "text",
      "isMultiline": true,
      "maxLength": 200,
      "id": "acComments"
    },
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Do you like Adaptive Cards?",
      "horizontalAlignment": "Left",
      "separator": true
    },
    {
      "type": "Input.ChoiceSet",
      "id": "acDecision",
      "value": "1",
      "choices": [
        {
          "title": "Yes!",
          "value": "Yes"
        },
        {
          "title": "Of course!",
          "value": "Of course"
        }
      ],
      "style": "expanded"
    },
    {
      "type": "TextBlock",
      "text": "Suggest follow-up discussion regarding:",
      "weight": "Bolder"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "acFollowUp",
      "isMultiSelect": true,
      "value": "",
      "choices": [
        {
          "title": "Everything",
          "value": "Everything"
        },
        {
          "title": "Always",
          "value": "Always"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}

Creating a Poll

  • Create a Power Automate flow with the required trigger.
  • Add the Post adaptive card in a chat or channel Teams action.
  • Select the Group chat (Channel or Group Chat) or provide the chat ID.
  • Add the following JSON code for an example Poll with a title, header line, header, text, and a short poll.
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Example Poll Request",
            "id": "Title",
            "spacing": "Medium",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent"
        },
        {
            "type": "TextBlock",
            "text": "Example Header Tagline Text",
            "id": "acHeaderTagLine",
            "separator": true
        },
        {
            "type": "TextBlock",
            "text": "Example  Poll Header",
            "weight": "Bolder",
            "size": "ExtraLarge",
            "spacing": "None",
            "id": "acHeader"
        },
        {
            "type": "TextBlock",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum lorem eget neque sollicitudin, quis malesuada felis ultrices. ",
            "id": "acInstructions",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Example Poll Question",
            "id": "acPollQuestion"
        },
        {
            "type": "Input.ChoiceSet",
            "placeholder": "Select from these choices",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                    "title": "Choice 2",
                    "value": "Choice 2"
                }
            ],
            "id": "acPollChoices",
            "style": "expanded"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "id": "btnSubmit"
        }
    ]
}

Creating a hyperlink

  • Create a Power Automate flow with the required trigger.
  • Add the Post adaptive card in a chat or channel Teams action.
  • Select the Group chat (Channel or Group Chat) or provide the chat ID.
  • You can use dynamics content for the hyperlink text and the hyperlink itself.
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
       {
            "type": "TextBlock",
            "text": "This is example 1 [Hyperlink Texts](https://powerautomate.microsoft.com/)",
            "id": "acHeader",
            "wrap": true
        },
       {
            "type": "TextBlock",
            "text": "This is example 2 [@{triggerOutputs()['headers']['x-ms-user-name-encoded']}](https://powerautomate.microsoft.com/)",
            "id": "acHeader",
            "wrap": true
        }
    ]
}

Finding the chat ID

  • There are multiple ways to find the chat ID, I like to use the following way.
  • Open teams in the browser and open the chat
  • In the URL you can see the ID of the chat. You need to copy the code after conversations including the @ and that is after the @.
  • In my first example the ID is: 19:de13fe3a9cae407ba31abc84421e9ab4@thread.v2
  • In my second example the ID is: 19:95b0d2cb-aa0c-4e0c-8fcf-2f7b77c5afdb_d523c084-0c04-41d0-81d2-943ad42abe9a@unq.gbl.spaces
  • The action in Power Automate with find the chat and show the name of that chat.
https://teams.microsoft.com/_#/conversations/19:de13fe3a9cae407ba31abc84421e9ab4@thread.v2?ctx=chat
https://teams.microsoft.com/_#/conversations/19:95b0d2cb-aa0c-4e0c-8fcf-2f7b77c5afdb_d523c084-0c04-41d0-81d2-943ad42abe9a@unq.gbl.spaces?ctx=chat

Flow: Button to launch a Flow/Automate from a view

You can use column formatting (JSON) to create buttons that start a Flow on the corresponding list item in SharePoint. The button will be shown in the view for easy and fast access. After clicking the button the Flow Launch Panel will be displayed and you can start the Flow. This button is faster then clicking on the … then Flows followed by clicking the correct Flow.

Creating the button

  • Open the settings of the document library.
  • Create a new single line of text column with the name Start a Automate.
  • Go to a view where the new column is visible.
  • Open the menu of the column, click on Columns settings followed by Format this column.
  • If required click on the advanced mode option.
  • Copy and change the code below.
  • Change the txtContent to the name that needs to displayed as the value of the column. Currently it is Start the Automate.
  • Change the actionParams id to the Power Automate ID, see the steps below.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"788b1689-e999-99d9-9f37-fc539d5ba36b\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Start the Automate"
    }
  ]
}
  • Add the JSON code and save the changes.
  • The button can only start Power Automate from the default environment.

Finding the Automate ID

  • Open Power Automate.
  • Click on the name of the Automate.
  • In the ID is located in the URL after shared.
  • For the following Flow URL the ID is 788b1689-e999-99d9-9f37-fc539d5ba36b
  • The button can only start Automates form the default environment.
https://emea.flow.microsoft.com/manage/environments/Default-40ce6286-0e4a-4500-8bb1-bf46447c5f7f/flows/shared/788b1689-e999-99d9-9f37-fc539d5ba36b/details