One of the demos I gave during my Visual Studio 2008 presentation at MSDN Live this Monday was on Visual Studio Tools for Office and how to build an Outlook 2007 Add In. VSTO is now as integrated part of Visual Studio 2008 and not a separate product anymore. Previous versions of VSTO have been a bit limited, but the latest version lets you extend Outlook, Word, Excel, PowerPoint, Visio, InfoPath and Project using managed code. This opens up to some really nice integration scenarios where you can integrate line-of-business applications directly into Office.
In my demo I integrate Virtual Earth maps into the contact form in Outlook 2007. When you open up a contact you get a new button to view a map showing the contacts location on the map. The way I integrate Virtual Earth is by using the Windows Forms Web Browser control. The cool thing about the Web Browser control is that it's really easy to invoke JavaScript functions on the page being displayed directly from C#. The JavaScript code to find a location on the map and display a pushpin is based on the Virtual Earth Interactive SDK samples.
To create a new Outlook 2007 Add-in start by going File - New Project, and select Visual C# - Office - 2007 - Outlook Add-in. This will create a new Outlook Add-in project. The project template will create a simple ThisAddIn.cs file that contains methods for Add-in startup and exit. For now just ignore this file. The next thing you need to do is add a forms region to your project. Right click the project and select Add - New Item. This will bring up the dialog box with all available items. Select the Outlook Form Region item to design a new form. Adding this item will launch a short "Outlook Form Region" wizard. You get options to design a new form, or import an existing design from an .ofs file. Select new form region. The next question is what type of form region you want to create. You can choose separate, adjoining, replacement and replace-all. Choosing separate will add a new button to the toolbar, which will open your form region as a separate page when you click the button. Select this option. Next step is to give your form a name, before the final step is to select which type of message class you want to display the form region on. You can select multiple options (like mail, RSS, task). For this form we'll simply select contact. This will make the add-in available only on the contact form inside Outlook.
After completing the wizard you get a design surface that should look familiar to any Windows Forms developer. It's the good old Windows User Control designer where you can drag and drop any Windows Forms control onto the surface. Start by adding a web browser control and dock it to the parent. Set the ScrollBarsEnabled property to false. Add an event handler for the DocumentCompleted event. This event is executed when the browser is done loading the web page. Set the URL property of the web browser control to http://jonas.follesoe.no/content/binary/virtualearth.htm, or your own version of the Virtual Earth HTML file. The content of the file is straight forward, and can be viewed below. For security reasons IE (the Web Borwser Control is a simple wrapper around IE) displays a warning when ever a local HTML file is loaded. Even if you accept blocked content I can't get the map to display correctly. That's why I have the map HTML file up on a web server (and not as a local file on disk). The HTML and JavaScript looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Virtual Earth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
</style>
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var pinid = 0;
var title = "";
var description = "";
function GetMap()
{
map = new VEMap('myMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
}
function FindLocation(location, contactName, contactDescription)
{
try
{
title = contactName;
description = contactDescription;
if(map == null)
GetMap();
map.Find(null, location, null, null, 1, 1, true, true, true, true, LocationFound);
}
catch(e)
{
alert(e.message);
}
}
function LocationFound(a, b, placeArray, d, e)
{
var shape = new VEShape(VEShapeType.Pushpin, placeArray[0].LatLong);
shape.SetTitle(title);
shape.SetDescription(description);
pinid++;
map.AddShape(shape);
}
</script>
</head>
<body>
<div id='myMap' style="position: relative; width: 100%; height: 100%;"></div>
</body>
</html>
In the DocumentCompleted event you need to execute the FindLocation JavaScript function on the loaded HTML page. You do this by calling the webBrowser.Document.InvokeScript method. As parameters to the FindLocation function you need to pass in the contacts name, address and description (used by the pushpin). The code to execute the script and access the currently selected contact is displayed below:
private void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
Outlook.ContactItem currentContact = (Outlook.ContactItem)this.OutlookItem;
string address = currentContact.BusinessAddress.Replace("\r\n", ",");
ExecuteScript("FindLocation", address, currentContact.FullName, currentContact.BusinessAddress);
}
private void ExecuteScript(string scriptName, params object[] parameters)
{
webBrowser.Document.InvokeScript(scriptName, parameters);
}
The FindLocation function will use VirtualEarth to look up the address, move the map and add a pushpin with the name and address of the contact. Screenshot below:
This example is just a quick demo of what some of the new features in Visual Studio Tools For Office 3.0 shipping as part of Visual Studio 2008 has to offer. For another interesting demo check out the TechEd US key note available over at Virtual TechEd. The Office/Outlook demo starts about 58:30 into the video.
For more information about Office Development check out the Visual Studio Tools for Office Developer Portal.