×

iFour Logo

How to create a simple Outlook Add-in using C#?

Kapil Panchal - August 30, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
How to create a simple Outlook Add-in using C#?

What is Add-in in Outlook?


In Outlook, Add-ins are programs that help us to automate certain tasks according to our ease like when we view or create messages.

i.e., Trello, Skype, Zoom, Evernote, etc.

Outlook Object Model


When we are talking about Outlook add-in, we must know the basics of the following objects:

  1. Application: The Application is used to represent the Outlook application and it is the highest level object in the model. This object is the starting point to arrive at the other objects of the model.
  2. Explorer: The Explorer is used to display the content of the folder like email, message, appointment, or task.
  3. Inspector: The Inspector is used to represent a window to display items like email, message, appointment, or task.
  4. MAPIFolder: The MAPIFolder is used to represent a folder that contains email, message, appointment, or task.
  5. MailItem: The MailItem is used to represent an email message.
  6. AppointmentItem: The AppointmentItem is used to represent a meeting, an appointment, schedule, or calendar meeting.
  7. TaskItem: The TaskItem is used to represent a task performed within a period.
  8. ContactItem: The ContactItem is used to represent a contact in the contact folder.

Creating Add-in


We can create an Add-in either by using Yeoman Generator or Visual Studio. The Yeoman Generator creates a Node.js application that is managed with code editors like Visual Studio Code, Atom, Sublime Text, etc.

Here we will learn how to make an add-in using Visual Studio step by step.

First, we have to install Visual Studio with the Office development workload or SharePoint development workload installed.

Now, Open the Visual Studio Menu bar and follow the below steps:

File -> New -> Project

In the project list, select Outlook Web Add-in which is situated under the Visual C# or VB (Visual Basic) under the expanded Office/SharePoint submenu.

Name the project and finish the setup.

Visual Studio will create a solution and its two projects will appear in Solution Explorer. The file MessageRead.html will open in Visual Studio.

After completion of the setup wizard, we will be able to see the Solution of that project created by Visual Studio that contains two projects:

  1. Add-in Project: Usually, it contains an XML manifest file, which has all the settings that describe us about add-in. The settings at that place help the outlook and office applications determine when our add-in should be activated and where the add-in should appear. Visual Studio will generate the contents of this file for us so we can run the project and use our add-in right at that moment. We can change these settings at any time by editing the XML file.
  2. Web Application Project: Usually, it contains the pages of our add-in, including all the files and references that we need to develop the outlook and office-aware HTML and JavaScript pages. While we develop our add-in, Visual Studio will host the web application on our local IIS Server. When we are ready to publish the add-in, we will need to deploy the web application project to a web server.

Now, we will update the code:

'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
            loadItemProps(Office.context.mailbox.item);
        });
    });

    function loadItemProps(item) {
        // Write message property values to the task pane
        $('#item-id').text(item.itemId);
        $('#item-subject').text(item.subject);
        $('#item-internetMessageId').text(item.internetMessageId);
        $('#item-from').html(item.from.displayName + " <" + item.from.emailAddress + ">");
    }
})();
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

td.prop-val {
    word-break: break-all;
}

.content-main {
    margin: 10px;
}
  1. MessageRead.html file will specify the HTML that will be rendered in the add-in’s task pane. In this file, we will replace the
  2. Next, we will open the file MessageRead.js in the web application project’s root directory. This file specifies the script for the add-in. Replace the entire contents with the given code snippet.
  3. Next, we will open the file MessageRead.css in the web application project’s root directory. This file specifies the custom style for the add-in. Replace the entire contents with the given code snippet.

element with the following code snippet:

Message properties

Property Value
Id  
Subject  
Message Id  
From  

Next, we will update the manifest.

  • First, open the XML manifest file in the add-in project. The file will define the add-in’s settings and capabilities.
  • The ProviderName element will have a placeholder value, we will replace it with our name.
  • The DefaultValue attribute of the DisplayName element will have a placeholder. Replace it with the My Office Add-in keyword
  • The DefaultValue attribute of the Description element will have a placeholder. Replace it with the My First Outlook add-in keyword.
  • Next, save the file.
    ...
    iFour Technolab
    en-IN
    
    
    
    ...
    

Testing


  1. Now, we will use Visual Studio to test the newly created Outlook add-in by pressing the F5 button or choosing the Start button. The add-in will be hosted on local IIS.
  2. Next, we will open the Connect to Exchange email account dialog box, enter the email address and password for the Microsoft Outlook account then choose Connect. When the https://www.outlook.com login page will open in the browser, we will sign in to the email account with the same credentials as we entered previously.
  3. In Outlook, we will select or open any message.
  4. Inside the message, we will find the ellipsis for the overflow menu containing the add-in button.
  5. In the overflow menu, we can locate the add-in button.
  6. When we click the button, we will be able to see the add-in’s task pane.

Conclusion


Here, we discussed Add-ins in Microsoft Outlook and their basic objects. We also discussed how to create one and at the end, we also tested the add-in in the live application.

How to create a simple Outlook Add-in using C#? Table of Content 1. What is Add-in in Outlook? 2. Outlook Object Model 3. Creating Add-in 4. Testing 5. Conclusion What is Add-in in Outlook? In Outlook, Add-ins are programs that help us to automate certain tasks according to our ease like when we view or create messages. i.e., Trello, Skype, Zoom, Evernote, etc. Outlook Object Model When we are talking about Outlook add-in, we must know the basics of the following objects: Application: The Application is used to represent the Outlook application and it is the highest level object in the model. This object is the starting point to arrive at the other objects of the model. Explorer: The Explorer is used to display the content of the folder like email, message, appointment, or task. Inspector: The Inspector is used to represent a window to display items like email, message, appointment, or task. MAPIFolder: The MAPIFolder is used to represent a folder that contains email, message, appointment, or task. MailItem: The MailItem is used to represent an email message. AppointmentItem: The AppointmentItem is used to represent a meeting, an appointment, schedule, or calendar meeting. TaskItem: The TaskItem is used to represent a task performed within a period. ContactItem: The ContactItem is used to represent a contact in the contact folder. Creating Add-in We can create an Add-in either by using Yeoman Generator or Visual Studio. The Yeoman Generator creates a Node.js application that is managed with code editors like Visual Studio Code, Atom, Sublime Text, etc. Here we will learn how to make an add-in using Visual Studio step by step. First, we have to install Visual Studio with the Office development workload or SharePoint development workload installed. Now, Open the Visual Studio Menu bar and follow the below steps: File -> New -> Project In the project list, select Outlook Web Add-in which is situated under the Visual C# or VB (Visual Basic) under the expanded Office/SharePoint submenu. Name the project and finish the setup. Visual Studio will create a solution and its two projects will appear in Solution Explorer. The file MessageRead.html will open in Visual Studio. Read More: Javascript Based Excel Office Add-in In Visual Studio After completion of the setup wizard, we will be able to see the Solution of that project created by Visual Studio that contains two projects: Add-in Project: Usually, it contains an XML manifest file, which has all the settings that describe us about add-in. The settings at that place help the outlook and office applications determine when our add-in should be activated and where the add-in should appear. Visual Studio will generate the contents of this file for us so we can run the project and use our add-in right at that moment. We can change these settings at any time by editing the XML file. Web Application Project: Usually, it contains the pages of our add-in, including all the files and references that we need to develop the outlook and office-aware HTML and JavaScript pages. While we develop our add-in, Visual Studio will host the web application on our local IIS Server. When we are ready to publish the add-in, we will need to deploy the web application project to a web server. Now, we will update the code: 'use strict'; (function () { Office.onReady(function () { // Office is ready $(document).ready(function () { // The document is ready loadItemProps(Office.context.mailbox.item); }); }); function loadItemProps(item) { // Write message property values to the task pane $('#item-id').text(item.itemId); $('#item-subject').text(item.subject); $('#item-internetMessageId').text(item.internetMessageId); $('#item-from').html(item.from.displayName + " "); } })(); html, body { width: 100%; height: 100%; margin: 0; padding: 0; } td.prop-val { word-break: break-all; } .content-main { margin: 10px; } MessageRead.html file will specify the HTML that will be rendered in the add-in’s task pane. In this file, we will replace the Next, we will open the file MessageRead.js in the web application project’s root directory. This file specifies the script for the add-in. Replace the entire contents with the given code snippet. Next, we will open the file MessageRead.css in the web application project’s root directory. This file specifies the custom style for the add-in. Replace the entire contents with the given code snippet. element with the following code snippet: Message properties Property Value Id   Subject   Message Id   From   Finding Best Outlook Add-in Development ?. CONTACT US Next, we will update the manifest. First, open the XML manifest file in the add-in project. The file will define the add-in’s settings and capabilities. The ProviderName element will have a placeholder value, we will replace it with our name. The DefaultValue attribute of the DisplayName element will have a placeholder. Replace it with the My Office Add-in keyword The DefaultValue attribute of the Description element will have a placeholder. Replace it with the My First Outlook add-in keyword. Next, save the file. ... iFour Technolab en-IN ... Testing Now, we will use Visual Studio to test the newly created Outlook add-in by pressing the F5 button or choosing the Start button. The add-in will be hosted on local IIS. Next, we will open the Connect to Exchange email account dialog box, enter the email address and password for the Microsoft Outlook account then choose Connect. When the https://www.outlook.com login page will open in the browser, we will sign in to the email account with the same credentials as we entered previously. In Outlook, we will select or open any message. Inside the message, we will find the ellipsis for the overflow menu containing the add-in button. In the overflow menu, we can locate the add-in button. When we click the button, we will be able to see the add-in’s task pane. Conclusion Here, we discussed Add-ins in Microsoft Outlook and their basic objects. We also discussed how to create one and at the end, we also tested the add-in in the live application.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

MySQL vs Azure SQL Database: Cost, Security, and Compatibility Considerations
MySQL vs Azure SQL Database: Cost, Security, and Compatibility Considerations

This blog is a continuation of MySQL vs Azure SQL Database – Part 1 , where we compared MySQL and Azure SQL databases. We learned how important it is to identify and evaluate client...

Is It Worth Using Azure With Power Platforms For Financial Business?
Is It Worth Using Azure With Power Platforms For Financial Business?

The era of traditional software development is fading; Azure Cloud and Power Platform services are taking charge to run businesses of the new age. When it comes to Financial business,...

Microsoft Power BI And PowerApps Development: Transforming The Healthcare Sector
Microsoft Power BI And PowerApps Development: Transforming The Healthcare Sector

If someone had told you just a few years ago that you’d soon develop mobile apps without writing a single line of code, you might not have believed them. Yes, or no? Today, over 7...