Flow - Teams : Rich messages based on Forms data (JSON)?

Frequent Contributor



How can i use microsoft flow to create good looking posts in Microsoft Teams


I have read about something called JSON and something called webhooks and creating rich cards in microsoft teams.

How can i careate these cards with predefined information.


For example.

I have a form that i now use flow to post a message in teams every time someone fills out the form (microsoft forms).

But i would like to make the message that is posted in teams look better.

With a JSON card....


What do i need to do this?

I have googled around. Finding lots of information... but it is a bit to advanced for me... can someone dumb it down?

12 Replies
So the easy way that I do is load up the App studio editor app in Teams, then inside of that app is a tab for Card Editor, you can easily generate a card look there and copy it, then just insert your dynamic data to get a good looking card.
Well I take that back they changed it, I need to find if it's still available but there was something somewhere that you could build out cards via UI and then copy the JSON, looking :P.

In the meantime here is a good reference for the cards however with examples you can use and just plug that into Flow and add in the dynamic fields and your good to go: https://docs.microsoft.com/en-us/outlook/actionable-messages/message-card-reference

Thanks, this look very good.


But where do i paste in the code in flow to make it post in teams

can i just use the Teams and post message command in flow?


screenshot: http://prntscr.com/krgfe1



Yes. However, unless they fixed it, unfortunately using FLow to post a message in Teams doesn't trigger notifications / activity bell for users. So if that's a requirement you need to look at creating a web hook, that posts this same JSON and then subscribe to it with connector on the channel you want them to go into, that will give you notifications.
Another good resource for this if the flow still isn't posting notifications. Kind of touches on that, it's what I used when I was messing with this, was pretty easy to create a Webhook to use.

thanks for many good ideas.

i need to first make sure i get the posting to work before modifying it.


currently i do not get it to work

screenshot: http://prntscr.com/krgily


this just postes the JSON code to teams

So no card being created.

im so confused about this.

i need some very simple flow example that post a JSON card into teams.


All my googling and tries are not giving any result.

I get a bunch of different erros all the time.


Here is my latest try, if you have any input to give im very happy.


SCREENSHOT1: http://prntscr.com/krgtyb

SCREEN2: http://prntscr.com/krgu3y

screen3: http://prntscr.com/krgu7m

screen 4: http://prntscr.com/krgub8



Follow this article, pretty sure you have to use webhook to use JSON and message cards etc. This is pretty easy to follow and do, you will also get notifications that work on the channel as well this method.

Here is the card playground I was talking about in the beginning it's nice to generate some simple cards..

I have succeeded on getting the flow to work. now i get a card posted in teams.


but the JSON code i do not understand.


This code

"type": "TextBlock",
"size": "large",
"text": "**test title**"


works just fine.


But how do i add another section that is not set to be "large"?

I have tried to look at other examples but it seem i can not add much code atall in Flow


for example, how do i add a large title and then a subtitle and then some normal text?


I'm not an expert at JSON, but just use that generator I sent you, you can plug stuff in pretty easy. See example here, I just took the Medium one, and duplicated in the section seperated by comma to make a large title as well. 


Im doing exaclty as you describe.


I post this in flow

  "type": "TextBlock",
  "size": "large",
  "text": "**textblock 1**"
  "type": "TextBlock",
  "size": "medium",
  "text": "**textblock 2**"


but i get an error and can not save the flow

if i remove one textblock, then i tall works.

It seems i can not have two?


i can not post the above code either in the playground



what am i missing to make the code work?