Adaptive Cards

Cards for Power Apps [Preview] | Power Platform

priyeshwagh777 Adaptive Cards, Microsoft PowerApps, Microsoft Teams , , ,

So Cards are finally in Power Apps! As of writing this post, Cards is in Preview in the Power Apps (https://make.powerapps.com/)

Here’s the official page of Adaptive Cards – https://adaptivecards.io/

In case you are new to Adaptive Cards and figuring out how they work with Teams, you can check my post here – Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists

Cards in Power Apps

Here’s how you can start creating Cards in Power Apps –

  1. In the appropriate environment having correct rights, you can see Cards section –

  2. Then, you can click on “+ Create a card” button in the Create section of the menu.

  3. Give the Card a suitable name. In my example, I’m calling it Swag Kit Card. You can name it based on your application/use.

  4. It’ll take a few moments for your card to be created. You’ll see the below dialog while it’s getting created in the backend.

  5. Once the process is completed, you’ll be taken to the Editor itself and this is what it looks like –

  6. And as you can see on the left hand-menu, the controls which you can get are the ones you could see in the Adaptive Cards IO designer.
    In the Data, you’ll see only Dataverse at the time of this being in a Preview release.

  7. In this example, I’ll keep things simple and generate a static card which can be used.

  8. Once I save this card, you can see how the JSON is built out

  9. You can copy the selected part which is expected in the below used Teams action in Power Automate

  10. And as an example, since this Card currently supports for Teams – I can simply copy this from the JSON view and paste it in one of the Actions for Teams i.e. Post adaptive card in a chat or channel.

  11. So, when I Run the Flow, I can get the Adaptive Card show up as a message from Flow Bot.


    And that’s it!!

Accessing Cards in your Environment

All the Saved Cards appear here in the environment –

  1. Navigate the the Cards section in Power Apps and click on Cards.

Microsoft Docs for Cards for Power Apps (preview) – https://learn.microsoft.com/en-us/power-apps/cards/overview?WT.mc_id=DX-MVP-5003911

Hope this was useful! As this continues to evolve in GA, I’ll write more about using Cards in Power Apps.

Here are some Power Automate posts you want to check out –

  1. Select the item based on a key value using Filter Array in Power Automate
  2. Select values from an array using Select action in a Power Automate Flow
  3. Blocking Attachment Extensions in Dynamics 365 CRM
  4. Upgrade Dataverse for Teams Environment to Dataverse Environment
  5. Showing Sandbox or Non Production Apps in Power App mobile app
  6. Create a Power Apps Per User Plan Trial | Dataverse environment
  7. Install On-Premise Gateway from Power Automate or Power Apps | Power Platform
  8. Co-presence in Power Automate | Multiple users working on a Flow
  9. Search Rows (preview) Action in Dataverse connector in a Flow | Power Automate
  10. Suppress Workflow Header Information while sending back HTTP Response in a Flow | Power Automate
  11. Call a Flow from Canvas Power App and get back response | Power Platform\
  12. FetchXML Aggregation in a Flow using CDS (Current Environment) connector | Power Automate
  13. Parsing Outputs of a List Rows action using Parse JSON in a Flow | Common Data Service (CE) connector
  14. Asynchronous HTTP Response from a Flow | Power Automate
  15. Validate JSON Schema for HTTP Request trigger in a Flow and send Response | Power Automate
  16. Converting JSON to XML and XML to JSON in a Flow | Power Automate

Thank you!

Advertisement

Action.ShowCard vs Action.ToggleVisibility in Adaptive Cards | Microsoft Teams

priyeshwagh777 Adaptive Cards , , ,

If you are new to Adaptive Cards, it may come across that Action.ShowCard and Action.ToggleVisibility seems to do the same thing.

But let’s look at the difference between the two!

To

#ActionDescription
1ShowCardShows or Hides a Card Structure enclosed on ShowCard Action
2ToggleVisibilityShows or Hides individual elements based on their IDs

Action.ShowCard

Below is JSON to understand the structure of how ShowCard Action exists and how it will function

  1. ShowCard is a standalone ‘Card’ within an Action Element CardAction.



  2. Now, let’s see how it works. When the Card is not shown, only the button will appear like any other Action button in AdaptiveCards.


    And when you click on it, the Show Card action will reveal the Card that is structured under it.

Action.ToggleVisibility

Similarly, let’s look at how ToggleVisibility will work as opposed to Show Card.

  1. The JSON structure for ToggleVisibility in ActionSet is as follows –
    Notice that the type: Action.ToggleVisibility



  2. Now, the “targetElements” in the above Action takes in array of Element IDs which should be toggled for Visibility.
    Since, I’ve mentioned only 1 element in it whose ID is “createdDate“, below is how the element looks and where you can get the ID from –


  3. Now, when I click on the button, it’ll consider all the element IDs mentioned in the array to toggle between Show / Hide.
    Before I click the button –



    And when I click on the button, the visibility is toggled to show this time –


  4. So as opposed to ShowCard, ToggleVisibility will toggle Show/Hide functionality of selected elements and not a Card structure that resides inside a ShowCard Action.

Placing Action Elements – ShowCard and ToggleVisibility

  1. By default, if you select an Action from the Elements menu on the left hand side, they’ll end up in the shown hierarchy.


    And the JSON for this will appear like this –

    The type of Element which resides in Body of the AdaptiveCard itself


    Zoomed Out, it’ll look like this –


  2. However, if you don’t wish to have it under an Action Set in the Body structure, you can place the type of Action whether it is ToggleVisibility or ShowCard in Actions section of the JSON as well.


    And this will exist in the Actions of the AdaptiveCard JSON and not in the Body as shown above.


Here are some more posts related to Adaptive Cards / Microsoft Teams which you might find useful –

  1. Save Adaptive Cards work using VS Code Extension – Adaptive Cards Studio | Quick Tip
  2. Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform
  3. Visualize Adaptive Card for Teams user action within a Cloud Flow | Experimental Feature
  4. Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists
  5. Admin Center URLs under M365 – Power Platform, Teams, SharePoint, Power BI
  6. Tag a User in a Microsoft Teams post made using Power Automate
  7. Asynchronous HTTP Response from a Flow | Power Automate
  8. Using outputs() function and JSON Parse to read data from missing dynamic value in a Flow | Power Automate

Thank you!!

Using outputs() function and JSON Parse to read data from missing dynamic value in a Flow | Power Automate

priyeshwagh777 Adaptive Cards, Power Automate , , , , ,

I faced this issue lately and not sure if it’s a bug or something I might be missing. But, I couldn’t find anything in Dynamic Content in a Flow and I was not able to pick fields to use further in a Flow.

Not sure how many of you faced this since most fields you need are available in a Flow’s Dynamic Content part.

Scenario – Adaptive Cards for Teams issue

I had this one scenario in particular where the Adaptive Card I created for Microsoft Teams’ User sends back Response but the Dynamic Content doesn’t appear in the steps after the Card Step.

  1. See below that I’ve declared a Variable just to show that the Dynamic Content that should appear after the Adaptive Card.

  2. And if I press the Dynamic Content as shown above in Step #1, and minimize all the content, I don’t see the Teams’ Dynamic Content variables at all

  3. And the Adaptive Card didn’t return the below Outputs



    That’s when we should use outputs() function to read this data.

outputs() function

Here’s how you can use the Parse JSON action and outputs() method to read the Outputs of the step you want and then Parse JSON so that these can be picked as variables/dynamic values in steps following this –

  1. Take Parse JSON action from Data Operations in a Flow

  2. In that in Inputs, you can use Function on the Content field.

  3. And write outputs function as shown below –

    And the complete the function as below

    Explanation:
    MyCard is the name of the step of my AdaptiveCard I used. If the name of you step has spaces like “My User Adaptive Card”, then the function will look like outputs(‘My_User_Adaptive_Card’)[‘body’]

    body is written because if you see in the Outputs originally in the Scenario section above, all results are sent in body field of Outputs.

  4. Now, since you don’t know the Schema, just put a “{}” so that you can Save the step. (This is required)

  5. Run the Flow once and collect the Outputs from this ‘Parse JSON 2’ step as shown above.
    Copy the Outputs

  6. Now, open the same Parse JSON 2 step which you created. And click on Generate from sample

  7. And paste the schema in the box.

  8. Once done, schema will be generated like this.

  9. Now, this Parsed Outputs can be further used which will have the data from the Step which didn’t yield Dynamic Content
    Example, I’ll create a variable to show Dynamic Content that can pop-up

  10. It’ll show all the fields from the Card in the Parse JSON 2 outputs


    And that solves the problem!!

    Original Microsoft Documentation on the same is: https://docs.microsoft.com/en-us/azure/logic-apps/workflow-definition-language-functions-reference#outputs?WT.mc_id=DX-MVP-5003911

Hope this was helpful.

Here are some more Power Automate / Adaptive Card content you might want to look at –

  1. Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform
  2. Make On-Demand Flow to show up in Dynamics 365 | Power Automate
  3. Save Adaptive Cards work using VS Code Extension – Adaptive Cards Studio | Quick Tip
  4. Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists
  5. Task Completion reminder using Flow Bot in Microsoft Teams | Power Automate
  6. Run As context in CDS (Current Environment) Flow Trigger | Power Automate
  7. Using triggerBody() / triggerOutput() to read CDS trigger metadata attributes in a Flow | Power Automate
  8. Run As context in CDS (Current Environment) Flow Trigger | Power Automate
  9. Terminate a Flow with Failed/Cancelled status | Power Automate
  10. Pause a Flow using Delay and Delay Until | Power Automate

Thank you!!

Save Adaptive Cards work using VS Code Extension – Adaptive Cards Studio | Quick Tip

priyeshwagh777 Adaptive Cards , , ,

If you’ve started working on Adaptive Cards recently and always struggle with losing Adaptive Card payload from https://adaptivecards.io/designer/, you should use the Adaptive Cards Studio Extension.

So there’s a Visual Studio Code Extension for the same which will help you preserve and preview the Adaptive Card you are working on.

Problem Statement

While working with Adaptive Cards, we often struggle to make sure the browser tab doesn’t gets closed accidently and you lose your progress on the Adaptive Cards you are working on.


And, if you are struggling to maintain the Card Payload in a temporary file, there’s a smarter way available to do so using VS Code’s Extension – “Adaptive Cards Studio”

VS Code Extension – Adaptive Card Studio

Here’s how you can use the Adaptive Card Studio and how it can be useful.

  1. Open Extensions in Visual Studio Code and search for Adaptive Cards Studio

  2. Once installed, it’ll appear on the left hand side as below –

  3. On the right hand side in VS Code, it’ll search for the Workspace for the Adaptive Cards to detect. Make sure the folder in which your Adaptive Cards is saved is added to the Workspace.
    Else, the Extension won’t detect an Adaptive Card.


    In case you have saved the JSON file elsewhere which is not added to your Workspace, you can use this option to add the Folder to your current Workspace. (Depends on your Project structure)

  4. Once the correct Folder is added to Workspace in VS Code, the Adaptive Card you saved will appear


  5. If you expand the card, you’ll find Template and Data which you can get and paste from the Adaptive Cards online Designer and paste the same in here.

  6. Now, if you look at the main Window, you’ll be able to see the Template and Data JSON on the left and the Card on the right

Here’s the link to the GitHub for complete Info on the Adaptive Cards Studio: https://marketplace.visualstudio.com/items?itemName=madewithcardsio.adaptivecardsstudiobeta

And then further, copy the Payload onto your application where this will eventually be deployed.

Hope this was useful!

Here are some more posts that relate to Adaptive Cards usage / Power Platform –

  1. Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform
  2. Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists
  3. Task Completion reminder using Flow Bot in Microsoft Teams | Power Automate
  4. Accept HTTP Requests in a Flow and send Response back | Power Automate
  5. Run As context in CDS (Current Environment) Flow Trigger | Power Automate
  6. Using triggerBody() / triggerOutput() to read CDS trigger metadata attributes in a Flow | Power Automate

Thank you!!

Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform

priyeshwagh777 CRM with .NET Web Applications, Power Automate , , ,

Let’s take a look at how you can design Adaptive Cards for Outlook and get response from Outlook users to process using Power Automate.

Scenario

Let’s say I wanted to send an Adaptive Card to an Outlook user on their Email and ask some comment, example – A descriptive feedback and read their response back and send them a confirmation Adaptive Card.

In this post, I’ll simply read the Response in the Flow and send a Confirmation-like Adaptive Card so that you can then further decide to take required action for it based on your use case.

Adaptive Cards Designer – Initial Card Layout

You can logon to https://adaptivecards.io/designer/ i.e. the Adaptive Card designer and start building your card. Below are the high-level steps:

  1. Once you are in the Adaptive Cards Designer, make sure you select the host app as “Outlook Actionable Messages“

    You’ll see a sample already created for you which you can start working off of –

  2. Since I want to start from the beginning, I’ll select New Card option as shown below

  3. Now, I’ll start to design my card with the use of some TextBlock, an Input.Text to capture a response. In your case, you can choose the type of input(s) you want. (I’m trying to keep it simple for now 😊)
    These controls works like a drag-and-drop behavior, just drop whatever you need.


    So, I did the following, I added a TextBlock to add the title I want to show on the card and a Multi-line Input.Text to capture a response of the user I’ll send the card to in their Email.

  4. For the Input.Text, I’ve added an id ‘answer‘. We’ll need this when we capture responses back.
    Also, to make the Input.Text control as multi-line, Multi-Line option should be selected as I did below

  5. At this point, our Adaptive Card’s layout is ready. Before we proceed we must first, create a Flow that will capture an HTTP Response and then we’ll come back here.

Flow to Capture Response

Adaptive Cards for Outlook Actionable Messages work off of the HTTP mechanism and that’s why you need a URL where you can capture the responses and send back a confirmation response back.

Let’s call this Flow as “Accept Feedback Response“

  1. To do so, first create a Flow that Accepts an HTTP Request. You can refer my other post in order to understand how you can capture HTTP Responses – Accept HTTP Requests in a Flow and send Response back | Power Automate
    Once once you save a Flow that has a trigger of HTTP Response, you’ll get a URL generated, copy it.

  2. Next, I’ll enter the schema by clicking on Use sample payload to generate schema button on the first step above and enter the following schema since I know that’s what is to be expected from the User when they fill in the Text and submit back.

  3. Once you click OK, your schema will look like this.

  4. Collect the result of the above trigger in the Compose so that you can save the Flow with at least 1 Action. (We’ll come back to it later)

  5. Next up, we will also need to setup a response Adaptive Card. This is something that the users will see when they Submit their responses.

  6. It is mandatory to send the response back to the caller i.e. the Outlook in this case. Hence, we’ll send a Response back using Response action in HTTP and send the status code as 200 and header CARD-UPDATE-IN-BODY as true.
    The Body will have the Adaptive Card which we created in step #5 above i.e. the Adaptive Card we have to send as confirmation.

    Here are the details of Refreshing Cards when you send back a response to the client (Outlook user in this case): https://docs.microsoft.com/en-us/outlook/actionable-messages/adaptive-card#refresh-cards?WT.mc_id=DX-MVP-5003911

Complete your Adaptive Card – Add Action

Once your Flow to capture the response is ready, let’s complete the Adaptive Card to add an Action to the same.

  1. Select the card body, you’ll see a button to Add an action

    You’ll need to select Action.Http

  2. Once you select the Action.Http type of Action, look at the Element Properties, you’ll need to enter the URL we got from the Flow we created to capture responses above.

    Here why we chose Action.Http – https://docs.microsoft.com/en-us/outlook/actionable-messages/adaptive-card#outlook-specific-adaptive-card-properties-and-features?WT.mc_id=DX-MVP-5003911
  3. Next, set the title of the Action (it appears as a button). I’ll name it Submit.
    Also, select what kind of Method is to be used for the HTTP Request.

  4. Now, since you’ve selected POST method, you will need to pass the Body. This will be the response which the user will send and which the Flow above will read it as a Response to process the information further.
    Once you select POST, a Body element property will be added where you need to enter the schema and what ID of the element that information belongs to

  5. Remember, the ID for the Input.Text was set as “answer”, we’ll put that here and then it’s Value property. These values should be enclosed in double curly brackets {{ }}.


  6. And also, you’ll need to pass along the Header for Authorization. Read this post by Microsoft – https://docs.microsoft.com/en-us/outlook/actionable-messages/security-requirements#action-authorization-header?WT.mc_id=DX-MVP-5003911
    Add Header as shown below

    Now, as mentioned in the above post, we need to pass the property as Authorization header and leave it blank and Content-Type as application/json

  7. Once all this is done, it’ll look like below in the card payload for the Action.Http part.

  8. Now copy the entire Payload from the Editor and we’ll create a new Flow that will be used to send the Adaptive Card to the user.

Flow to Send the Adaptive Card in Email

I’m creating a Flow here which will be used to send the Adaptive Card. To keep it simple, I’m just triggering it using a button on-demand. Your use-case will vary.

Let’s call this Flow as “Send Feedback Request“

  1. Wherever you need to create the Adaptive Card, you’ll need to paste the entire Payload copied from the step above in a Compose step

  2. I’ll add a step to send an Email directly using Send Email and make sure you enable the </> part for the body.


    Make sure the Outputs of the Compose we pasted above in Step #2 are enclosed in
    <script type="application/adaptivecard+json">
    </script>

Working

Let’s look at how this will turn out!!

  1. Let me just Run the Flow as is so that the Adaptive Card is generated and sent to the user I intend to in the Email.
  2. They’ll receive an email like this

  3. And the user will submit the answer in the text box and submit.

  4. Once they submit, the Accept Feedback Response Flow we created will be triggered

  5. And the response is available to be read and processed further in the Compose step we created to collect it with the defined schema.


  6. The Adaptive Card we had created to send back as confirmation (which looks as below) will be sent

  7. Once the user submits, they’ll get the below Adaptive Card as a confirmation that their feedback has been taken.

And that’s how you can make your Adaptive Cards to function with Outlook!! Hope this was helpful.

Here are some superb posts on Adaptive Cards –

  1. Microsoft Message Cards – The Ultimate Guide by Thomas Poszytek – https://poszytek.eu/en/microsoft-en/microsoft-message-cards-the-ultimate-guide/
  2. Multi line Approvals with Adaptive Cards, Outlook and Power Automate by Yash Agarwal – https://www.bythedevs.com/post/multi-line-approvals-with-adaptive-cards-outlook-and-power-automate
  3. Custom Actionable Messages with Microsoft Flow series by Rik-de Koning (3 posts) – https://www.about365.nl/category/blog-series/custom-actionable-messages-with-microsoft-flow/

Here are some more Power Automate / Adaptive Cards posts you might want to look at –

  1. Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists
  2. Task Completion reminder using Flow Bot in Microsoft Teams | Power Automate
  3. Make On-Demand Flow to show up in Dynamics 365 | Power Automate
  4. Run As context in CDS (Current Environment) Flow Trigger | Power Automate
  5. Using triggerBody() / triggerOutput() to read CDS trigger metadata attributes in a Flow | Power Automate
  6. Terminate a Flow with Failed/Cancelled status | Power Automate
  7. Call HTTP Request from a Canvas Power App using Flow and get back Response | Power Automate
  8. Setting Retry Policy for an HTTP request in a Flow | Power Automate
  9. Send a Power App Push Notification using Flow to open a record in Canvas App | Power Automate
  10. ChildFlowUnsupportedForInvokerConnections error while using Child Flows [SOLVED] | Power Automate
  11. BPF Flow Step as a Trigger in CDS (Current Environment) connector | Power Automate
  12. Pause a Flow using Delay and Delay Until | Power Automate

Thank you!! 😊

Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists

priyeshwagh777 Power Automate , , ,

Adaptive Cards is something so cool and works like magic!! I’m sure there are so many creative ways to use it.

Here’s an example – Use Adaptive Cards to gather data from Microsoft Teams Users and populate it automatically to SharePoint List.

Scenario

Let’s say, you have a set of data to collect from your employees – for instance, planning a trip (or any other event for that matter) where you have to take data from employees in order to better plan the logistics.

So, in my example, I want to plan an event for which I need to ask each employee their T-Shirt size, food preference and any allergies to be taken care of.

It’s better to let the users answer at their own accord. You simply need to create a SharePoint list and list out all the Employees whom the short questionnaire should be sent to.

Adaptive Cards (https://adaptivecards.io/)

As their website says, Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services and open exchange.

It’s a superb way to make these cards pop-up in Teams, Outlook, Bot Framework etc.

In this post, we’ll ask Microsoft Teams users to submit some info which will be automatically populated to the SharePoint List.

In https://adaptivecards.io/designer/, you can design your own Adaptive Card by looking at the samples already provided on the website.

SharePoint List

Let’s say, you’ve prepared a SharePoint List called ‘Employee Preferences‘ which looks like the below. And you need to get info from them on their Allergies, Food Preference and T-Shirt size in order to prepare for the event

Power Automate

Next step, is to create a Flow in PowerAutomate to send out these Adaptive Cards to the Teams member in their Chat so that they can send back their preferences which is automatically updated in the SharePoint List.
Let’s begin –
(Before we begin, it’s up to you to decide when should the Power Automate trigger, whether on create of Each Item, or all at once when the SP List is ready. I just chose the later. So, see what’s most suitable to you.)

  1. Let’s say my first step is to get all the items from the SharePoint List I created, called ‘Employee Preferences‘


    And then, set the below preferences –


  2. Next, I’ll loop through each of the SP items and initiate an Teams action to send Adaptive Card and wait for the response.

  3. Now, in Adaptive Card you’ve selected for the user of the Team, I’ve used the Email field from the SP list so that I can use it in the recipient field to send the Adaptive Card to that Teams user.

    And paste the content from Adaptive Card editor in Message field.


  4. You can use dynamic data at the right places to populate you Adaptive Card wherever needed.


  5. Finally, you can have an Update message filled in. This is shown once the User Submits back the Adaptive Card with data.
    Should update card should be selected to Yes so that it doesn’t stay like that and the user knows that the response has been captured.


  6. Then, you need to update the captured response back to the SP List.



  7. At this point, your Adaptive Card is ready! Let’s test.

Adaptive Card in Microsoft Teams

Once this is run, the Teams user gets the below in the chat.

  1. User receives and Adaptive Card in their Teams Chat.

    Let’s zoom a little and see how it looks. Notice that we had populated the name dynamically in the Adaptive Card body.

  2. Now, click on Fill Out information and the card will expand to expose the form

  3. Now, I’ll fill the information as below and Submit the same

  4. Once I click Submit, I’ll see the below message. Remember, this populated from Update message field in the Adaptive card options.

  5. And when you check back the SharePoint List, the data has been updated in the same.

    And that’s it!!
    Hope this helped!

Here are some Power Automate / Flow posts you might want to look at –

  1. ChildFlowUnsupportedForInvokerConnections error while using Child Flows [SOLVED] | Power Automate
  2. BPF Flow Step as a Trigger in CDS (Current Environment) connector | Power Automate
  3. http://flowPause a Flow using Delay and Delay Until | Power Automate
  4. Generate Dynamics 365 record link in a Flow using CDS connector | Power Automate
  5. Text Functions in a Flow | Power Automate
  6. Loop through array of objects in a Flow & Create records in CDS | Power Automate
  7. Get Count of records retrieved in CDS connector in a Flow | Power Automate
  8. Number Formatting in a Flow | Power Automate
  9. Call a Dynamics 365 Action from Flow [Bound and Unbound Actions] | Power Automate
  10. Setting Retry Policy for an HTTP request in a Flow | Power Automate
  11. Switch-Case in a Flow | Power Automate
  12. Make HTTP request from Flow in Power Automate

Thank you for your time!