Custom Actionable Messages with Microsoft Flow – part 3 – Adaptive Cards, update cards and required fields

This is part 3 of the Custom Actionable Messages with Microsoft Flow series

A few months ago, I wrote about Custom Actionable Messages with Microsoft Flow in a two part blog series. There have been some changes regarding Actionable Messages and some new insights I have gained that I want to inform you about.

Action Card deprecated

First of all, the Action Card I referred to in my posts is now deprecated. You can still use them, but they are not supported anymore. I recommend you use Adaptive Cards from now on. More information can be found at this Dev Center article. The main changes are as follows:

  • The JSON for an Adaptive Card is different from an Action Card. The differences are:
    • “$schema”: “https://adaptivecards.io/schemas/adaptive-card.json” has been added.
    • “version”: “1.0” has been added.
    • “@type”: “MessageCard” has been changed to “type”: “AdaptiveCard”.
    The MessageCard Playground is updated to V2 to use the Adaptive Card format, but you can also use the new Adaptive Cards Designer which provides more intuitive design options. I recommend using the new Adaptive Cards Designer
  • The <script> tag that is used in the HTML body of your email has been changed from <script type=”application/ld+json”> to <script type=”application/adaptivecard+json”>.

Example

The HTML body (including JSON and Dynamic Content) I used will generate the email below:

More information on composing your HTML can be found in Part 1 of this blog series.

Refresh Adaptive Card 

Another thing I’ve learned is that you can update your Adaptive Card after the user has completed the assigned task using the Refresh cards mechanism. The Microsoft documentation isn’t quite accurate on this, but thanks to Stefan Strube I’ve figured it out.

There are a few steps involved to get this working:

  1. Register your Actionable Message in the Actionable Email Developer Dashboard:
    • Click on + New Provider to add a new provider to the dashboard
    • On the next page, enter a Name for your Actionable Message
    • Enter the Sender email address from which the message will originate
    • Enter the Target URL, which is the Flow HTTP Endpoint of your ‘When an HTTP request is received’ trigger
    • Select the Scope of submission (for this blog I used the My Mailbox option)
    • Add a logo (optional)
    • Accept the terms and conditions and click Save
  2. Add the value from the Provider Id (originator) field to the originator attribute in your JSON, as follows:
    "originator": "ProviderId",
  3. Generate a new Adaptive Card using the Adaptive Cards Designer (or just update your existing Adaptive Card) that must be shown after a user has completed the assigned task. Don’t forget to add the originator attribute here as well.
  4. Add the JSON to your second Flow that processes the outcome of the request. Please note that you don’t need to wrap your JSON inside an HTML <script> tag. If you do wrap your JSON inside a <script> tag, your Flow will fail!
  5. Add a Response action (from the Request connector), set the Status Code to 200, add the following Header: CARD-UPDATE-IN-BODY: true and add you JSON to the Body of the action.

That should do it, now when the user completed the assigned task, the Adaptive Card will be updated:

Required output

With Action Cards, you could set the isRequired property on a textbox to true to make it required. Unfortunately, in the current version of Adaptive Cards it’s not possible to make a textbox required. Luckily, with the same mechanism as you refresh your Adaptive Card, you can make your textboxes required.

First of all, you must add a Condition into your Flow that checks if the regarding textbox is empty with the following expression:

empty(triggerBody()?’comments’ is equal to true

I also added the check if the outcome is Rejected, because I only have a textbox when Rejected has been selected.

If the condition is met, your Flow should respond to your Adaptive Card using the Response action again. Only this time, the Status code shouldn’t be 200 since that is the OK code. I use the 406 code which is Not acceptable. You should also add the following Header: CARD-ACTION-STATUS: <your error text>. After the Response action, you must add a Terminate action to make sure your Flow doesn’t run any further.

That should do it. When the user doesn’t fill in the required text box, an error message will appear:

The entire Flow ‘chain’ is as follows:

 

38 Replies to “Custom Actionable Messages with Microsoft Flow – part 3 – Adaptive Cards, update cards and required fields”

  1. Hi Rick,

    Thank you for this great blog!
    I’ve a question, when I send an adaptive card to other users in my O365 tenant, they get a blank message. When I send it to myself, it’s working fine.
    The users are using the most recent office and/ or OWA.
    I used to test also an example adaptivecard from https://adaptivecards.io/samples/ but that’s also ending in a blank email message.

    Have you any idea what’s going wrong?

    Thanks in advance.

    0
    0
    Reply

    1. How did you configure your Actionable Message Provider? And more specifically, what did you choose for Scope of submission? Make sure to set that to Organization if you want to use the actionable messages inside your organization (or Global if you want to use it outside your organization as well)

      0
      0

  2. I made Actionable Email Developer Dashboard and then I added the originator Id in the adaptive card script it doesn’t work, do I have to add somewhere else because I can se the adaptive card but others user don’t? thank you

    0
    0
    Reply

  3. Hi, I am trying with a simple adaptive card and sending it from https://amdesigner.azurewebsites.net/ to my email address. I have included originator as well. However, it come as an attachment and doesn’t render the card. I see the following message in the body.

    This message was sent from the Actionable Message Designer tool. If the card doesn’t appear, install Actionable Message Debugger Outlook add-in to debug the issue.

    Note: JSON payload of the card attached with this message.

    0
    0
    Reply

    2. Can i have your email so i can send you the script ? And some screenshot of the process if you don’t mind. Thanks for your help

      0
      0

  5. I have a question 1st, send an email is not available anymore in flow,the only option is send an email v2 how can we insert the output in it ? 2nd question did you use data operation compose or parse operation ? can i have your email i need your help in solving this actionable message, i am new to ms flow and it is somehow required in our company if you could help. thanks

    0
    0
    Reply

    1. You can use the v2 action and put the output into the Body of the email
      I always use Compose when putting things together (or variables)

      0
      0

  6. An email actionable message is then sent to the appropriate person to take action Until that step, all good, no problem.

    Then the person receiving the email can click on the actionable message to take action. The message contains an ‘approve’ button that should trigger a Flow HTTP Request That’s where the problem is… It never triggers the Flow and the error message shows “Target URL … is not allowed” All Flows have been shared with all parties. Both actions have been registered on the “Actionable Email Developer Dashboard”
    n the JSON object the token has been placed as the value for the ‘Originator’ key also
    The object that should trigger the second Flow HTTP Request is as the snippet above, with a ‘headers’ key and ‘Authorization’, ‘value’ set to an empty string.

    So, what did I do wrong? What should I do to have the second Flow working?

    1
    0
    Reply

  7. Hi, thank you for your helpful article! I have 2 questions that I hope to get an answer for

    1) For the ‘Required output’ section, if the user’s comments is blank, the card will update to prompt the user to input comments and then terminate. So the updated card will trigger this flow once more after the user responds for the 2nd time is that correct?

    2) Is there a way to refresh the card to ‘Time out’ after afew hours? Meaning that the card will be invalid after 2 hours and refresh to show that it is expired.
    Currently I’m using ‘Send a card to microsoft Teams user and wait for a response’ and I am able to set a time out there.

    Thanks! Great work for this article! Really appreciate it (:

    0
    0
    Reply

    1. 1. Yes, the flow still keep triggering until the user has given correct feedback
      2. I think that’s possible. Never tried it myself though. You should build in a delay on your first flow, waiting for 2 hours. After the delay, send the HTTP request you configured in your actionable message directly from your flow. I think this will update the card, but as said I haven’t tried this myself so I’m not 100% sure

      0
      0

  8. Thanks for your series of blog posts. I was stuck for getting error in Updated json file can you please provide json file its very helpfull to me

    0
    0
    Reply

    2. Actionable Email Developer Dashboard in Test Users (Test your provider on users from same tenant, auto-approved)
      in Test user email addresses we gave 3 user in HTTP tiger i am hit button in email body getting error not allowed. one user (https://prod-02.westus.logic.azure….)

      is not allowed. error in https respones

      0
      0

  9. HI Rik,

    Thank you very much for the article. It is really useful. I have a query, does the registration mandatory? If we use flow to send to different email address based on the condition can we register multiple emails?

    0
    0
    Reply

    1. If you want the actionable message to be updated, you must register. I don’t know for sure because I haven’t used multiple email addresses, but I guess it is possible because your can register on multiple email addresses

      0
      0

  10. Hi Rik De Koning,
    I tried to use the Action.Htttp type in adaptive cards designer, but getting the error as “[Error] Unknown action type: Action.Http. Fallback will be used if present.”.
    As mentioned over the link below https://adaptivecardsci.z5.web.core.windows.net/pr/3261/explorer/Action.OpenUrl.html the supported types are Action.OpeUrl, Action.Submit, Action.ShowCard and Action.ToggleVisibility. Please guide me how we can use the Action.Http. I am trying to use in Team Flow, to update the card after HTTP response.

    0
    0
    Reply

  11. Thanks for your series of blog posts. I was stuck for a long time with the formatting of the body attribute of the Action.Http action and your guide helped me get past it.

    There’s really very little documentation about that online so well done for figuring it out, and thanks for sharing!

    0
    0
    Reply

  12. I was able to successfully get my card to refresh after the user approves the message (very useful stuff). It would be really useful if that card would also update accordingly in any other inbox it might be residing. For example, if you have two time approvers and you want the card to go to both, but either can approve or deny the request. The card should change in both locations as soon as one decision is made.

    It’s clearly something that is possible as I noticed the built-in Flow approvals work that way. It looks like the AutoInvokeAction would be the way to accomplish this, but I’m struggling to get it to call back to my Flow webhook. Here is the link to the documentation about that property: https://docs.microsoft.com/en-us/outlook/actionable-messages/auto-invoke#example-approval-scenario.

    Rik, have you had any experience getting that property to work? I see very little documentation or forum posts about this, so I’m kind of stuck at this point.

    0
    0
    Reply

    1. Unfortunately, I have not tried the method you described so I cannot help you at this point with this. Maybe I can find some time in the near future to play around with the AutoInvokeAction. I will let you know then!

      0
      0

  13. How the hell do I add the originator in the code, why don’t you explain it more specifically? !!!!!!!!!!!!!!!!

    0
    1
    Reply

    1. Thank you for your constructive feedback and your friendly voice.
      For the originator parameter, you use the provider id that was generated from the new provider you added in the Actionable Email Developer Dashboard. Hope this is specific enough for you

      2
      0

    2. hahaha, excellent response.

      Rik, I still have an issue with this and what the purpose is.

      I assume this step is specifically meant for the response back that would go in the JSON for the HTTP request received right?

      Outside of this issue, I have a major issue that I am REALLY struggling to figure out. I have the following scenario and I am hoping you can help:
      -My actionable card shows perfect when sent to me(from me). When sent to anyone else, it shows simply the html. Is this due to the registration as well?

      0
      0

    3. You can ignore my previous comment. I figured it out.

      I had to add the node into the ORIGINAL JSON.
      It looks similar to this:

      {
      “type”: “AdaptiveCard”,
      “originator”: “<replace with ProviderID.",
      "version": "1.0",
      "body": [
      {

      0
      0

  14. Hi, I am able to trigger second flow from my actionable message. But not able to get back response on my actionable message. Can you share your compose updated JSON. So i can check.

    0
    0
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About365

Everything about Power Platforme, Office 365, SharePoint and more!

Social

You can find me on social media as well!

If you like my content, please feel free to donate an amount of your choice to keep my site and tenant up-and-running!

© 2023 About365, All Rights Reserved.