Microsoft Teams Webhook Generating 400 for Adaptive Card - json

I have a functioning webhook to a Teams channel to which I can successfully post messages. I am now trying to post an adaptive card to the webhook. Using Postman and performing a Post to https://outlook.office.com/webhook/xyz, with Content-Type set to application/json in the header and the following adaptive card set in the body.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "Nothing to say.",
"body": [
{
"type": "TextBlock",
"text": "Hello Teams' user"
}
]
}
With this I receive a HTTP 400 Bad Request and Summary or Text is required message. Does anyone know if Teams webhooks support Adaptive Cards yet or if this is an unsupported task currently?

The answer below is now deprecated. Please refer to this answer and this answer.
Webhooks do not yet support Adaptive Cards! We plan to add support for Adaptive Cards shortly after we release them for bots.

I'm using axios to send an Adaptive Card to a Teams Connector and I was getting this same error. In my case, I was able to resolve the issue by wrapping the card as an "attachment" to the message protocol shown in this link (syntax copied here for reference).
https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using?tabs=cURL#send-adaptive-cards-using-an-incoming-webhook
{
"type":"message",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.adaptive",
"contentUrl":null,
"content":{
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
"type":"AdaptiveCard",
"version":"1.4",
"body":[
{
"type": "TextBlock",
"text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)"
}
]
}
}
]
}
By sending the above JSON as the request body (data argument for axios), I successfully got the Adaptive Card to show up in my Teams Channel.
As you can see, the value of "content" is the Adaptive Card structure. The Adaptive Card follows the documented syntax, found here:
https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/getting-started
https://learn.microsoft.com/en-us/answers/questions/400502/adaptive-cards-with-incoming-webhooks-in-microsoft.html
But ultimately, I found it easier to work with this "Designer" https://www.adaptivecards.io/designer/
which provides a WYSIWYG interface.
I am sending the request to a Connector that I created in Teams by following the instructions found here:
https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#create-incoming-webhook-1
And now it responds with 200 OK and shows up in the Channel!

For simple use cases POST this to the webhook url:
{
"title": "Action News",
"text": "not **much** happend (markdown)"
}
For advanced use cases try using MessageCard: https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using
Example:
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"themeColor": "0076D7",
"summary": "Larry Bryant created a new task",
"sections": [{
"activityTitle": "![TestImage](https://47a92947.ngrok.io/Content/Images/default.png)Larry Bryant created a new task",
"activitySubtitle": "On Project Tango",
"activityImage": "https://teamsnodesample.azurewebsites.net/static/img/image5.png",
"facts": [{
"name": "Assigned to",
"value": "Unassigned"
}, {
"name": "Due date",
"value": "Mon May 01 2017 17:07:18 GMT-0700 (Pacific Daylight Time)"
}, {
"name": "Status",
"value": "Not started"
}],
"markdown": true
}],
"potentialAction": [{
"#type": "ActionCard",
"name": "Add a comment",
"inputs": [{
"#type": "TextInput",
"id": "comment",
"isMultiline": false,
"title": "Add a comment here for this task"
}],
"actions": [{
"#type": "HttpPOST",
"name": "Add comment",
"target": "http://..."
}]
}, {
"#type": "ActionCard",
"name": "Set due date",
"inputs": [{
"#type": "DateInput",
"id": "dueDate",
"title": "Enter a due date for this task"
}],
"actions": [{
"#type": "HttpPOST",
"name": "Save",
"target": "http://..."
}]
}, {
"#type": "ActionCard",
"name": "Change status",
"inputs": [{
"#type": "MultichoiceInput",
"id": "list",
"title": "Select a status",
"isMultiSelect": "false",
"choices": [{
"display": "In Progress",
"value": "1"
}, {
"display": "Active",
"value": "2"
}, {
"display": "Closed",
"value": "3"
}]
}],
"actions": [{
"#type": "HttpPOST",
"name": "Save",
"target": "http://..."
}]
}]
}

You can actually send your adaptive card body inside the body array of this structure:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"contentUrl": null,
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
]
}
}
]
}
Reference: Microsoft

Recently I was facing the same issue and was looking for a solution. The good part is MS Teams support adaptive cards now
youtube video to explain how it can be implemented
Github link to track the progress on the issue
I managed to send messages to the Teams channel without any failure.

Related

Why is 'Error: Invalid JSON: unexpected token' coming up? (brand new to this!)

enter image description hereThis is the first time i've tried to add code into my website so I'm very new to the whole thing... What I'm trying to do is add the 'how did you hear about us' question to the checkout process on my website.
Specifically, I'm having trouble trying to add a theme setting to my website using coding instructions from 'shopify developers'. In the configuration directory of 'Themes', after clicking on settings_schema.json , I follow instructions to add some code after the first curly bracket }, but when I do so and try hit save, the error message 'Invalid JSON: unexpected token' comes up. If anyone can help me that would be hugely appreciated! I'm pasting below the existing code, and below that the snippet of code I'm trying to insert. Just FYI I am using safari.
Does anyone have any idea?
Best,
Cosmo
exisiting code
[
{
"name": "theme_info",
"theme_name": "Themekit template theme",
"theme_version": "1.0.0",
"theme_author": "Shopify",
"theme_documentation_url": "https:\/\/github.com\/Shopify\/themekit",
"theme_support_url": "https:\/\/github.com\/Shopify\/themekit\/issues"
}
]
new code I'm trying to insert
{
"name": "Hear About Us",
"settings": [
{
"type": "text",
"id": "hau_form_options",
"label": "Form options",
"default": "Facebook, Twitter, Google, Instagram, Youtube",
"info": "Separate each option with a comma"
},
{
"type": "header",
"content": "Form validation"
},
{
"type": "checkbox",
"id": "hau_form_validation",
"label": "Enable form validation",
"default": true
},
{
"type": "text",
"id": "hau_error_message",
"label": "Error message",
"info": "The error message that is displayed when no selection is made",
"default": "Please select an option below"
},
{
"type": "text",
"id": "hau_error_message_other",
"label": "Other field error message",
"info": "The error message that is displayed when there is no input in the 'Other' field",
"default": "Please fill the text field below"
},
{
"type": "header",
"content": "Error styling"
},
{
"type": "color",
"id": "hau_error_color",
"label": "Color",
"default": "#ff0000"
}
]
},
I checked the JSON using JSONLint, and it looks like the trailing comma on the end is messing it up.
EDIT: I see the image now, the comma needs to be added before since you are adding it to an Array.
[{
"name": "theme_info",
"theme_name": "Themekit template theme",
"theme_version": "1.0.0",
"theme_author": "Shopify",
"theme_documentation_url": "https:\/\/github.com\/Shopify\/themekit",
"theme_support_url": "https:\/\/github.com\/Shopify\/themekit\/issues"
},
{
"name": "Hear About Us",
"settings": [{
"type": "text",
"id": "hau_form_options",
"label": "Form options",
"default": "Facebook, Twitter, Google, Instagram, Youtube",
"info": "Separate each option with a comma"
},
{
"type": "header",
"content": "Form validation"
},
{
"type": "checkbox",
"id": "hau_form_validation",
"label": "Enable form validation",
"default": true
},
{
"type": "text",
"id": "hau_error_message",
"label": "Error message",
"info": "The error message that is displayed when no selection is made",
"default": "Please select an option below"
},
{
"type": "text",
"id": "hau_error_message_other",
"label": "Other field error message",
"info": "The error message that is displayed when there is no input in the 'Other' field",
"default": "Please fill the text field below"
},
{
"type": "header",
"content": "Error styling"
},
{
"type": "color",
"id": "hau_error_color",
"label": "Color",
"default": "#ff0000"
}
]
}
]

Bot framework user selected button text is not displaying in bot

I am developing Microsoft teams bot using ms bot framework. In that, i am using adaptive cards for displaying description and two buttons.
when user clicks the button, that time i need pass json data to backend. If I pass string data ("data": "ONE") on button action then I can able to read the arguments in backend and user clicked button text is coming in bot. Kindly see the code and output image below
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Hi, this is your Botzer personal assistant , how can I help you? Click Here ",
"weight": "bolder",
"isSubtle": false,
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "ONE",
"data": "ONE"
},
{
"type": "Action.Submit",
"title": "TWO",
"data": "TWO"
}
]
}
}
But, when I send json data on button action ("data": { "id": "action2", "name": "two", "value": "TWO"}) that time i can read the data in backend. But, button text is not coming on the bot. Kindly see the code and output image below
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Choose the number",
"weight": "bolder",
"isSubtle": false,
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "ONE",
"data": {
"id": "action1",
"name": "one",
"value": "ONE"}
},
{
"type": "Action.Submit",
"title": "TWO",
"data": {
"id": "action2",
"name": "two",
"value": "TWO"}
}
]
}
}
What you want is called a message back, which combines the functionality of string submit actions and object submit actions. Since you don't have any inputs in your Adaptive Card, you can replace it with a hero card and use a messageBack action directly. If you still want to use an Adaptive Card then you're in luck because Teams actually has special functionality that allows you to put a message back in an Adaptive Card. You can see how to do that in the "Adaptive Cards in Teams" section of the blog post Hessel linked to, or you can consult the documentation directly.

How to get a TextBlock Text via Action.Http?

I am trying to get TextBlock Text/Value ("Click Learn More to learn more about Actionable Messages!) in response when clicking Send Feedback.
I tried {{Heading.text}} and {{Heading.value}} with Heading being id of a field.
Adaptive Card
Getting value from Input.Text via {{feedbackText.value}} works just fine.
Sample:
{
"type": "AdaptiveCard",
"version": "1.0",
"hideOriginalBody": true,
"body": [
{
"type": "TextBlock",
"text": "Visit the Outlook Dev Portal",
"size": "Large"
},
{
"type": "TextBlock",
"text": "Click **Learn More** to learn more about Actionable Messages!",
"id": "Heading"
},
{
"type": "Input.Text",
"id": "feedbackText",
"placeholder": "Let us know what you think about Actionable Messages"
}
],
"actions": [
{
"type": "Action.Http",
"title": "Send Feedback",
"method": "POST",
"url": "https://webhook.site/.....",
"body": "{{feedbackText.value}}\n{{Heading.text}}\n{{Heading.value}}"
},
{
"type": "Action.OpenUrl",
"title": "Learn More",
"url": "https://learn.microsoft.com/outlook/actionable-messages"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"}
Thanks for help.
I had the same issue trying to send the value of the textblock in http body. I used the following workaround:
Created an Input.Number field
Set the Initially Visible property to false
When the Adaptive Card is compose, I used logic app/flow to populate the value of the field
The Action.Http was then set to the id.value value of the input box.

Microsoft outlook 365 actionable message

Hi would like to know why my actionable message will not appear on mobile but on the web it will appear perfectly. Anyone know what is the problem i'm facing?
Below are the script that i'm putting.
<script type="application/ld+json">
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "This is the summary property",
"themeColor": "0075FF",
"sections": [{
"heroImage": {
"image": "http://messagecardplayground.azurewebsites.net/assets/FlowLogo.png"
}
},
{
"startGroup": true,
"title": "**Pending approval**",
"activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
"activityTitle": "Requested by **Miguel Garcia**",
"activitySubtitle": "m.garcia#contoso.com",
"facts": [{
"name": "Date submitted:",
"value": "06/27/2017, 2:44 PM"
},
{
"name": "Details:",
"value": "Please approve the awesome changes I made to this fantastic document."
},
{
"name": "Link:",
"value": "[Link to the awesome document.pptx](http://www.google.com)"
}
]
},
{
"potentialAction": [{
"#type": "ActionCard",
"name": "Approve",
"inputs": [{
"#type": "TextInput",
"id": "comment",
"isMultiline": true,
"title": "Reason (optional)"
}],
"actions": [{
"#type": "HttpPOST",
"name": "Submit",
"target": "http://..."
}]
},
{
"#type": "ActionCard",
"name": "Reject",
"inputs": [{
"#type": "TextInput",
"id": "comment",
"isMultiline": true,
"title": "Reason (optional)"
}],
"actions": [{
"#type": "HttpPOST",
"name": "Submit",
"target": "http://..."
}]
}
]
},
{
"startGroup": true,
"activitySubtitle": "Grant approvals directly from your mobile device with the Microsoft Flow app. [Learn more](http://learnmode)\n\nThis message was created by an automated workflow in Microsoft Flow. Do not reply."
}
]
}
</script>
If i open my Outlook mobile app, There will be no card shown, but only on outlook web. Does actionable message does not support mobile currently?
Regards,
Khairul Ezwan B. Mohd Kaswan

JSON - parse multiple level

I am new to JSON and trying to parse multiple levels, but got stuck. I am using the include file called "json2.asp" (link below), which is based on json2.js.
https://github.com/nagaozen/asp-xtreme-evolution/blob/master/lib/axe/classes/Parsers/json2.asp
So, I got to this so far with the code below.
Set jsonObj = JSON.parse("{}")
jsonObj.set "Subject", "Testing Event Creation"
jsonObj.set "Start", "2016-08-30T15:00:00-07:00"
jsonObj.set "StartTimeZone", "Pacific Standard Time"
jsonObj.set "End", "2016-08-30T17:00:00-07:00"
jsonObj.set "StartTimeZone", "Pacific Standard Time"
jsonObj.set "Attendees", array(JSON.parse("{""EmailAddress"": {""Address"":""user1#domain.com"", ""Name"": ""User""},""Type"":""Required""}" ))
And the code above produces this output below:
{
"Subject": "Testing ERP Event 2",
"Start": "2016-08-30T15:00:00-07:00",
"StartTimeZone": "Pacific Standard Time",
"End": "2016-08-30T17:00:00-07:00",
"Attendees": [
{
"EmailAddress": {
"Address": "user1#domain.com",
"Name": "User"
},
"Type": "Required"
}
]
}
Now, I am stuck on adding additional email addresses under "Attendees" like the example below:
{
"Subject": "Testing ERP Event 2",
"Start": "2016-08-30T15:00:00-07:00",
"StartTimeZone": "Pacific Standard Time",
"End": "2016-08-30T17:00:00-07:00",
"Attendees": [
{
"EmailAddress": {
"Address": "user1#domain.com",
"Name": "User1"
},
"Type": "Required"
},
{
"EmailAddress": {
"Address": "user2#domain.com",
"Name": "User2"
},
"Type": "Optional"
},
{
"EmailAddress": {
"Address": "user3#domain.com",
"Name": "User3"
},
"Type": "Required"
}
]
}
I know that I am not doing this correctly. Please show me an efficient way to perform multiple levels using the json2.asp. I tried to set "Attendees" as a separate object so I can add email addresses, but no success.
Thanks in advance.