Enhancing CRM Integration: Building an MS Outlook Add-In with the Microsoft Graph API
In these articles, I will focus on integrating an Outlook add-in with a CRM system using the Graph API. The task we are aiming to complete is being able to save an email (as an EML file) from a user’s inbox into a CRM system (or any other system for that matter!) via an Outlook add-in. Writing an Outlook add-in combined with the Graph API that performs this task is far more complex than one would expect!
This article is a technical primer on this and contains links to detailed documentation from Microsoft. It is also the first of a three-part series; you can find parts two and three below.
How Can CRM Integration Help My Business?
As technology advances, leveraging powerful APIs like Microsoft Graph allows developers to create tailored solutions that meet the evolving needs of modern businesses.
Integrating Microsoft Office applications with CRM systems through the Microsoft Graph API opens up new possibilities for businesses seeking enhanced efficiency and data management. By building a custom add-in that seamlessly copies emails to a CRM system, organisations can ensure a more cohesive approach to customer interactions.
Understanding Add-Ins and Their Limitations
Add-ins are intended to provide small chunks of functionality embedded inside a Microsoft Office application (Outlook, Word, Excel, etc). As such, add-ins provide limited access to a user’s M365 / Outlook.com mailbox. For example, an add-in cannot produce an email’s .eml (full MIME) content nor provide access to the bytes of files attached to the email.
Fortunately, Microsoft provides a method for an add-in to access this information via the Graph API.
Add-ins are “front-end” components in that they are composed of HTML, CSS, and JavaScript and run in a web viewer component (or iFrame) inside MS Office applications.
Understanding the Microsoft Graph API
The Microsoft Graph API is a comprehensive platform that allows developers to access a wide range of Microsoft 365 services. It provides a unified endpoint to interact with data from Office 365, including emails, calendars, contacts, and more. Using the Microsoft Graph API, we can build a robust add-in that connects Microsoft Office applications, specifically Outlook, with CRM systems.
In this case, we will look at creating an add-in with a “back-end” API that uses the Microsoft Graph API to access more details than are available in the add-in alone. Generally, your Graph API code will run on the server-side and be written in a language like C#. So, your components will be:
| Component | Location | Example Languages |
| Add-in | Client-side | HTML, CSS, JavaScript, typescript |
| Back-End | Server-side | C#, Java etc |
| Graph API | Hosted by Microsoft | Either an SDK or raw HTTP calls |
Microsoft provides Graph SDKs for some popular programming languages:
You can also call the Graph API HTTP endpoints yourself, although you must implement your own retry logic (e.g., Polly).
Programming with the Graph API is reasonably well-documented. For example, an API call to retrieve a user’s messages from their inbox would look like this HTTP GET:
https://graph.microsoft.com/v1.0/me/messages
If you want to experiment with Graph API, try out the Graph API explorer and explore its capabilities.
| Top Tip! Don’t mess around with the Graph API on your real email account! Instead, sign up for free for the Microsoft Office Developer program. With this free-of-charge platform, you get 50 enterprise users for test and development purposes. |
Setting Up the Development Environment
To get started, ensure that you have a development environment ready. Install Visual Studio or Visual Studio Code, and create a new Office add-ins project. Familiarise yourself with the Microsoft Graph API documentation to understand the available endpoints and authentication mechanisms.
We generally recommend using the following stack for the smoothest development experience:
| Component | Technology |
| Front End | HTML, CSS, JavaScript Visual Studio Code Yeoman Generator (use “Office Add-in Task Pane project supporting single sign-on”) |
| Server-Side | Visual Studio Pro / Enterprise .Net 6 (or the latest LTS release) Asp. Net Code C#Graph API C# SDK |
Initialise the Project
Start by creating a new Office add-in project and configuring it for Outlook. This will provide the foundation for your integration. As mentioned later on, use the Yeoman generator for this.
Use the “Office Add-in Task Pane project supporting single sign-on” option and pick your preferred language, such as JavaScript.
Initialising the server-side is as easy as picking your preferred Visual Studio web API template. Install Graph API via Nuget:
dotnet add package Microsoft.Graph
When implementing this kind of structure, we recommend creating a “back end for the front end” (BFF) for the add-in on the server-side. This provides a clean separation between your core CRM and add-in systems. So, in my recommendation, the add-in consists of a client-side component (in JavaScript) and a server-side component (in C# or your preferred server-side tech stack).
| Top Tip! Graph API uses an access_token (provided by an OAuth flow) to access resources. You should not implement client-side (JavaScript) code directly accessing Graph API. Always do this securely on your server-side and pass the access token to the server-side code. |
As a reminder, this is the first of a three-part series; you can find parts two and three below.
If you are interested in working with McKenna Consultants on your Outlook add-in and CRM integration project, please get in touch with us today.
