3. 29. Embed canvas and model-driven apps in Microsoft Teams channels
In this video we’re going to look at how we can embed apps into Microsoft Teams. Now there may be one bit of integration that you need to switch on and you can see why it is. So I’m in the Power Apps portal and I go to Admin Center and then I click on the relevant environment. Go to Settings at the top. On the right and side we go to Integration and Microsoft Teams Integration. That’s different from Teams integration settings. If you want model driven apps to be embedded in Microsoft teams, then you’ll need to ensure that this is switched to on.
Now let’s just have a look and see how to embed apps into Microsoft Teams. So click on Teams and you can see my team channel is General and we’ve got Posts, Files and Wiki running across the top. We’ve also got A Plus, so we can add tabs here and I can add a PowerApps. So if I click on Power Apps, on the right hand side it says My Apps. And so I can click on, say, the account apps. So make sure your team can use the app. You may need to share access. So I’m just going to click on Save. You notice the option is to create an app in Power Apps and then after a few seconds it loads up and then we can view accounts and all the other functionality that we expect from the app.
So that’s adding a Canvas app, technically known as embedding as a tab app. So it’s up here in the tabs. Now let’s do the same thing with a model driven app. And you may notice that the model driven apps aren’t actually listed in here. So we have one called Accounts and Expenses. So what I have to do is click on my apps and go down to Model Driven Apps and there we will have Accounts and Expenses. Note that just as in the previous Canvas app, we have a Post channel about this tab.
So when you install it, you can create a post. So that’s how we can install these as tabs. And you can see the posts here, by the way, that we were talking about. However, there is another way of doing this and that is to go to the PowerApps portal, go to Apps, find your Canvas app, click on the next to it and you’ve got Add to Teams. Notice that this option, which is also at the top, doesn’t appear for model driven apps, it’s for Canvas Apps. So if I add to Teams and you can see that, you can edit details.
So if you want to add things such as a description, you can do that by going to App and there is the description. Additionally, we can click on Advanced Settings and you can put in some developer information as well. So I’m going to click on Add to Teams and it’s asking me permission to open Microsoft Teams so I’ll say yes. And you can see it says this particular app is an app built using Power Apps. It’s going to be a personal app as opposed to a Tab app. So I’m just going to click on Add and you’ve got the options add to a Team, Add to Chat, and here you can see it is now as a standalone app.
So if I go somewhere and then come back, you can see that here we have the app which we can just launch. So the tab app goes at the top of a particular channel and you add a new one by clicking on the Add button next to it. However, personal apps which you go through the dot here to find an app, you embed it as a personal app by going to the PowerApps portal. And this is for Canvas apps. Now, there are a few limitations of using apps inside Microsoft teams. Firstly, image and PDF files can only be loaded over secure connections, so Https so secure the same sort of connection that banks use.
For instance, not all sensors such as acceleration, compass location are supported, so you won’t necessarily be able to see how fast you’re driving or which direction you’re driving in. There’s a reduced list of audio formats that are supported AAC H 264, Audis and WAV, the Wave format. Most notably absent from that list MP3. There are a few things that can’t be used in teams address Input, Map, Mixed Reality, and Power Bi tile Controls. And additionally, there are a few things that can’t be used in teams mobile, the Barcode control and the Camera Control. But you can use the Add Picture control instead. The Microphone control will work in Microsoft teams using the MP4 or AC format with its own recording experience and will be limited to a maximum of ten minutes.
So here are two ways you can add your apps into Microsoft teams. For both Canvas and model driven apps, you can add it to a channel by clicking on the plus. You may need to enable the Allow model driven apps to be embedded within Microsoft teams. For Canvas apps, you can have it as a standalone app by going to the Power Apps portal, going to the dotted art, click on Add to Teams and then Add to Teams.
4. 54. Power Automate – Create adaptive cards for Microsoft Teams
In this video we’re going to look at how to create adaptive Cards for Microsoft Teams. So here we are in Power Automate and I’m going to create a new floor. So it’s going to be an instant cloud floor. So going to call this Microsoft Teams and manually trigger a floor. So click Create and then the next step is going to be a Microsoft teamsbased step. And so that step is going to be post an adaptive card to a Microsoft Teams channel and wait for a response. So you can see there’s lots of different variants of that, but I’m going to use this one right at the bottom. So let’s click on that sign in to create a connection to Microsoft Teams. It should be signing in right now. So I’ll select the team ID and select the channel and then we’ve got the message. Now the message needs to be in JSON format jsorn.
So what we’re going to do is go for a completely different website. It’s going to be called adaptive cards. IO and what this Microsoft website does is allow us to design a card. So you can see we’ve got a card here for example. So I’m going to click on a new card up here and we’ve got all of these different templates. So I’m going to scroll down and use Tellers about yourself, an input form. And you can see we’ve got various elements that we can drag in.
We can drag in text blocks and images and media and so forth. And there’s a preview mod so you can see what sort of information we’re trying to get. So now we’ve got all of this, we can copy it into Power Automate. Now if we’re going to use it with Microsoft Teams, it doesn’t choose Target version 1. 3. We have to change this to 1. 2. That’s quite important.
You will find that it has problems with version 1. 3. Now we can click on Copycard Payload which generates JSON and now we can paste it into our Power Automate floor. There we go. And now I can paste that into the message. It’s a really long message.
That’s why you should design it elsewhere. And then what we can do is get a mail step, send an email notification. So again, I’m just going to send it to myself. Results of adaptive card being the subject. Now there’s a few things that you can get in response, but none of those are actually the things that I’d asked for. So I’m just going to click a few things and then save it and go for a test and see if they appear and test it so you can see it uses these following apps. That’s fine. Run the flow successfully started. So the test is running. So now let’s go into Max. So in Microsoft Teams, in the channel, this is what I get. Now this only happens if you’re using version 1. 2. If you’re using version 1.
3, you’ll more likely get with sorry, this can’t be displayed. So I’m going to type in my information and my phone number and click submit. So there we go, it’s submitted. Let’s go back to Microsoft Automate. And as you can see, the test was successful using version one two. So myoflore ran successfully. Now let’s go back in and edit it and edit these, send an email notification and you can see that. Now we’ve got a few additional things. So my name, my email and my tell have appeared.
So let’s save this again and we’ll test it again. And now let’s go back to Microsoft Teams. So here is my latest one. So I’m going to say hi there, this is me 123-456-7891 and submit that. Now we go back to Power Automate and you can see that it has now got the details that I was requesting. And here you can see my email with the same details as well.
So in this video we’ve had a look at how to create an adaptive card for Microsoft Teams using Power Automate. You post an adaptive card to a team’s channel or similar and then you can send an email notification or similar or maybe load the data into a database when you received that data and to help you design it, you can use adaptivecards IO designer. Just make sure to use target version one two.
