How to access Outlook from HTML and JavaScript based add-ins

When Microsoft announced their new Office development platform, which would allow developers to create MS Office Apps using HTML and JavaScript, I was very excited about the idea. Unfortunately, I quickly learned that I simply could not accomplish the same things I can with the standard Office Object Model than with the new Office JavaScript object model.

Another thing that kept me from fully embracing the JS/HTML object model was die complexities in deploying the Office Apps. It was not particularly hard to deploy, nor was it quick and easy.

So when Eugene asked me to write a blog post about an idea one of our in-house gurus, Sergey, came up with, I was delighted by the idea.

• Accessing the Outlook Object Model from JavaScript
• Creating the Outlook add-in
• Adding the Outlook Inspector Browser Advanced Region
• Creating the HTML file
• Adding the JavaScript

Accessing the Outlook Object Model from JavaScript

The premise of Sergey’s idea was relatively simple – a .NET web browser control embedded inside either a standard Office Task bar or on an Add-in Express Advanced Taskbar. The web browser control could host any browser based content and you would be able to access the Outlook Object model using JavaScript. For example, in the following image, we’re showing a standard HTML page that shows information about the current open e-mail when the user clicks a button:

Creating the Add-in Express based Outlook add-in

In order to enable this functionality, we first need to create an Outlook Add-in using Add-in Express for Office and .net. Start by creating a new ADX COM Add-in project in Visual Studio.

Select your programming language (VB.NET, C# or Visual C++) and the minimum supported Office version.

Complete the wizard by selecting Microsoft Outlook as the supported application.

Adding the Outlook Inspector Browser Advanced Region

Next, we’ll need to add either a standard task pane or advanced region to embed the web browser on. We’ll use the Add-in Express Advanced Region, since it gives us much more customization options than the standard Office task pane.

Add a new ADX Outlook Form to your Outlook add-in project.

Open the newly added Outlook Form designer and add a standard Web Browser control to it, as illustrated in the following image:

Select the Web Browser control and generate a new event handler for its DocumentCompleted event by double-clicking next to the event name in the control’s event list:

Add the following code to the DocumentCompleted event handler:

private void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    var d = webBrowser.Document.DomDocument as mshtml.HTMLDocument;
 
    try
    {
        dynamic window = d.parentWindow;
        var windowEx = (IExpando)window;
        PropertyInfo p = windowEx.AddProperty("bhoModule");
        p.SetValue(windowEx, AddinExpress.MSO.ADXAddinModule.CurrentInstance, null);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("error adding ie script: " + ex.Message);
    }
}

The code above holds the biggest reason we will be able to access the Outlook Object Model via JavaScript. A property called bhoModule is added to the DOM’s parent window. This property’s value is then set to the AddinExpress.MSO.ADXAddinModule.CurrentInstance.

Next, add a new method called Init and add the following code to it:

public void Init()
{
    Uri url = new Uri(this.GetType().Assembly.CodeBase);
    string dir = Path.GetDirectoryName(url.LocalPath);
    string htmlFilePath = "file:///" + Path.Combine(dir, "MailInspector.html");
    this.webBrowser.Navigate(htmlFilePath);
}

The Init method will navigate the web browser control to an HTML file located in the project.

Creating the HTML file

The necessary code is already in place to make our HTML and JavaScript access the Outlook Object model. Add a new HTML Page to your project.

Select the HTML page and set its Copy to Output Directory property to Copy Always.

Next, add the following folders to your project:

• css
• js

We’ll use the Twitter Bootstrap framework to style our HTML. So, add the bootstrap.css file to the css folder and the boostrap.js file to the js folder. Make sure, you also set these files’ Copy to Output Directory property to Copy Always.

Open the MailInspector.html file, we’ve added earlier and add the following mark up to it:

<!DOCTYPE html>
<!-- saved from url=(0016)https://localhost -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Outlook Addin</title>
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>
                    Mail Inspector
                    <a id="showInfo-button" href="#" class="btn btn-xs btn-primary">Show Mail Info</a>
                    <a id="setInfo-button" href="#" class="btn btn-xs btn-primary">Set Mail Info</a>
                </h1>
            </div>
 
            <form class="form-horizontal" role="form">
 
                <div class="form-group">
                    <label for="from" class="col-sm-2 control-label">From:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="from" placeholder="From">
                    </div>
                </div>
 
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">E-mail:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="email" placeholder="E-mail">
                    </div>
                </div>
 
                <div class="form-group">
                    <label for="subject" class="col-sm-2 control-label">Subject:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="subject" placeholder="Subject">
                    </div>
                </div>
 
                <div class="form-group">
                    <label for="received" class="col-sm-2 control-label">Received:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="received" placeholder="Received">
                    </div>
                </div>
            </form>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

Mark of the Web

You’ll notice the second line in the file states:

<!-- saved from url=(0016)https://localhost -->

This is used to force Internet Explorer (The .Net Web Browser control uses Internet Explorer) to run in the Local Internet Zone. This is useful to enable dynamic content like JavaScript inside the web browser control. You can read more about this feature on MSDN.

Adding the JavaScript

The final step is to add the required JavaScript in order to add the interaction to our Outlook add-in. We’ll have two buttons on our HTML add-in: One will show the information about the currently open e-mail message and the other will check whether the Inspector window is in compose mode and set the recipient and subject values based on what the user entered.

Add the following to the HTML page we’ve added earlier:

<script type="text/javascript">
 
    $('#showInfo-button').click(function () {
        if (window.bhoModule != null) {
            var objOutlook = window.bhoModule.OutlookApp;
            var inspector = objOutlook.ActiveInspector();
            var currItem = inspector.CurrentItem;
            var sender = currItem.Sender;
 
            $('#from').val(sender.Name);
            $('#email').val(sender.Address);
            $('#subject').val(currItem.Subject);
            $('#received').val(currItem.ReceivedTime);
        }
    });
 
    $('#setInfo-button').click(function () {
        if (window.bhoModule != null) {
            var objOutlook = window.bhoModule.OutlookApp;
            var inspector = objOutlook.ActiveInspector();
            var currItem = inspector.CurrentItem;
 
            if (!currItem.Sent) {
                currItem.Subject = $('#subject').val();
                currItem.To = $('#email').val();
            }
        }
    });
 
</script>

You will notice that in the above JavaScript, we accessed the bhoModule property and obtained a reference to the Active Inspector. From there, we can get a reference to CurrentItem property and access any properties on the Outlook Mail item.

The beauty about this approach is that you can host the bulk of your add-in code on a public server and when you need to make changes, it will automatically reflect on your user’s end. It offers you a lot of flexibility and you can use the rich variety of online libraries and tools to develop your Office Outlook add-in.

Hands up, who would like to see this as a full featured ability of Add-in Express in the next version?

Available downloads:

This sample Outlook add-in was developed using Add-in Express for Office and .net:

HTML Outlook add-in (C#)

Thank you for reading. Until next time, keep coding!