My name is raju. Today i am going to show you
How to create interactive e-mails within outlook with
Adaptive cards. How many of you here have
Heard of actionable messages? great.
Have you been building on them? awesome.
A very simple and powerful technology. Let me show you what it is.
If you were like me, you will be send thousands of e-mails
Of modifications and most of these are static in nature.
You link and authenticate and every such hop of a different application ruins your
Connectivity and you end up losing your focus.
What if you can upload a expense report and complete a task as complete right from within your e-mail?
Well, that's what actionable messages enable you to do.
And today we are happy to announce free support for
Adaptive cards within
Technology. You see actionable message from git hub.
As an user i can add a comment right from within the e-mail
Without having to use the git hub app or go to the web site.
Building an actionable message is extremely easy.
Tall takes is three simple steps. Present card, present it
Yourself and have wireless actions.
Let's see how to do it. A live demonstration of a
Actionable message for an expense report.
Google, and outlook.Com/actions
So this is the documentation home page for all of
Actionable messages. It has all the necessary
Information and links, including the dashboard as
Well the card playground and
You only need this one single link.
Outlook.Com /actions. The card playground.
An interactive playground. There is an adaptive card and
A sample card that also been completely crafted from the
Json and i can flip to various templates that are available in this environment.
I can pick and choose one these or design the card from
Scratch. I am going to design my
Expense card from scratch, so i have like an empty adaptive
Card here. I will go and add a simple
Text block element
So cities in add -- >> you need to
Zoom >> so as soon as i create a
Text block element, you would see the preview right there.
So now i am going to add a simple approval button on to
My card. To do that, i add some action
Actions. I am going to call this action
Approve. Of the different actions i am
Going to ic to
Post. And a end point and the
Activity. Now that send the card, i am
Going through the next step is to send the card to myself.
The playground is a healthy option sent by an e-mail.
I click on this, i get an e-mail right in my in box, and
I can see the card of the playground there without any
Additional coding. So let's try to understand
What exactly happens behind the scenes when i click on
Send via e-mail. When hit that button, the card
That i designed is encapsulated within a script bag.
This is a script bag of. And this is added in the section of my e-mail.
So if you notice carefully, if you -- if for service already
Sent a stream e-mails, you don't have to go and relate
Your history. All you do is insert the
Script with the json designed. Also you redesign your e-mail
And you can continue to use what you already used today.
As a developer, you can send a actionable message to yourself.
If you want to send actionable messages to others, you need
To register in the dashboard and get approved.
If you send it within your tenant, within your own
Organization, would you need an admin sync and you want to
Send actionable messages to everyone, all over the world,
You need approval from our review team.
So let's go ahead and add some action -- so all i need here
Is a rest end point. I have
A end point for the purpose of this demo.
Implement a simple end point
For the purpose of this demo. And this end point, i give it
200 And empty response and add to the point
With target here. And when user hits approve, it
Is going to be to the end point. And currently it is nothing.
And i return a different adaptive card and i call this
The refresh card. So this is available and make
It -- it was approved and it
Is going to be approved and i have a view button here
So i will copy this adaptive card, go back to the res end point established and add it
In the body of the response. Okay.
You will also notice i have set up a header.
And a bit in body and i set it, and the signal being sent
To the client to understand that the res end point is
Ing a different card and uses that to refresh the
Previous card that i have. Let's see how this works. Send out the e-mail again.
If i cathedral my outlook client, i see the card here
I click on approve. The card refreshes and show
Approval has been changed to view. So it is that simple.
This is how you build actionable message end to end. Now to understand how the
Actions history of the e-mail with the
Mark-up, office 365, office 365 checks if you are approved
Sender to be able to send actionable messages and send
Additional checks to ensure that the smail actually coming from you, your own servers and
Not someone else trying to spoof you, the actionable
Message relate to the end user in outlook web and can see the cards surrender.
Those who use legacy part of outlook or g mail or apple mail, they will continue to
See the history part of your e-mail. They wouldn't see the cards.
So it's seamless. And when i use the clicks on
The action, it doesn't automatically land on your
Service and related to the office 365 actions. What what it does is adds a banner token.
So this -- and it is a standard token, token.
For the json web token you can verify that it came from
Office 365 and no one else is trying to do a manual attack on your service.
You will also have additional information such as who
Actually performed the action, so you don't have to
Reauthenticate the user. And then your server sends a
Response in the form of refresh card or new adaptive
Card in the case and relayed back to the client and the
Client produces it and goes ahead and refresh the card and
As simple as that and super safe and secure.
So currently it is basically a simple car but adaptive is like -- is like a more capable
Card format. It supports a whole range of
Competents and actions. And supports
Rich text capabilities and markdown s and supports actions that are specific to outlook.
You can have a message form open up and launch an item all
From within outlook. So let's head out and create,
Like, a card, to do that instead of crafting the json
Manually, -- to do that instead of tasking the json
Manually i will use an adaptive card that we have been working on.
I have the designer currently in review, so please forgive
Me any glitches in the demo. I go ahead and copy and paste
The mark up that they created. Would you see like a preview of the card show up here.
I can click on each of the elements and view the
Properties that are already set.
So let me go ahead and add some more actions.
This time through the http action and card and show
Action. I will call it decline.
When user clicks on a show card action, it shows another
Small adaptive card with them. So let me go ahead and add
Like an import text element. So i will use this to capture
The comment if any that the user will enter when declineuser w
Ill enter when declining this expense report.
Guilt and add another action here, i will call it the sub
Action after the comment is entered. I will make it a post action.
For this, i have created a res end point similar to the one i showed you earlier.
I use it here. Now when user hits submit, i
Want the information that he entered in the comment box to
Also be sent out. So to do that, guilt and set
The id property of that import box and use that to create the
Body of my history report. So to do that, i craft a
Simple json and i get double places i say common text
Value. Common text being the idea of the field that is right there.
So this -- that is a simple input substitution and creates
Crafts and sends hay long with my request.
I can go ahead and add other directions as well as like
Simple actions like open url is a deep link into my service.
I can call it view so the card, i want to add the current state us it of the
Expense report. To make it more prominent, i
Am going to use an image.
As soon as i add the url image, the image there, i will
Go ahead and just add this to the size of the image.
Now i want to add more details of who submitted the expense report. The name of the person and
More context around it. I will use a column set.
Within a column set, i can add multiple columns.
Here you can see i added three simple columns.
They are all equally spaced and of equal size and set to
Stretch. If i say auto -- it recesses
Itself depending on the content that is right there.
I add a simple image element to capture the person's
Profile picture. I go ahead and add the url.
I have the image right there. Now i go and add the text
Block and put the name of the person.
So i can add most elements to add all the data i need.
So now that we have all the information, we can make it
Like more beautiful, so since this is like a person's
Perfect picture, i can go and change the style of the person
In which case it automatically makes a sublet image and i can
Even, like, reduce the size of the image to the size that i
Want that is too much spacing between these two lines and go
Ahead and eliminate that spacing so they are closer
Together. I can increase the size of the
Element to make this more prominent.
I can also make it bold. If i want to highlight the
Person's name here, i can do the same thing when it is in
Bold and the entire line becomes bold and i
Specifically want the person's name to be bold and i can use
What the adaptive card allows and go ahead and add the mark
Down information to make it bold here with twos a tess
Risks, -- asterisks i can make it bold here and the final
Touch add the logo for the
Application. So we have, like, a much
Beautiful -- much more beautiful-looking card design. I take it back to the
Playground, i replaced it here. So
Now when -- i need corresponding refresh cards here.
I go ahead and do that and use the same card as the building
Block and i go and replace the pending image to approve.
Since this is approved, no longer require the claim
Buttons in the adaptive card and i go and remove those and
I have the refresh card for approve. I go and copy
As the -- in the response body of my res end
Point. I create a similar response to
The decline scenario. I will copy that into the
Other res end point that i created and i think it is
Ready and go ahead and send this e-mail to
Myself. So now when you hit approve,
The card refreshes, will show approve and the
Prove decline buttons are gone.
And similarly if i hit decline for some reason, again, the
Card refreshes, and if it goes to inspect the actual request
That came in, you would see the json is crafted within the
Card so with adaptive, you can
Create, like, very rich visual
Experiences in outlook and this is an example how it
Could be. Have it collapse sections to
Show line items. How it can receive attachments to the same e-mail and very
Compelling right within your e-mail client.
So here are some partner s that
Use actionable messages these being the most recent one. Coming to road map, so you
Would be making adaptive card
Oadly very soon. Currently we have the ability
To refresh the entire card or a certain section in the card and soon be making available
The ability to refresh the card even before the user -- the viewer used it.
And a mobile app and when it is the first time.
It wouldn't even though the buttons.
It will go to the refresh card and say, hey, this was
Approved using a mobile phone. That will be possible.
We will also start adding more native actions and also follow
Something called adaptive templates.
You don't even have to design an adaptive card for the more
Common designer limits that you need.
Would you simply send a day object and you
Would automatically put the right card and for the proper
Clients. I hope you have something that you sort of learned.
When you go back, think of all the scenarios where you can
Engage your users and others in your organization and how
To make the best use of adaptive cards and actionable