Microsoft 365 Community Adaptive Cards, 1 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Drive Approvals with Adaptive Cards in Microsoft Teams and Outlook

Description

In this 21-minute citizen developer-focused demo, Tomasz Poszytek ushers’ viewers through 3 practical usage scenarios 1) facilitating business processes, like approvals, with Adaptive Cards, 2) sending and receiving data from Adaptive Cards in Microsoft Teams and 3) sending and receiving data from Adaptive Cards as Actionable Messages in Outlook. Examine flows in Power Automate, Preview cards in Azure Actionable Message Designer and register your services in the Actionable Email Developer Dashboard to publish actionable messages. Q & A throughout. This PnP Community demo is taken from the Microsoft Power Apps community call - February 2021, recorded on February 17, 2021.

Demo Presenter: Tomasz Poszytek @TomaszPoszytek

Supporting documents:
• Related Demos and Blog Posts - Tomasz Poszytek - https://aka.ms/poszytek
• Tool - Azure Actionable Message Designer | https://amdesigner.azurewebsites.net/
• Tool – Adaptive Cards Designer | https://adaptivecards.io/designer/
• Documentation - Register your service with the actionable email developer dashboard | https://docs.microsoft.com/en-us/outlook/actionable-messages/email-dev-dashboard

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog

A

I put the hyperlink to um to my media channels, social media channels. So if you do have like you know, questions and would like to get more understanding on what I'm going to show, then uh in my youtube channel, you can find all these demos that were where I'm describing really in a detailed way like what I'm showcasing. So if you go to aka.slash posh attack, you can find my youtube there all right.

A

So the first scenario that I wanted to show is about microsoft, teams and adaptive cards like we have a bunch of actions we can use already. All of them are actually in a preview, but don't worry that they're working quite stable today, so my idea was that we already have this new feature called approvals, so that you can create a new approval straight from the conversation in microsoft teams, but I just wanted to make it. You know more fancy and to stay all about or all within the same conversation.

A

It's like. Let's say that uh me as an employee. I just have files new version of us for approval, so I would say these are new versions of pdd.

A

So this process design documents for review or maybe approval and then I'll just drag and drop them to this conversation, yeah replace because they possibly are some were already added, as I was testing this before, and then I'll simply send this uh message to the chat and now what I could do, thanks to a fast cool trigger that we have in bar power automate is called first selected message.

A

I was able to create my own flow here that is called request for approval, and then this flow actually displays an adaptive card that I can as well author. So um I will now use adele vance as an approver.

A

Review and approve so what this flow I'll just show you in a moment is doing is grabbing all the details about this message: its attachments uh about the author, approver assignee whatever and is just doing a lot of magic. So first thing it does is display this information that to me as an author, mentioning me that this message we did set with it attachments has been now sent for approval and now once they switch to uh adele vans, I think that's yup yeah, that's adele! Then she in her chat window should already have has.

A

uh She has already this message from flobot with again an adaptive card with a lot of information? Sorry, for that I had to escape it, but maybe I just escaped too much. Nevertheless, this is required, because if this wasn't escaped and there were quotes, then this would simply make this cut invalid and don't display it. Nevertheless, that's the card with all the details, so there is information about hey adele. Please approve it information about who is requesting. I can as well go and see this message, so you can see this fancy highlighted with yellow.

A

So I'm sure that this is the one that we are talking about.

A

Furthermore, what I also have are the details about the message, so uh who is after the message when it was posted, or they tell us about the message I mean it's contents plus links to attachments, so I can click and open the attachments um they should now open in okay. I don't want to open these files, but nevertheless I could open them. So I could review the attachments and, in the end I can say, approve or reject.

A

And done so right now, once I click that proof, this card is going to be replaced with like say confirmation one. It doesn't look any more that fancy, but at least it shows uh information to the approver that hey your task has been completed and, furthermore, here, on the this uh message, which was sent for approval, there was uh information that it has been approved and the comments and who approved it and so on. So this was like a very easy way to enhance the approvals.

A

Moreover, everything all the information is kept within the same conversation. So, like everything, happens right right here and now what happened? Actually, uh maybe I'll just go to edit to this flow in sharepoint, like for selected file for a circuit item, so this trigger actually is following this new approach that soon should be implemented for to any adaptive calculated mess action in power automate because it already has the designer built in so you don't have to navigate just out or discard just straight here and save it, and it's done so.

A

This is the designer for the trigger, and then there is a lot of things happening. uh So first the workflow is getting this message which was actually sent for approval and then is getting those mentions for approval, request and author of the message and then actually first is posting this reply, informing that the message is going to be now under review under approval and uh well. This is also how I'm building the attachments list so because the attachments is always an array.

A

Therefore, I had to use this select statement or select action to just create a piece of adaptive card. Nevertheless, in the end, this is the whole adaptive card, so you can see that this action- it doesn't contain this button to author adaptive card just within the designer, but I had to design it outside so in the adaptive card.al designer. So this is where I actually build it and then copy paste is json, and then I enhanced it with all these dynamic outcomes from previous actions.

A

So that's quite a lot of work you have to do, but your results are really satisfying and this action is called posting a gift card to a team's user and wait for the response. Now. This is a quite I mean it's not a very new action. It has, I think, already like half a year or even more than half a year since been us with this. uh For, for I don't know several months already. Nevertheless, it's uh the highest benefit.

A

Your biggest benefit is that you can send this as a gift card and actually grab the response back from the user. Other actions that we have are not waiting are just letting you to submit or send the the card to user or channel, and that's it now, this card, this action actually helps you and lets you to grab the response and then process this information.

A

What is important is that, even if you use this action to post to a channel, it will always wait for the first response and plus it will always wait only 30 days. So as the regular approvals after 30 days, this action is going to be timed out and flow will simply fail.

A

The other downside of this action is that we are not able to update this card that we are sending with any information that we can grab from the user. So we have to create this information is going to replace this confirmation message upfront, and there is yet today no way to somehow mix this information with what user is sending from the card so like we couldn't. We cannot uh display hey adult, thank you for your approval or thank you for rejection based on what the outcome was. That is not working now.

A

Other thing that is not working with these actions in preview is that, for some reason you are still not able to actually find the dynamic outputs from this dynamic content from that action. So, even though this action is sending me some information like the comment and the outcome, it is no way to find these outcomes here. You simply need to know how to build this string and just build it manually.

A

If you don't know, the content are the outcomes how they look like you can simply put just one compose action and preview. What the json from this action looks like and then use it and then actually based on the outcome, I'm just sending another information below that message that was sent for approval with either approved or rejected, and that's it. How do you like it so far, good stuff, very cool, all right, um then. The second thing that I wanted to show you is about the actual messages which are even more powerful.

A

In my humble opinion, so the outro, the actual message you need to go.

B

Yeah luella was actually asking a question um they'd like to know: is there any mechanism to revoke the approval request? What's the process for actually revoking the approval? So what's what's the no? In that case,.

A

Well, no, unfortunately, uh once we send this adaptive cut to a user or to a channel, there is no way we can update it. So possibly this is going to be. You know implemented one day that we would be able to send this confirmation message, even if there is no action from the user, because this is all based on the web hooks.

A

So hopefully that should be somehow possible one day, but up today, as of today, uh you're only able to send it and then actually count on that the user is going to answer or complete this. This action is cut and then well. You can always uh set this custom timeout for the action and then like for five days, and if, during these five days user will not answer, then you can simply go into escalation mode. The same as you could handle approvals in flow that are not approved or responded.

A

So actually, if you have, if you do, assign an approval in power automate and it's not answered it's not completed, then you are not. You are as well not able to anyhow cancel this task. I mean sorry, you can, but you are not able to approve instead of the other user and, uh like you know, uh cancel the action to not wait anymore and so on so and.

B

Place from the portland user group is asking asking a similar question: is: can you change the approve or reject button text to say something else like yes or no.

A

Sure you can so once you go into uh the designer. Where was that? Was it here? No ash? Now I have too many windows open sorry. So um when you have the buttons you're always able to define these tables plus, if you have the sub in button, because what I was using, that the ok button was actually this, this action submit one. So you can have the labels.

A

However, what is important here are the ids, because the id actually is being sent back as the value that you can read so the example contents that is being sent from the adaptive card is like that. So what you see here is the information about the responder so like who clicked and then information from that so disney, the id of the button, which was clicked. So if you have like 10, submit buttons, then you always have the id of the one that was clicked plus the information that is like connected to the submitting button.

A

So what was submitted from the form? So this is actually what this provides for: uh send adaptive card to a different user and wait for approval and wait for the response is giving you back in power automate right now. The other thing are the actionable messages so like, although they're built as well on top of adaptive cards, they're a bit different, they're, very, very significant differences that you have to understand.

A

First, you can design them not only using the adaptive cards of a slash designer, but you can as well go to this am designer on the azure website. So we can just like grab the template and start from here. The designer looks a bit different, but it has its cool cool features called benefits from using.

A

So you can first see the previews like how is going your actual message, look like in outlook, mobile and outlook desktop, plus you can send it so if you're signed in you can send this message to your own account and just see how it really going to look like in your inbox. So these are the benefits from using this designer, not the adaptive class that they owe now.

A

The other thing that you have to do, if you want to send actionable message, is to go to outlook office.com this developer dashboard and you have to register this new provider, and then there are several scopes for network providers. You can use this test provider and only define users to which you want to send the actionable message.

A

You can define the provider on the organization level so that you will be able to send messages to anyone within your tenant or you can as well wait for approval from microsoft and registered the provider to send messages to any tenant in office 365 in the world. What is also important here is you need to define these target urls like where data from adaptive cart that is being sent to outlook is going to be sent then. So, in my case, you can as well use these regular expressions.

A

So in my case, I'm using power automate to get data back from this actionable message and then process it and then respond. I'm just going to show you how it works. Nevertheless, once you register this provider and then after the approval, you need to grab this provider id and use it in additive contents.

A

So let me just trigger an approval.

B

While we're waiting for that ui ui olivia was asking, can you programmatically register a new provider.

A

I have no idea, to be honest, I mean the point: is that if you, if you register the provider on the other level than uh the test users like organization or global, you need to have the approval so like. If you do register on the organization, it has to be your exchange. Admin who does approve if global, then it has to be someone somewhere in microsoft, will get the task for approval.

A

But I don't know if you can do this programmatically. To be honest, I never I never even checked that so anyway. That is my flow that I want to now run and I will use it to create a task, a regular power, automate task.

A

So I'll assign it to john.

A

Researcher and now run it now, I should have in a separate window john researchers email so with that now john should receive this actionable message containing all the information that I just defined, plus the possibility to approve or reject. Now, if you have ever used regular tasks that you can use in borrow to make, then you know that actually they are also sending these kind of actionable messages where you can approve or reject. However, they, for example, don't allow you to reassign the approval to the other user directly from the outlook.

A

So you have to go into action items in power, automate portal and there you can open the task and simply that way really a sign. However, what I did here is like enhance the version of this of this car that is being sent okay, so uh I didn't change the request, so this is still just a fixed person who is requesting. However, what I wanted to show is that now this actual message actually is showing information input, so that does details.

A

I mean the title at the description and then user is able to actually approve, reject or even reassign. So I am able here to pick one of the assignees and uh well, I could say, approve- and this way not only this task. This message is going to be replaced with the confirmation one, but in this case I can actually create like a a new card that is following.

A

You know the look and feel the the user experience of the previous one. So this is more consistent in output, as you can do this in teams so well. I have this confirmation, so I know that this card has been. This task has been approved. Now the outcome, uh the comments. Now, once I go back to this flow, I should already see that it's not in running, but it's completed.

A

Yes, it has succeeded now. How did I actually do that?

A

Now? That's a bit more advanced scenario right now, so, first, what I had done was to create an approval, but not wait for the approval just create and also I turned off these enable notifications, because I didn't want the flow to send its own email. I wanted to send it on my own. Then I prepared this actionable message. Adaptive card code, and now here are the differences, so first I had to provide this originator id here as the as the guide also.

A

Thus there is a set of differences here at the bottom, so once I define the actions which are this type http, I am able to define the url so where these contents from the card is going to be sent, and this is also the url that you have to define. When you are registering these providers, then you are also able to provide to define the body the headers.

A

This is very important. If you don't define these, you will simply be not able to send this back to, for example, power automate, because it will be missing the crucial information like headers or contents, and so that is the content of this message and now, finally, I had to wrap it with this script code or tags and simply put it to send as an email.

A

What I also did, I also posted this adaptive card to the same user via the teams, but it doesn't matter. I mean I wanted to focus on this actual message in this scenario, and so then I was simply waiting for the approval now. Lastly, what is happening here is that once user clicks either approve or reject or reassign the contents from that message is sent to this flow, which is actually triggered on the http request action and then just let it load.

A

So this is uh what it's, what is triggering this flow and then what is actually happening is I'm grabbing all this information from the cds about the approval about the user and based on the outcome, so that was approved or rejected or reassigned, I'm just triggering a different switch, so here I'm also checking if the comment is filled in if it's not filled in I'm sending back information that hey this is a required to put in comments without that cannot be subject.

A

However, if comment is provided, then I'm using the extended custom connector for uh approvals api that daniel laskews has on his github and I'm simply approving this task and then based on whether it went fine or not, I'm sending different information. So what I did here is uh based.

A

I mean thanks to this header card, update in the body, I'm able to simply send a different adaptive card as the confirmation one so that will replace the one you saw in the first place and that is actually happening for all the other scenarios or steps as well. uh Even the reassign is, is using this customer. However, it has its limitations because it's working in the context of the user, but anyway it's it's fine. You can always, uh you know, work around it.

A

I think that's it so like I really went with lightning speed through these whole functionalities. I hope at least I have inspired you to try your you know best with this.

B

All right, so there's been a couple questions: let's see if we go through daniel holiday, awesome stuff, any other questions that were not answered.

C

Actually, one of the questions that I answered, I wasn't sure, is there a blog post on the provider set up. I did include the link for all the posts.

A

Yeah, so so there is on my blog as well for actionable messages like what steps you have to to take to register the.

B