Comments (9)
Wajeed-msft
commented on June 19, 2024
1
You can re-use you JSON from Outlook connector card as follows:
var cardJson = {
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"summary": "Issue 176715375",
"themeColor": "0078D7",
"title": "Issue opened: \"Push notifications not working\"",
"sections": [
{
"activityTitle": "Miguel Garcie",
"activitySubtitle": "9/13/2016, 11:46am",
"activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
"facts": [
{
"name": "Repository:",
"value": "mgarcia\\test"
},
{
"name": "Issue #:",
"value": "176715375"
}
],
"text": "There is a problem with Push notifications, they don't seem to be picked up by the connector."
}
]
};
let card = {
"contentType" : "application/vnd.microsoft.teams.card.o365connector",
"content": cardJson
};
var msg = new teams.TeamsMessage(session).summary("Use O365 actionable card").attachments([card]);
Please check the documentation for differences in Outlook connector card and Bot's connector card.
from botbuilder-microsoftteams.
nguyendn
commented on June 19, 2024
@Wajeed-msft It seems potentialAction doesn't work with json payload
from botbuilder-microsoftteams.
aosolis
commented on June 19, 2024
It's not a matter of JSON vs not JSON. Our SDK converts to JSON, so in the end it's all JSON anyway :)
It seems that in Teams, the "@id" property is required on all connector card actions. Add an "@id" property action and the button should appear. e.g.,
{
"@type": "ActionCard",
"@id": "comment-action",
"name": "Add a comment",
...
}
from botbuilder-microsoftteams.
nguyendn
commented on June 19, 2024
@aosolis Perfect! the buttons show up now.
from botbuilder-microsoftteams.
nguyendn
commented on June 19, 2024
It buttons on this json doesn't show. It's Microsoft Workflow JSON that works on Outlook
var cardJson = {
"@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": "[email protected]",
"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://awesomedocument)" }
]
},
{
"potentialAction": [
{
"@type": "ActionCard",
"@id": "approve",
"name": "Approve",
"inputs": [
{
"@type": "TextInput",
"id": "comment",
"isMultiline": true,
"title": "Reason (optional)"
}
],
"actions": [
{
"@type": "HttpPOST",
"name": "Submit",
"target": "http://..."
}
]
},
{
"@type": "ActionCard",
"name": "Reject",
"@id": "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."
}
]
};
Also, Does heroImage work on MS Teams? I don't see it
from botbuilder-microsoftteams.
aosolis
commented on June 19, 2024
As I mentioned earlier, actions require an "@id" property, or else the card is not rendered properly. Please add "@id"s to the HttpPOST actions in the second section.
Note that in Teams, HttpPOST actions take a "body" parameter that specifies the payload. "target" is not used.
Finally, Teams does not support heroImage. Sorry
from botbuilder-microsoftteams.
nguyendn
commented on June 19, 2024
@aosolis īŋŊI added all the @id but it still doesn't work. Please also notice that the structure of MS Flow example is different with Github one. But the MS Flow one is the one we're working with Outlook.
var cardJson = {
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"summary": "This is the summary property",
"themeColor": "0075FF",
"sections": [
{
"startGroup": true,
"title": "**Pending approval**",
"activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
"activityTitle": "Requested by **Miguel Garcia**",
"activitySubtitle": "[email protected]",
"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://awesomedocument)" }
]
},
{
"potentialAction": [
{
"@type": "ActionCard",
"@id": "approve",
"name": "Approve",
"inputs": [
{
"@type": "TextInput",
"@id": "TextInput1",
"isMultiline": true,
"title": "Reason (optional)"
}
],
"actions": [
{
"@type": "HttpPOST",
"@id": "HttpPOST1",
"name": "Submit",
"target": "http://..."
}
]
},
{
"@type": "ActionCard",
"name": "Reject",
"@id": "reject",
"inputs": [
{
"@type": "TextInput",
"@id": "TextInput2",
"isMultiline": true,
"title": "Reason (optional)"
}
],
"actions": [
{
"@type": "HttpPOST",
"@id": "HttpPOST2",
"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."
}
]
};from botbuilder-microsoftteams.
aosolis
commented on June 19, 2024
Inputs take "id", actions take "@id". (Yes, it's confusing, and I honestly don't know why they spec'd it this way.)
In your JSON you had "@id" for both types and actions. Change the "@id" to "id" for the inputs, and the card will render:
{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"summary": "This is the summary property",
"themeColor": "0075FF",
"sections": [
{
"startGroup": true,
"title": "**Pending approval**",
"activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
"activityTitle": "Requested by **Miguel Garcia**",
"activitySubtitle": "[email protected]",
"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://awesomedocument)" }
]
},
{
"potentialAction": [
{
"@type": "ActionCard",
"@id": "approve",
"name": "Approve",
"inputs": [
{
"@type": "TextInput",
"id": "TextInput1",
"isMultiline": true,
"title": "Reason (optional)"
}
],
"actions": [
{
"@type": "HttpPOST",
"@id": "approve-submit",
"name": "Submit",
"body": "{}"
}
]
},
{
"@type": "ActionCard",
"name": "Reject",
"@id": "reject",
"inputs": [
{
"@type": "TextInput",
"id": "TextInput2",
"isMultiline": true,
"title": "Reason (optional)"
}
],
"actions": [
{
"@type": "HttpPOST",
"@id": "reject-submit",
"name": "Submit",
"body": "{}"
}
]
}
]
},
{
"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."
}
]
}from botbuilder-microsoftteams.
nguyendn
commented on June 19, 2024
Perfect! thanks!!!
from botbuilder-microsoftteams.
Related Issues (20)
- How to post MessageCard JSON Payload on Teams to user in C# HOT 2
- After Click on Allow it is showing Error.Login Consent is not Working in the Teams Desktop and in Browser. HOT 1
- [Dev Issue]The `theme` parameter in the request of `handleTeamsMessagingExtensionConfigurationQuerySettingUrl` is missing? HOT 1
- TextInput is not passing value to HttpPost action in Teams HOT 2
- Teams search app not loading initial items on IOS HOT 3
- Offical HOT 1
- Hello HOT 1
- Cannot add any options in the value section in ActionTypes of thumbnail card. HOT 3
- Bot rate limits update HOT 3
- Adaptive Card Action.Submit is not working on MS Team on iOS as expected HOT 4
- MS Teams bot welcome message HOT 4
- Section's 'startGroup' not working in Teams HOT 4
- Accessbility issue :- Need Alt attribute in O365ConnectorCardSection class HOT 5
- How to configure Bot Framework C# project to send welcome message over Teams channel HOT 6
- Any News: Adaptive Card Input.Date fields only work correctly in English HOT 4
- :<[email protected]>\http +saE2QGoeQMbKMRS6J3vQ>\ HOT 3
- Invocation of adaptive card or custom form works fine on Teams Desktop App but not in Mobile App(iOS) HOT 7
- This repo is missing important files HOT 2
- Node.js Teams botbuilder package: Message extension - Responding with a card inserted into the compose message area, inserts card in compose area for all chat windows within teams app HOT 7
- Teams Bot Node.js - send a proactive message to a particular person that is not part of conversation but has app installed? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â¤ī¸ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from botbuilder-microsoftteams.