Outlook

Outlook Add-ins community call

Marky Roden Office Development , , , ,

Back in March the Outlook Add-In development community had it’s quarterly meeting. The notes from the meeting were blogged and released here: https://dev.office.com/blogs/outlook-community-call-march-21-2018.

These calls are really helpful to spread the new on the progress being made in the Outlook Add-In area. Some really interesting points of notes at this call were the upcoming preview requirements for API 1.6

https://dev.office.com/reference/add-ins/outlook/preview/index?product=outlook&version=preview

I have a particular selfish interest in the “Office.context.auth.getAccessTokenAsync – Added access to getAccessTokenAsync, which allows add-ins to get an access token for the Microsoft Graph API.”

I think I am going to play with that 🙂

Next call will be at 8:00AM PST on June 20, 2018. https://aka.ms/outlookcommunitycall

Programatically modifying the subject within an Outlook Email using an Office Add-in

Marky Roden O365, Office Add-In , , ,

In this article I will demonstrate the simple getter and setter methods for getting the subject from an Outlook email, changing it and updating it.

Introduction

A customer came to us with the request to be able to push a button in outlook and set distinct values into the subject line of an email. The reason for wanting to do it this was way to ensure that there was no spelling issues and or other potential mistakes. The information in the subject can then be parsed and acted on as it passes through the email transport process.

Getting and Setting the subject

Looking at the dev.outlook.com documentation for Add-Ins we can see that there are two Async methods for getting and setting the subject from an email.

   getAsync(options, callback)
   setAsync(subject, options, callback)

in both cases the options variable is able to pass information into the Async function so it can be executed on after at the time the callback is executed. In this case we will not be using them.

To demonstrate the capability I used my Firebug lite console within both the outlook and owa clients to get the subject, add a message to it and then set the subject. This gives the overall impression to the user that you are “inserting” the information into the email subject.

Office.context.mailbox.item.subject.getAsync(
	{},
	function(res){
		var subject = res.value
		Office.context.mailbox.item.subject.setAsync(
			'[RANDOMTEXTHERE] '+subject 
		{},
		function(){
		})
	})

In Outlook

o1

o2

and in OWA

o3

o4

This simple functionality can be added into a button within the Ribbon bar and you have the desired Add-In for the customer.

Conclusion

In this article we have seen that getting and setting the Subject of an email in Outlook/OWA is very simple and easy to run within the client/browser

Where are the MIME-embedded images in a Microsoft Graph REST API call?

Marky Roden Microsoft Graph, MIME , , ,

In this article I will demonstrate the steps necessary to correctly extract the embedded image MIME entities from within the HTML provided from the Microsoft Graph API (v1.0).

Introduction

Using the Microsoft Graph API we are able to extract the HTML body from an email given the message id. That HTML could then in theory be stored separately and the email reviewed for later. Here is a simple example using the graph explorer example website .

https://graph.microsoft.com/v1.0/users(‘GUID’)/messages/messageId

Here is the Original email

h1

Here is the graph API representation of that email with the HTML highlighted

h2

Here is the HTML extracted and saved as marky.html

h3

and here is the marky.html file displayed in the browser.

h4

This works well for this kind of email because it is HTML and references external CSS images and pictures – it can be recreated with a high confidence in fidelity.

This is unfortunately not the case when you send internal email through outlook and other email clients.

Embedded MIME

Generally when email is sent directly from a mail client it contains embedded MIME images and when you download the HTML for that web page you get contentId (cid: ) references like this.

The original email sent with an inline image:

h5

The HTML generated from the Graph API contains a “cid” reference

h6

which ultimately leads to a failed image as there is now no real reference to the image:

h7

(sad face)

The image reference is src=”cid:image001.png@01D1C6EE.58865610″  and that reference we will use in the next section

Getting the image

We have to use the graph API to retrieve the images in different way. The images are actually recorded as “Attachments” within the graph API and are accessible via the API in the following manner.

https://graph.microsoft.com/v1.0/users(‘GUID’)/messages/messageId/attachments

What we get back from that request looks like this with the cid reference in the contentId.

h8

The contentBytes value of the attachment is actually the base64 encoded version of the image originally references in the email. If we take that base64 encoded value (in this case it was 96k in size) and replace the image source in marky.html it looks like this:

src=”data:image/jpeg;base64,contentBytesHERE”

h9

and when we view marky.html we now see the image.

h10

Conclusion

In this article we have looked at where all the information can be found to get the images for storage outside of the Microsoft Graph, but we have not looked into the complications of how you would go about automating this process. That would a potentially large number of requests (based on the number of embedded images) and would also be time consuming.

But, the information is out there if you know where to look.