Microsoft 365 Community Community Demos, 21 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to get output from a Teams Adaptive card with Power Automate

Description

Use cards to disseminate and collect information or approvals. In this 7-minute citizen developer-focused demo, Nathalie Leenders shows how Teams Adaptive cards deliver a direct output, parse JSON and store output with the help of Power Automate. Create card starting in Adaptive Cards Designer and choosing the Microsoft Teams, theme, and target version v1.4 or newer. Walk through the Power Automate flow to post card, collect/store response, send confirming mail in Teams chat. Capability in Cards for Power Apps (Preview).

This PnP Community demo is taken from the Microsoft Power Platform community call – December 2022, recorded on December 21, 2022.

Demo Presenter
• Nathalie Leenders | @NathLeenders

Supporting materials
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer
• Documentation - Cards for Power Apps overview (preview) | https://learn.microsoft.com/power-apps/cards/overview
• Blog - Power Platform tips & tricks | http://nathalieleenders.com/Home/

Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community Blog - https://aka.ms/m365pnp/blog
• Microsoft 365 Platform Community - https://aka.ms/m365/community

A

B

From A team's adaptive card, just a little bit of information about myself about me, I'm, a self-taught, Power, Platform, developer and I've, been in power bi for, however many years, but I used to actually be a former hairstylist and I turned to it, and I've recently started my own website, which I put a QR code on on the screen for you guys.

B

So that's a little bit about me and let's talk about teams, adaptive cards so for the cards how I use it is I can use it as both an approval or as an information form. So this actually started when one of my clients asked that they wanted to have one single method of getting information out of the business, so I figured okay. I could do an approval through a card. That's fine, because if somebody says yes or no and adds a comment, that's an approval.

B

So what you can do is you can do an approval and information form I put in something about free t-shirts and how? How does it actually work? So um this card gets or gives gives a certain output. Now Microsoft was not being nice to me because they actually changed the way that this works so earlier about a month ago, you needed to do a partiation to get the output from the team's card.

B

So the most important thing is that when you may, when you're making your car that your ID is recognizable so that you can say approval, is uh your approval, your yes or no or remarks? Is your comment field? So how does that actually work? So let me stop this and there's actually many different ways on making a team's adaptive card. So what I'm currently showing you now is an explanation on how the new on how the new powerapps preview works, which is this one?

B

You can do a adaptive card here, but my favorite is using the adaptivecards.io designer. So this website gives you the option to actually choose teams which theme and the most important one is which Target version I I I've actually found out the hard way that if you select the wrong target version- and you have some type of error in your code or you try and use any any other of the codes, it doesn't work in teams, it doesn't display the card so always make sure to do.

B

Microsoft teams, Target version, 1.4 or newer, and then you're free to actually create your very own card, and it says easy as just drag and drop putting in the information, and then this one, the ID is the most important one that you have to set.

B

So what it actually does is at the bottom here it gives you the code, so you don't have to write this whole code yourself. It's a it's really easy. So you just copy paste and let me go to my flow so in here, I've added, post adaptive card and wait for a response, so I'm posting as a flow bot and I'm doing it in a chat and then under message. You just copy paste that whole that whole code from the side and it's as easy as that and then make sure under update message and recipient.

B

You add your information now. The the tricky part was under here under an email, for example, you can do this. Person has requested these socks, so socks choice is the ID I gave to my choice: option for free socks, I mean who doesn't love Free socks, so what this actually does is it sends an email with output from this adaptive card. However, sometimes with these adaptive cards, uh the output isn't directly available.

B

So in the past we had to do a Json parsing, getting the output from the body from that card parsing through through the Json code, then putting that in a variable or something because sometimes within power automate, you have different branches or for each or any different uh condition, and then sometimes the output from that is not available. So how I go around that is on the top I add an initialize variable.

B

If I can, if I can type correctly initialize.

B

And then, let's say a variable socks I want to make sure that it's a string because we are parsing through text and then under my teams card I go to attend to string variable and then in here. I want to save my variable for socks. I want to make sure that my socks choice is then inside this variable. So what then happens if I have different branches or for or for each or a condition or any other area?

B

That I can actually use this variable throughout that whole flow, and it it doesn't really matter where it is so, then I can, for example, let's say this is a really deep, nested email. I can just add my variable socks and there it is, and then that's the output from that adaptive card and then once somebody gets this within teams and I will show you what it looks like.

B

B

Here it shows within my teams it shows the card that I've just designed and I'm gonna, say: hey I, like power, Pages hugos, here I, like power pages hit Smith and then in my flow it gets that output and it stores it in my variable socks that I've selected power pages and then then you can use that to feed that into your power app or any other thing that that you may want to use it for so that's about it, and that was my explanation on how to get power automate to get the team's uh output for you.

A

Awesome Natalie: this is a great if there's questions we'll look in the chat just uh in the interest of time and everything, uh but an excellent, excellent demo. Thank you for sharing such uh Simplicity and fantasticness uh and love how you brought everything together right, it's not just one product or another product, uh but you're really shown how they work together there so excellent job. Thank you very, very much.