Power Automate Adaptive card does not display in my email - json

Hi I have been working with power automate to create an approval flow that is triggered by a power apps app. The email contains the json for an adaptive card used for storing responses. When I receive the email I cannot see the adaptive card. I have created a profile on the action card dashboard and it has been more than 12 hours since I was approved. I have no idea what is going on.
The below is the JSON for my Adaptive card.
{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4", "body": [
{
"type": "TextBlock",
"text": ⁠ Compose_Inputs × ⁠,
"wrap": true,
"id": "lblID"
},
{
"type": "TextBlock",
"text": ⁠ Condition3_Value × ⁠,
"wrap": true,
"id": "lblGid"
},
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Approve",
"value": "1"
},
{
"title": "Reject",
"value": "2"
}
],
"placeholder": "Choose whether to accept or reject the declaration",
"id": "cmbApproval"
},
{
"type": "RichTextBlock",
"inlines": [
{
"type": "TextRun",
"text": "Enter the reason for a rejection here"
}
],
"id": "redtRejection"
},
{
"type": "RichTextBlock",
"inlines": [
{
"type": "TextRun",
"text": "Reccomend some actions that need to be taken"
}
],
"id": "redtActionable"
} ], "actions": [
{
"type": "Action.Http",
"title": "Submit",
"id": "btnSubmit",
"method": "POST",
"body": "{\n\"Approval\" : \"{{cmbApproval.value}}\",\n\"Actions\": \"{{redtActionable.text}}\",\n\"Rejection\": \"{{redtRejection.text}}\",\n\"Approval_ID\":\"{{lblID.text}}\",\n\"Gift_ID\":\"{{lblGid.text}}\"\n}",
"url": "https://prod-78.westeurope.logic.azure.com:443/workflows/2ecc98c6673e4d88b2569fb6be6eae33/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=to-6fjShHwNxMqXywd-HNg5Wl-z95eiorM0w1ZyiZTs",
"headers": [
{
"name": "Authorization",
"value": ""
},
{
"name": "Content-type",
"value": "application/json"
}
],
"originator": "1e643d3f-b41b-4723-b72d-23a5e813a5ba"
} ], "id": "btnSubmit" }

Related

whatsapp cloud api template object issue to send from postman

I'm trying to send the whatsapp cloud template from postman.
I created a template in whatsapp cloud with header media image,
body content,footer and two buttons.
the response of the templates when i use get api is as below
{
"name": "trns_btn_img_header_XXX",
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": [
"https://img.url.com"
]
}
},
{
"type": "BODY",
"text": "Body message"
},
{
"type": "FOOTER",
"text": "ftr optioal"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "QUICK_REPLY",
"text": "qrbtnone"
},
{
"type": "QUICK_REPLY",
"text": "qrbtntwo"
}
]
}
],
"language": "en_US",
"status": "APPROVED",
"category": "TRANSACTIONAL",
"id": "17XX209448XXXXXX"
}
I tried the template json object in postman is as below
{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "{{message_to}}",
"type": "template",
"template": {
"name": "trns_btn_img_header_XXX",
"language": {
"code": "en_US"
},
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "https://img.jpg.com"
}
}
]
},
{
"type": "body",
"parameters": [
{
"type": "text",
"text": "Body message from pm"
},
]
},
{
"type": "footer",
"parameters": [
{
"type": "text",
"text": "footer message from pm"
},
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": "0",
"parameters": [
{
"type": "text",
"text": "btnone"
}
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": "1",
"parameters": [
{
"type": "text",
"text": "btntwo"
}
]
}
]
}
}
the response error is "error": {
"message": "(#132000) Number of parameters does not match the expected number of params"
Make sure and correct the below things in send message endpoint request,
Don't need to pass body component if there are no parameters in the body text, if there are parameters then you need to pass only that parameters text in the separate object of parameters in index order
Don't need to pass the footer component because it is static when you create a template
the quick_reply button type, use type as "payload" instead of "text" in parameters
{
"type": "button",
"sub_type": "quick_reply",
"index": "1",
"parameters": [
{
"type": "payload",
"payload": "btntwo"
}
]
}
Below object worked for me
{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "{{message_to}}",
"type": "template",
"template": {
"name": "trns_btn_img_header_XXX",
"language": {
"code": "en_US"
},
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "https://www.w3schools.com/html/pic_trulli.jpg"
}
}
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": "0",
"parameters": [
{
"type": "payload",
"payload": "btntwo"
}
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": "1",
"parameters": [
{
"type": "payload",
"payload": "btnto"
}
]
}
]
}
}

Adaptive Cards ColumnSets with 2 Input.Text can't set the input to the "id"

I've been working on a chatbot and i'm using the Microsoft Adaptive Cards for my bot ui.
Currently i am im trying to create a a row that contains 2 textblocks and 2 input.text.
But when entering a value into these input.text they don't seem to set the value to the given id.
This does work however when the input.text are not in a coulmn set but instead are stacked on top of each other.I think its the Azure BotService not handling the JSON right.
I've tried using diffrent channels. Web-Chat, Teams-Chat. It does work on the adaptive card designer but not with any other service. Anyone else got this problem?
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputOne",
"placeholder": "Placeholder text"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputTwo",
"placeholder": "Placeholder text"
}
]
}
]
}
]
}
I tried to reproduce the issue and the pattern which was mentioned in the code block is having some blockage due to some input fields calling structure problem. Try to check the below code block for sample and replace with the current requirements.
Data JSON:
{
"title": "Tell us about yourself",
"body": "We just need a few more details to get you booked for the trip of a lifetime!",
"disclaimer": "Don't worry, we'll never share or sell your information.",
"properties": [
{
"id": "myName",
"label": "Your name (Last, First)",
"validation": "^[A-Z][a-z]+, [A-Z][a-z]+$",
"error": "Please enter your name in the specified format"
},
{
"id": "myEmail",
"label": "Your email",
"validation": "^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
"error": "Please enter a valid email address"
},
{
"id": "myTel",
"label": "Phone Number (xxx-xxx-xxxx)",
"validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
"error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers"
}
],
"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
"thumbnailAlt": "Diver in the Great Barrier Reef"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${title}",
"weight": "bolder",
"size": "medium",
"style": "heading"
},
{
"type": "TextBlock",
"text": "${body}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${disclaimer}",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "Container",
"$data": "${properties}",
"items": [
{
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"regex": "${validation}",
"errorMessage": "${error}",
"isRequired": true
}
]
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${thumbnailUrl}",
"altText": "${thumbnailAlt}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
The result adaptive card looks like below screen as the sample.

Set Adaptive Card to Currency With Parameter From Apply to Each?

In the image above it changes the adaptive card to Currency. How can I add this with a parameter from somewhere else? I am trying to do this but it is not working.
"value": "${formatNumber(#{items('Apply_to_each')?['Cost Each']}, 2)}"
How can I get this code to show as currency? It seems to be that when I use "#{items" it will not work. Any suggestions?
Here is the adaptive card. I am looping through Excel data and want to put the Parameters I received from Excel into an Adaptive Card and use the $$ Format.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**PART APPROVAL**"
}
],
"width": "stretch"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "New Part Approval",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Part #:",
"value": "**#{items('Apply_to_each')?['Part Number']}**"
},
{
"title": "Description:",
"value": "#{items('Apply_to_each')?['Description']}"
},
{
"title": "Quantity:",
"value": "#{items('Apply_to_each')?['AOQ']}"
},
{
"title": "Cost Each:",
"value": "#{items('Apply_to_each')?['Cost Each']}"
},
{
"title": "Sell Each:",
"value": "#{items('Apply_to_each')?['Sell Each']}"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
},
"id": "ApproveID"
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQ8dJlUeMVi7ZMEzYVf",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"id": "RejectID"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
sorry for that.
Just asked a colleague and the new Adaptive Expressions, the one you're using there to format currencies are actually not working on Power Automate yet.
Power Automate is not updated to the latest Adaptive Cards version so some of the things you can do with cards are not available in flows yet.
Tim

json file formatting correctly, so LUIS can read the data

My program can read Intents from LUIS correctly and launch other adaptive cards using LUIS Intents, however with this column type, still is not possible. The Intents am trying to launch here are "user" and "myEmail" in "type": input.text. I know somehow the data field in json must be misplaced, or the title, or id. Here´s the file, any help...?
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "lalala.png",
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Einloggen",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"id": "myName",
"title": "user",
"data": "user",
"placeholder": "Benutzername oder email"
},
{
"type": "Input.Text",
"id": "myEmail",
"title": "myEmail",
"data": "myEmail",
"placeholder": "Passwort",
"style": "Email"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
},
{
"type": "Action.Submit",
"title": "Cancel"
}
]
}
I'm not 100% sure your question because nothing in the adaptive card really relates to LUIS. That said, you must specify a unique id for "remember me" toggle - the current null value won't work.
I'd also recommend the adaptivecards.io designer as a place to validate your cards.
adaptivecards.io/designer
Thanks for the suggestions, didn´t read before https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/ were the problem between action submit and data is better specified.
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Einloggen",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"id": "myName",
"title": "user",
"placeholder": "Benutzername oder email"
},
{
"type": "Input.Text",
"id": "myEmail",
"title": "myEmail",
"placeholder": "Passwort"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"myName": true,
"myEmail": true
}
}
] }

Adaptive cards are converted to image in Facebook Messenger

I tried following example card picked up from Microsoft's website adaptivecards.io
var msg = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
speak: "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
            "body": [
{
"type": "Container",
"items": [
{
"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": "Container",
"items": [
{
"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",
"title": "Select due date"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"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"
}
]
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "http://adaptivecards.io"
}
]
}
});
session.send("This is an adaptive card");
session.send(msg);
to see how it appears in Facebook and WebChat.
In WebChat emulator it renderes fine with options to interact with choices.
However, same thing renders as an image in Facebook Messenger, with one separate messsage to view options, which redirects to the website.
Should we assume that adaptive cards will not work on Facebook messenger? Or am I missing something basic here.
Unless Messenger natively supports adaptive cards, the best we can do is render to an image and attempt to map Actions to Messenger buttons. For example, an Action.OpenUrl should render as a button on Messenger. But more advanced scenarios, like input fields, etc, will get dropped as there is no way to express those as Messenger templates today.
This documentation lists the channels and their current support:
https://learn.microsoft.com/en-us/adaptive-cards/get-started/bots#channel-status