Use Message Card JSON on TeamsMessage attachments

[nguyendn]

I've integrated Actionable Message to Outlook and I want to re-use the message generator on Teams.

Is it possible that I re-use the Message Card JSON ( example here https://messagecardplayground.azurewebsites.net/ ) to do something like:

new teams.TeamsMessage(session).summary("Use O365 actionable card").attachments([Message Card JSON]);

I tried and I have this error :

POST to 'https://smba.trafficmanager.net/amer-client-ss.msg/v3/conversations/a:12AlKhSkgnTVfgDzW3Hc4dij0n91QoigLmVoaQhR0yP45ixenSC6l_qyC0OaU89hEFjn8PQh0BrmmyI0YV40KidUNfrDGJx38ladohfWAGsqSEtEhk8VryOXJ5Ri_arXL/activities/1525987601637' failed: [400] Bad Request

[Wajeed-msft]

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.

[nguyendn]

@Wajeed-msft It seems potentialAction doesn't work with json payload

[aosolis]

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",
    ...
}

[nguyendn]

@aosolis Perfect! the buttons show up now.

[nguyendn]

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": "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://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

[aosolis]

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 ☹️

[nguyendn]

@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": "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://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."
        }
    ]
};

[aosolis]

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": "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://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."
        }
    ]
}

[nguyendn]

Perfect! thanks!!!