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

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!!

Visualize Adaptive Card for Teams user action within a Cloud Flow | Experimental Feature

Microsoft Teams’ connector for Cloud Flows (Power Automate), and if you are looking to use Adaptive Cards for Microsoft Teams from the connector. There are chances that you’ll see some options to post an Adaptive Cards to Teams.

I’m exclusively covering a Teams’ connector’s Action called as Post an Adaptive Card to a Teams user and wait for a response.

But, you also have an improved Adaptive Cards Action in the Microsoft Teams’ connector that let’s you save the progress of the Card in the Flow itself!

Also, I found this effective for only 1 Action from the Microsoft Team’s Adaptive Card related actions. Not others.

Adaptive Card to Teams User – Regular

So, if you see the below –

With the above Adaptive Card, you’ll need to work in https://adaptivecards.io/ and paste the Card payload here and then save it. Also, you can’t visualize it within the Flow step itself.

Turn on Experimental Features for Flow

  1. Look for the Gear icon in Settings and look for All Power Automate Settings


  2. If the Experimental Features show below is turned Off, please turn it on.

Adaptive Card with Experimental Features On

  1. Now, if you select the same Action from the Power Automate step

  2. You’ll see the Step Action having the below details.


  3. Once you click on Create Adaptive Card, you’ll see the Designer itself in the Flow Steps which you can create the Card on the fly within the Flow and save the same as well.


    Hope this helps!!

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

  1. FormatDateTime function in a Flow | Power Automate
  2. Formatting Approvals’ Details in Cloud Flows | Power Automate
  3. Trigger Conditions not working in a Cloud Flow? Here’s Why | Power Automate Quick Tip
  4. Read OptionSet Labels from CDS/Dataverse Triggers or Action Steps in a Flow | Power Automate
  5. Save Adaptive Cards work using VS Code Extension – Adaptive Cards Studio | Quick Tip
  6. Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform
  7. Parallel Branching in Cloud Flows – Isolate Response dependent Step Actions in parallel branches | Quick Tip
  8. Using outputs() function and JSON Parse to read data from missing dynamic value in a Flow | Power Automate
  9. Using triggerBody() / triggerOutput() to read CDS trigger metadata attributes in a Flow | Power Automate
  10. Call HTTP Request from a Canvas Power App using Flow and get back Response | Power Automate

Thank you!!

Using outputs() function and JSON Parse to read data from missing dynamic value in a Flow | 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

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!!