Page 42 - MSDN Magazine, August 2017
P. 42
Figure 1 HTML of an Outlook Actionable Message
all the information a user would need or the content of the card is redundant with the content of the e-mail body. In case the mes- sage is viewed in an e-mail client that doesn’t understand message cards, then the original body will be shown and the message card will not, regardless of the value of “hideOriginalBody.” The value of the property “title” is the title of the MessageCard:
"hideOriginalBody": "true",
"title": "Expense report is pending your approval",
Next is “sections.” You can think of a section as representing an “activity.” If your card has multiple activities you should defi- nitely use multiple sections, one per activity. Figure 3 shows markup with one section. You use the facts property of a section, which is an array of name-value pairs, to display the details of an expense report.
It would be great if you could visualize how the card looks when you’re authoring the markup.
Next is “potentialAction.” This is an array of actions that can be invoked on this card. Currently the supported actions are OpenUri and HttpPOST:
"potentialAction": [{ "@type": "HttpPost", "name": "Approve", "target": ""
}, {
"@type": "OpenUri",
"name": "View Expense",
"targets": [ { "os": "default",
"uri": "https://expense.contoso.com/view?id=98432019"} ]
}]
The OpenUri action will open a browser and navigate to the URL specified in the targets property. The targets property is an array that lets you specify platform-specific URLs. For example, you might want users on iOS and Android to navigate to different URLs. In this example, you set the OS to default, which means the
URL is the same for all platforms. The HttpPOST action will make an HTTP POST request to an external Web service specified in the target property. Currently the value is empty. That’s why you see an error when you click on the
Approve button.
MessageCard
Playground App
It would be great if you could visualize how the card looks when you’re authoring the markup. Microsoft has a Web app that lets you do just that. It’s called the MessageCard Playground App (bit.ly/2s274S9).
Microsoft Office
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> <script type="application/ld+json">{
"@context": "http://schema.org/extensions", "@type": "MessageCard",
"hideOriginalBody": "true",
"title": "Expense report is pending your approval", "sections": [{
"text": "Please review the expense report below.", "facts": [{
"name": "ID",
"value": "98432019" }, {
"name": "Amount",
"value": "83.27 USD" }, {
"name": "Submitter",
"value": "Kathrine Joseph" }, {
"name": "Description",
"value": "Dinner with client" }]
}], "potentialAction": [{
"@type": "HttpPost", "name": "Approve", "target": ""
}, {
"@type": "OpenUri",
"name": "View Expense",
"targets": [ { "os": "default",
"uri": "https://expense.contoso.com/view?id=98432019"} ]
}] }
</script> </head>
<body>
<p>Please <a href="https://expense.contoso.com/view?id=98432019">approve</a>
expense report #98432019 for $83.27.</p> </body>
</html>
Yousetthecontexttohttp://schema.org/extensionsandthetype to“MessageCard.”TheMessageCardtypeindicatesthatthise-mail is an Actionable Message.
Next is the property “hideOriginalBody.” When the value is set to true, the e-mail body is hidden and only the card is displayed, as shown in Figure 2. This is useful when the card itself contains
Figure 2 Actionable Message in Outlook Web Access 36 msdn magazine
