cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
JimmyWork
Power Participant
Power Participant

Adaptive card not displaying action button Show Card

For some reason when my flow sends a Adaptive card with only one action show card button it will not display the ShowCard button.

If i add another ShowCard then no problem they are displayed.

 

In the adaptive designer it looks correct.

Adaptive card in designerAdaptive card in designerAdaptive card when sentAdaptive card when sentAdaptive card with 2 ShowCard buttons, sent and workingAdaptive card with 2 ShowCard buttons, sent and working

12 REPLIES 12
DeepakS
Super User
Super User

Hi @JimmyWork 

 

Could you please share a screen capture of your flow.this seems like issue in JSON some where.

 

-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

JimmyWork
Power Participant
Power Participant

@DeepakS 

This is the json, again it works if i add another ShowCard or in the adaptive card designer.

But as soon as i send it using email in flow i get the result i posted.

 

 

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "You have been assigned to ticket: T238989392",
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Matt Hidinger",
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Assigned {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "The ticket have been placed in your \"My Assigned\"",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Title",
                    "value": "title value"
                },
                {
                    "title": "Priority",
                    "value": "priority value"
                },
                {
                    "title": "Case category",
                    "value": "category value"
                },
                {
                    "title": "Case type",
                    "value": "Case value"
                },
                {
                    "title": "Due date:",
                    "value": "Due date value"
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Show description",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "TextBlock",
                                "text": "Hello World",
                                "wrap": true
                            }
                        ],
                        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                    }
                }
            ]
        }
    ]
}

 

JimmyWork
Power Participant
Power Participant

Now you can replicate the issue by using what Microsoft suggest.
https://adaptivecards.io/explorer/Action.ShowCard.html

 

The ShowCard button will not be displayed, if you do not add another after it, in the designer it will show but not when you send the card

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "This card's action will show another card"
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Action.ShowCard",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"text": "What do you think?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Neat!"
					}
				]
			}
		}
	]
}

 

 

Hi @JimmyWork 

You need to use following structure in html field when sending adaptive card using send email action:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">{
"type": "AdaptiveCard",
"version": "1.2",
"hideOriginalBody": true,
<body tag of adaptive card from adaptive designer>
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

 

Card.png

Here is full html with card:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">{
"type": "AdaptiveCard",
"version": "1.2",
"hideOriginalBody": false,
"body": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "Small",
"style": "Person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

 

-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Hi @JimmyWork,

 

I tested the method provided by @DeepakS , it works and I think he is correct.

If your problem has been solved, You could go ahead and mark the post as solved by clicking “Accept as Solution” so that this thread will be marked for other users to easily identify!

Best Regards,
Community Support Team _ Lin Tu

@DeepakS Thank you for answering

But where do you input the "originator" part?

What i do is i use compose for the adapative card and from Microsoft site i can't find the information you are posting so i can't really understand why.

 

And your test crad contains 2x ShowCards, this works as i stated before but not if you use 1.

2020-03-18 09_31_00-Edit your flow _ Power Automate.png2020-03-18 09_33_10-Mail - EPN SYSTEMS - Outlook.png

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">{
"type": "AdaptiveCard",
"version": "1.2",
"hideOriginalBody": false,
	"body": [
		{
			"type": "TextBlock",
			"text": "This card's action will show another card"
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Action.ShowCard",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"text": "What do you think?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Neat!"
					}
				]
			}
		}
	]
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

 

The result will be not showing the ShowCard Action. But if you use 2x ShowCard then yes it will show.

@v-litu-msft I still has the same issue if you only use 1x ShowCard it will not display it.

@DeepakS Would u mind testing with only one showcard, as i do not have any issues with 2. Just want to confirm that the bug is there.

Hi @JimmyWork 

 

Here is a sample with one action card:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">{
"type": "AdaptiveCard",
"version": "1.2",
"hideOriginalBody": false,
"body":[
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "Small",
"style": "Person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

 

Try this out.

-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

JimmyWork
Power Participant
Power Participant

@DeepakS 

Thank you but im not sure you are understanding the issue.

 

ShowCard with Textbox inside, will not be displayed. The card you provided is a submit action.
Could you please try this.

This is copied from Microsoft and the result is no showcard button, it will display the textbox thats inside the showcard but not the button itself.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">{
"type": "AdaptiveCard",
"version": "1.2",
"hideOriginalBody": false,
	"body": [
		{
			"type": "TextBlock",
			"text": "This card's action will show another card"
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Action.ShowCard",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"text": "What do you think?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Neat!"
					}
				]
			}
		}
	]
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

Use Action.ToggleVisibility to imitate the same behavior

@suvidha2802 It is a bug so i hope they will fix it, thanks anyway

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Users online (2,043)