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

'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;
}

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.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.