Advanced Teams Adaptive Cards

Advanced Teams Adaptive Cards

In this article, we will set up a workflow that will post an adaptive card in MS Teams, looking something like this:

Screenshot from 2024-10-09 12-32-27.png

 

Make sure you have read the New set up a webhook for Microsoft Teams using workflows article. We will use the end result of that flow as a starting point.

 

  1. This is where we were at the end of the previous article

    Screenshot from 2024-10-09 12-42-52.png

  2. After the Parse JSON action, add 2 new Initialize variable actions. Name them FormFields and CustomerFields. Set the type to Array and leave the initial value blank.

    Screenshot from 2024-10-09 12-49-41.png

     

  3. Add a new Apply to each action after the variable actions. Select Body fields as the output from the previous steps.

    Screenshot from 2024-10-09 12-58-48.png

     

  4. Inside the Apply to each action, add an Append to array variable. Choose FormFields as the name and paste in the following for the value:

    { "title": "@{items('Apply_to_each')?['label']}", "value": "@{items('Apply_to_each')?['value']}" }

  5. Repeat steps 3 & 4, with values Body customer and CustomerFields

    { "title": "@{items('Apply_to_each_2')?['label']}", "value": "@{items('Apply_to_each_2')?['value']}" }

    ** If you have renamed any of the actions, you need to adjust it in the JSON value as well. Make sure the name matches the parent action.

  6. Finally, we need to change the value of the Adaptive Card in the Post card in a chat or channel action. Paste in the content of

    Screenshot from 2024-10-09 13-37-11.png

     

  7. Save and test the flow, and you’re done.

To learn more about Power Automate, check out the docs.
Want to make even fancier cards? Take a look at the Adaptive Cards Designer.
See the web schema for available parameters