Embed Size (px)
Citation preview
Thank you Sponsors#ThriveITconf
Silver
Evening event sponsor
Material
Media
Turn Your Business Productivity Up To
11 with Actionable Messages and
Adaptive Cards
Bill Ayers
Flow Simulation Ltd.
www.SPDoctor.net
@SPDoctor
Consultant specialising in SharePoint
and Office 365 Development and
Architecture for Collaboration and
Mobile Development
MCM/MCSM Charter SharePoint, MCT, MVP,
MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA,
MSc, Professional Scrum Master, etc.
You’ve got mail!
Typical workflow experience
Outlook
Outlook
View expense report
Log in
Comment
Approve Reject
Return to expense list
Outlook
View expense report
Outlook
View expense report
What’s an Actionable
Message?
Make the 5 seconds of user attention
enough to achieve the goal
With Actionable Messages…Outlook
Outlook
Comment
Approve Reject
Outlook
View it online
Outlook
View it online
Actionable Messages = productive email
Delighted users
“It’s a major behavior shift based on a single feature”
“I got an expense report approval request and it was magical”
“It’s a huge efficiency booster”
How Actionable Messages workSafe and secure end-to-end
Office 365 uses SPF and DKIM
to verify the origin of the
message and let it through.
Office 365 appends a signed
token to the incoming HTTP
request. It includes the identity
of the user taking the action.
Your service validates the
signature of the token and
extracts the identity of the
user taking the action. If
everything checks out, the
action is executed.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="application/adaptivecard+json">{"type": "AdaptiveCard","version": "1.0","hideOriginalBody": true,"body": [
{"type": "TextBlock","text": "Visit the Outlook Dev Portal","size": "large"
}],"actions": [
{"type": "Action.OpenUrl","title": "Learn More","url": "https://docs.microsoft.com/outlook/actionable-messages"
}]
}</script>
</head><body>Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.</body></html>
Actionable Message Designer
https://amdesigner.azurewebsites.net/
Build an Actionable messageto display your content inside Outlook
Articles Videos
Cards have their roots in social media
Airline Itinerary
Airline Flight Update
Airline Check-in Reminder
Receipts
Restaurants
But we needed more…
A compromise between simple templates and full HTML5
Fixed templates
Complete control
No flexibility
Update Treadmill
HTML Canvas
No consistency
No control
Security issues
Adaptive Cards
Flexible enough payload to cover 80% of needs
Host maintains strong control over style and security
Multiple platforms – UWP, Android, iOS, HTML
Declarative behaviour
Yes No Maybe
Adaptive Cards in Microsoft experiences
Demo: Getting started
Actionable Messages with Adaptive Cards
You can send actionable messages to yourself using the Office 365 SMTP server or the Microsoft Graph. You will be unable to send actionable messages
to any other user until you have registered using the actionable messages developer dashboard.
Set hideOriginalBody property
The message body should be added, but hidden if
the card contains all the information the user
needs. Body is shown if host does not support
cards.
Cards are not included in replies or forwards of
email.
Card (json) is wrapped in <script>
Script tag must have type:
application/adaptivecard+json
<script> is added to <head>
Message body is an HTML document.
Adaptive card is in <head> element.
Message body is in <body> of document.
Design Guidelines*
Think of a card as a response to a user question or a setting. A card can respond to a direct question (like, “How many open bugs do
I have?”) or to a condition (like, “Send a list of my open bugs at 9 am every day”). A card should include any of the following
elements:
Envelope text
Best used for chat messages. For example, if you want a bot to say:
“Here’s what I found!” or “Time for your 1:00 news digest”, that
message is best displayed in envelope text.
Envelope text is a great way to inject a little personality into your
service—just remember to keep it relatively short.
Title
Your title will always be the largest text in your card. It also serves as
your “hook”, so try to keep the title short, memorable, and easy to scan.
Subtitle
Best used for attribution, taglines, or as a secondary directive. This
component appears just below your title.
1
2
3
* Michael Forney, Microsoft
Text
Best used for plain text in the body of your card. Your max length
depends on the card type you’ve selected.
Buttons
Best used to open web pages, tabs, or additional chat content. Make
sure to keep your button text short and to the point.
You can include up to 6 buttons per card, but we’d recommend
following a ‘less is more’ philosophy here.
Tap region
This is the clickable region of your card. Most users will want to click on
images automatically, so try and craft your text so they know where
they should tap or click.
5
6
7
Image
Images scale to fit their container. Hero cards have a max width of
420px, thumbnails have a max width of 100px, and list views only allow
for 32px in desktop mode.
4
Best Practices
Keep the noise down
It’s easy to send multiple cards into a conversation, but once cards scroll out of view, they become less useful. Try to limit yourself to the essentials. This
is especially true in a channel where users have less tolerance for what they perceive as “noise”.
Test on mobile
Mobile environments are space- and bandwidth-constrained, so be cautious about including oversized images and large data sets in lists and carousels.
Also, title widths and text lengths will truncate on mobile, so that’s another thing to keep an eye on.
Check your graphics
Graphics are going to scale, so be sure to preview them on all platforms.
Avoid including text in a graphic
Anything that needs to be read by a user should be included in a text field. Once an image is dynamically scaled, any text you add to a graphic may
become unintelligible.
Text formatting with basic markdownEffect Markdown
Italics *Italic*
Bold **Bold**
Bold italics ***Bold italics***
Strikethrough ~~Strikethrough~~
Links [Microsoft](https://www.Microsoft.com)
Headings # Heading through ###### Heading
Bulleted lists * List item or - List item
Inputs
Input.TextUse when you need users to provide text.
Input.DateUse when you need users to provide a date
and/or a time.
Input.ChoiceSetUse when you need users to select from a list
of pre-defined choices.
Outlook-specific Adaptive Card properties and features
Outlook introduces a set of additional Adaptive Card properties and features for use in the context of Actionable Messages.
Input.Time is not supported
If you include an Input.Time element in your card,
it will not be displayed. If you need to allow users
to input a time, use an Input.Text instead and
validate its value server-side.
Action.Submit is not supported
If you include an Action.Submit in your card, it will
not be displayed.
Use Action.Http
Action.Http
Action.Http makes it possible to make a GET or
POST request to a specific target URL as a result of
a user taking an action in a card.
Provides for describing the request, including
headers and body.
Use input value substitution to pass data to
requested URL.
Outlook-specific Adaptive Card properties and features
Outlook introduces a set of additional Adaptive Card properties and features for use in the context of Actionable Messages.
Action.InvokeAddInCommand
Opens an Outlook add-in task pane. If the add-in is
not installed, the user is prompted to install the
add-in with a single click.
Passes data via Initialization context
Action.DisplayMessageForm
Action.DisplayAppointmentForm
Opens the read form of the specified message or
calendar item.
Action.ToggleVisibility
Makes it possible to show and/or hide specific
elements of a card as a result of a user clicking on
a button or other actionable element.
Coupled with the isVisible property,
Action.ToggleVisibility allows for an extra degree
of interactivity within a single card.
Outlook-specific Adaptive Card properties and features
Outlook introduces a set of additional Adaptive Card properties and features for use in the context of Actionable Messages.
ActionSet element
Facilitates placement of Action buttons anywhere
in the card.
(Default placement of actions is above or below
card.)
Action.Transaction
Triggers the payments in Outlook experience using
Microsoft Pay.
Additional Properties
correlationId – sent on Http requests
expectedActors – specify expected claim as part
of Http request
originator – Id from Developer Dashboard
column – control width/background/vertical
alignment
container – control background/vertical
alignment
Type Notable attributes
Input.Text isMultiline, placeholder, maxLength
Input.Number max, min, placeholder
Input.Date
Input.Timemax (expressed as ISO-8601), min (expressed as ISO-8601)
Input.Toggle title, valueOff, valueOn
Input.ChoiceSet
Input.Choice
isMultiSelect, style (Compact => Dropdown, Expanded => Radio buttons)
Choices are title/value pairs
Input types
Actions
OpenUriOpens a URI in a separate browser or app
HttpPostMakes a call to an external web service
ActionCardPresents additional UI that contains one or more inputs (text, date, or multichoice) and action (OpenUri or HttpPost)
{
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "nameInput",
"placeholder": "Type your name"
}
],
"actions": [
{
"type": "Action.Http",
"title": "Say hello",
"method": "GET",
"url": "https://contoso.com/sayhello?name={{nameInput.value}}"
}
]
}
Action.Http
https://outlook.office.com/connectors/oam/publish
Actionable Email Developer Dashboard
• Emails must be authenticated via DKIM or SPF
• Top-level domain (TLD) of the SPF check or DKIM signature must match the TLD of your From: email address
• Emails must come from a static email address
• Emails must follow the email sender guidelines
• Consistent history of sending a high volume of mail from your domain
• Very low rate of spam complaints from users
• Use high-fidelity, routine and simple actions available for your service, otherwise use OpenUriactions for complex interactions
• Actions should be used for transactional email where a high interaction rate is expected, they should not be used for promotional bulk mail
Registration criteria for global submission scope
What’s next for Actionable Messages?
• Adaptive Card v1.1 supports
– Includes new capabilities such as Media playback
– Teams conversations (coming soon)
• Actionable Messages in Outlook for Mac
• Actionable Messages in Outlook Mobile
– #1 requested feature
– It’s taking longer than we’d hoped, but it’ll be worth the wait
– Available on Outlook for iOS, coming for Android
Call to action
• Do you have time sensitive internal business processes?
• Are you an ISV with solutions that rely on email?
• Would you like better engagement with email notifications?
• Do you want to delight your users and increase their productivity?
• Do you want to save money?
Consider investing in Actionable Messages
• Outlook at the Office Dev Center– Landing page: https://developer.microsoft.com/en-us/outlook/
• Actionable Messages– Get started: https://docs.microsoft.com/en-us/outlook/actionable-
messages/get-started
– Card Playground: https://amdesigner.azurewebsites.net/
– Implement an end-to-end Actionable Message scenario step-by-step: https://github.com/OfficeDev/TrainingContent/tree/master/ConnectorActionableMsgs/03%20Adaptive%20Cards
• Adaptive Cards– Documentation, reference, samples: http://adaptivecards.io
– GitHub: https://github.com/Microsoft/AdaptiveCards
– Adaptive Card designer: https://adaptivecards.io/designer
Resources:
THANK YOU
