Page 40 - MSDN Magazine, August 2017
P. 40

MICROSOFT OFFICE
Actionable Messages
for Outlook
Woon Kiat Wong
I love e-mail. At work, it’s where I go to stay on top of what’s going on and what I need to do. It’s where I receive notifications of new expense reports submitted by my team, new replies to my tweets, new comments to my pull requests and so on. But e-mail could be so much better. Why do I need to click a link in e-mail and wait for the finance system Web site to load in a browser before I can approve an expense report? Why do I have to men- tally change my context? I should be able to approve the expense report directly in the context of my e-mail client.
Sound familiar? Outlook is about to make your life much better, save you time and make you more productive.
Introducing Actionable Messages
Actionable Messages let users complete tasks within the e-mail itself. It offers a native experience in both the Outlook desktop client and Outlook Web Access (OWA). In this article, I’ll use the word Outlook to mean either Outlook desktop client or OWA.
In the example I’ll be using, the fictional company Contoso has an internal expense approval system. Every time an employee
submits an expense report, an e-mail message is sent to the manager for approval. I’ll walk through the steps on how to use Actionable Messages in Outlook that lets the manager approve the request within the e-mail message itself.
My First Actionable Message
In Figure 1, you see the HTML of an Actionable Message. It might look complicated, but believe me, it’s not. I’ll explain the markup in detail in the following sections. The first step is to send an e-mail with the markup from Figure 1 to your Office 365 e-mail account.
As shown in Figure 2, in the message itself, there’s a message card with two buttons with which you can interact. If you click on the Approve button, it’ll result in an error for now because you haven’t yet specified the URL for the action. You’ll add the URL later. If you click on the View Expense button, a browser will open and navigate to the Expense Approval Web site.
MessageCard Markup
The e-mail message itself is typical HTML markup. To make it an Actionable Message in Outlook, you insert MessageCard markup in the <script> element. One main advantage of this approach is that e-mail messages will continue to render as usual on clients that don’t recognize the MessageCard markup. The format of this markup is called JSON-LD, which is a standard format to create machine-readable data across the Internet. Now, let’s go through the markup in detail. These two lines of code are mandatory in every markup:
"@context": "http://schema.org/extensions", "@type": "MessageCard",
This article discusses:
• Create and send Actionable Messages
• Validating a JSON Web token
• Designing Web services for Actionable Messages Technologies discussed:
Actionable Message Markup, Actionable Message JSON Web Token, Actionable Message Security
34 msdn magazine













































































   38   39   40   41   42