Creating your first custom Outlook Add-in

In this article we will look at how to modify the sample Add-in app and make it do something other than the sample app.

Introduction

In the previous articles we have looked at how to create a sample app, how it works and how to make it contextual. In this article we will make the sample Add-In actually link to something useful.

Bluemix Websockets chat

A while ago I created a sample websockets chat demo – https://xominosocket.mybluemix.net/. It is hosted on IBM’s Bluemix PaaS cloud and uses Socket.io ontop of a node.js server. The back end application runs an in-memory data cache using Redis.

None of which is anything in the slightest to do with Microsoft! Which is the main reason I picked it (the fact that I am lazy and it was just sitting out there as a great example already has nothing to do with it….)

Modifying the sample app

In this article we are going to make a few simple changes to the sample app Home.html which will make the Bluemix Chat demo appear contextually within a email.

Admittedly this is a bit of a hack but hey – it is just a demo.

  • I removed App.js, App.css, Home.js and Home.css – don’t need them
  • I removed the contents of the Body of Home.html and replaced it with an iframe pointing at the websockets demo.
  • I added a little styling to make it seamless
    and ran it

n9

 

n10

As far as the user is aware – we now have a websockets chat application embedded within their Outlook email. The Websockets chat is fully functional within the context of the email.

n11

Marky’s Use Cases #1: Helpdesk support Add-in

So there is an application for this Add-in technology. A “Contact the Helpdesk” link within a business email which would facilitate pulling up a web chat session with a helpdesk representative. The context of the email from whence it was created could be passed to the helpdesk and they would then be able to assist the user.

How cool is that 🙂

Conclusion

In this article we have seen how to insert a completely non-Office application, contextually within an email which only contains the word websockets.

 

 

Advertisements

One thought on “Creating your first custom Outlook Add-in

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s