My boss, Hemant, came into my office one day and said, “Tom, I wish there was a
Gadget that would let me retrieve information from my Outlook Contacts, so that
when I need a clients phone number I could just look it up, without going through
all my Contacts in Outlook, or switching from my email.”
I thought to myself, there should definitely be one available, that Microsoft built,
to do this. But all I could find was an Inbox, Appointment and some gadget
that looked up information from Windows Vista Contacts (Who uses that anyway?).
I could not find one that would search into Outlook Contacts and retrieve me the
information my boss was looking for, so I had to make my own.
I am not going to walk you through how Gadgets are built, there are many fine examples
of this on the web, and in my references below, but I am going to give you the highlights
on what technologies I used to architect this Gadget. I am also going to provide
this Gadget, so that you can dissect it, learn from it and use it in your own solutions.
The basic requirements for this Contacts Gadget are as follows:
- Provide an input box that would let the user type in a contacts name.
- This input box should automatically list all users from outlook and filter as the
user types.
- Once the user selects a contact, the gadget should retrieve the phone contact information
from Outlook.
- In addition to this, the Gadget should remember the history of the last three contacts
retrieved by the user.
- The History should scroll down the Gadget, so the most recent search is on the top
and as the max contacts are retrieved the oldest retrieved contact will scroll off
the screen.
- Because there is not a lot of room to display information, in this gadget we are
only displaying phone contact information, there should be a Fly-Out that
should display all of the Outlook’s Contact information (Addresses, Contact mechanisms,
Email, etc)
- This Gadget should be able to be used on any computer and not restricted to in the
office use.
To build this Gadget, I used several code snippets and examples, which are listed
below:
- The first component is a JavaScript Auto-complete Textbox – This code I got from
the Code Project and its reference is below. This allows me to meet requirements
#1 and #2 above. Since Gadgets are basically web pages, the best way to provide
interactive content is to use JavaScript. This is a nice JavaScript auto-complete
textbox that is easy to use and has nice features for filtering on key commands.
jsactb
- The second component is a .NET Interop for Gadgets assembly – This code, I also
got from the Code Project and is reference below. This component allows you
to write code in .NET and let you call it through JavaScript. Since Gadgets
are simple web pages, they cannot natively use compiled .NET code, you must provide
an Interop layer, so that the JavaScript can call out to a Com component.
Since I needed to work with Outlook and retrieve information from Exchange, I wanted
to use .NET to write this code. I find that using .NET to write this code
is easier than straight JavaScript. That is where this component and example
comes into play.
GadgetInterop
- The third and final component is to use WebDAV. This allows you to query Microsoft
Exchange by using similar technology as Outlook Web Access (OWA). I used several
examples from the web to learn how to do this and this allowed me to meet requirements
#3 and #6 above. These references are listed below.
exchange_webdav_examples
aa123736.aspx
- The rest of the code was taken from examples and walkthroughs on how to build Gadgets.
This allowed me to meet the remander of the requirements listed above. Below
is a great link for building Gadgets.
ms723694.aspx
As you can see in the pictures below, the gadget is fairly basic, but provides a
good example of how to build Gadgets using Visual Studio .NET as well as integrate
with the Exchange Store (Outlook Web Access). I hope that you found this Blog
useful, and as always, I welcome your comments.
To download the gadget and source, click on the links below.
Outlook Contact Gadget (after download,
strip the .zip from the file and install)
Outlook Contact Gadget c# Source Code
|
|
This image above shows the Gadget Selector screen. This is where you can drag and
drop the Outlook Contact Gadget onto the SideBar
|
|
The image above is used to set the settings for the gadget. This is accessed by
hovering over the gadget, once it is on the sidebar, and clicking on the little
wrench icon. There are 4 settings that must be set:
- UserID - This is your domain user id
used to log you into Outlook Web Access (OWA)
- Password - This is your domain account
password
- Domain - This is the domain your user
id and password needs to be validated against
- Outlook Web Access URL - this is the
OWA url. This can be and is usually https://smtp....
|
|
|
The image on the left shows the gadgets dynamic drop down list. This list is pulled
from your OWA contacts. As you type, it filters the list automatically. You can
also use the arrow keys and mouse to select a persons name.
|
|
|
|
The image on the right shows the gadget after selecting 3 different contacts. This
list will be rolling, so as you select another user the last user in the list will
fall off.
|
|
|
|
What the below image shows is the Gadget Flyout Window. This dialog gives you additional
details on the contact selected from the main screen. You can get to this by simply
clicking, underneath the contacts name in the main gadget (On the phone numbers
).
|

|
|