How To Create An Add-in In Outlook Using ASP.NET

While we are talking about Add-ins let's first understand 

What is an office Add-in?

To extend the functionality of Office, we build an Office add-in. It's basically a webpage that's hosted in an Office application such as Excel, Word, Outlook, and PowerPoint. Your app can add functionality to documents, worksheets, email messages, appointments, presentations, and projects.

You can sell your app in the Office Store. The Office Store makes it easy to monetize your add-ins, manage updates, and track telemetry. You can also publish your app to users through an app catalog in SharePoint, or on Exchange Server.

In my earlier articles, we learned how to create Word Add-ins using VSTO and how to use them. Here are the links to those articles

• https://www.c-sharpcorner.com/article/how-to-create-custom-ribbon-in-microsoft-word-using-vsto-add-in/
• https://www.c-sharpcorner.com/article/working-on-microsoft-word-content-using-vsto-add-in/

Add-ins in Outlook are programs or utilities that help you automate tasks when you view or create messages.

VSTO add-ins can be created for outlook as well. However, the limitation of using the VSTO add-ins is that those work only in Desktop versions of office applications. They don't work on web versions of office apps.

You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. 

In this article, we are going to learn how to create a basic Outlook Addin using ASP.NET, we will also learn the project structure and how to locate and run the add-ins in the web and desktop versions of outlook.

Let's start with building our first Outlook Add-in using Visual Studio.

Outlook Add-in using Visual Studio

1. Open Visual Studio (I have been using Visual Studio 2022) and Create a new project

In the templates, filter outlook add-in

You would notice that various available types of Outlook Add-in are shown including VB and C# versions; each in VSTO and Web.

2. Select C# "Outlook Web Add-in" and click on Next. Give the name of the project and select a folder.

Notice that this template is using .NET Framework 4.8

3. A solution with two projects gets created and the file MessageRead.html will open in Visual Studio.

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.

4. Let's build the project and run it. When you run it, it will prompt for the Exchange email account username and password.

Provide your outlook credentials and click on Connect, it will then open Outlook on the web. Provide your office creds in the browser, if requested.

5. To locate the Add-in, click on any email and go to the top right corner of the email. Click on the Addins button there.

5.1 If the add-in isn't appearing in the window above, you can click on Get add-ins button at the bottom right corner in the same window above. 5.2 Select Add from File... like below

5.3 Select the location of manifest file from bin->debug of manifest project and select the Menifest.xml file like below

5.4 Click on install in the next window

Post this, the add-in will start appearing in the add-ins window. Alternatively, you can also get/open the add-in from the Home tab. Click on the Get Add-in button as shown below.

In the Get Add-in window, click on my Add-ins tab and go to the bottom, it will show that our newly created add-in is already appearing as added in Custom Add-ins section. If it is not present, you can click on "+ Add a custom add-in" link

6. If you would like to get more details about the add-in. Go to Home tab -> Get Add-ins -> click on SampleOutlookAddin, it will show more details like provider, description, etc.

7. Now let's see what the add-in is doing. Click on any email and go to the top right corner of the email. Click on the Addins button there and click on the add-in "SampleOutlookAddin" button. It shows the email properties as below.

This add-in is selecting the properties of the email and shows on the page on the right pane.

8. Let's try to change the project's manifest a bit and see the effects of the changes.

8.1 I am changing the manifest XML file to have the new names for ProviderName, DisplayName, Description, and SupportUrl like below. You can copy and paste the below contents in SampleOutlookAddin.xml.

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:ce44715c-8c4e-446b-879c-ea9ebe0f09c8-->
<OfficeApp 
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" 
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" 
          xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" 
          xsi:type="MailApp">

  <!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
  <Id>f9bb39cd-11b4-400c-b855-d04f42e88bd2</Id>

  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <Version>1.0.0.0</Version>
  <ProviderName>Binaryroots</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="Outlook Add-in" />
  <Description DefaultValue="This is a test for outlook Add-in"/>
  <IconUrl DefaultValue="~remoteAppUrl/Images/icon64.png"/>

  <SupportUrl DefaultValue="https://binaryroots.com/" />
  <!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
  </AppDomains>
  <!--End Basic Settings. -->
  
  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1" />
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="~remoteAppUrl/MessageRead.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>

  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox" />
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">

        <DesktopFormFactor>
          <!-- Location of the Functions that UI-less buttons can trigger (ExecuteFunction Actions). -->
          <FunctionFile resid="functionFile" />

          <!-- Message Read -->
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <!-- Use the default tab of the ExtensionPoint or create your own with <CustomTab id="myTab"> -->
            <OfficeTab id="TabDefault">
              <!-- Up to 6 Groups added per Tab -->
              <Group id="msgReadGroup">
                <Label resid="groupLabel" />
                <!-- Launch the add-in : task pane button -->
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="paneReadButtonLabel" />
                  <Supertip>
                    <Title resid="paneReadSuperTipTitle" />
                    <Description resid="paneReadSuperTipDescription" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon16" />
                    <bt:Image size="32" resid="icon32" />
                    <bt:Image size="80" resid="icon80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="messageReadTaskPaneUrl" />
                  </Action>
                </Control>
                <!-- Go to http://aka.ms/ButtonCommands to learn how to add more Controls: ExecuteFunction and Menu -->
              </Group>
            </OfficeTab>
          </ExtensionPoint>
          <!-- Go to http://aka.ms/ExtensionPointsCommands to learn how to add more Extension Points: MessageRead, AppointmentOrganizer, AppointmentAttendee -->
        </DesktopFormFactor>
      </Host>
    </Hosts>

    <Resources>
      <bt:Images>
        <bt:Image id="icon16" DefaultValue="~remoteAppUrl/Images/icon16.png"/>
        <bt:Image id="icon32" DefaultValue="~remoteAppUrl/Images/icon32.png"/>
        <bt:Image id="icon80" DefaultValue="~remoteAppUrl/Images/icon80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="functionFile" DefaultValue="~remoteAppUrl/Functions/FunctionFile.html"/>
        <bt:Url id="messageReadTaskPaneUrl" DefaultValue="~remoteAppUrl/MessageRead.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="groupLabel" DefaultValue="My Add-in Group"/>
        <bt:String id="customTabLabel"  DefaultValue="My Add-in Tab"/>
        <bt:String id="paneReadButtonLabel" DefaultValue="Display all properties"/>
        <bt:String id="paneReadSuperTipTitle" DefaultValue="Get all properties"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="paneReadSuperTipDescription" DefaultValue="Opens a pane displaying all available properties. This is an example of a button that opens a task pane."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

8.2 after saving the file, when I open the details of the add-in from Home -> Get Add-ins (step 6). It will show the new values.

9. if you would like to open the add-in in the desktop app, you can change the property (click F4 on the manifest project to open the properties pane) from "Start Action" to "Office Desktop Client" from "Google Chrome" as shown below. 

Build the solution and run it

10. On the desktop, the add-in appears like below.

Notice the label of the Add-in button, the name of the group where the button appears, SuperTip title. These all come from the manifest file from the section "DesktopFormFactor", this section - in turn is referring to ShortStrings resources specified at the bottom of the same file.

That's it... our first outlook add-in is ready. 

Summary

In this article, we learned, what are add-ins, how to create outlook add-ins in asp.net, how to install and how to use them in web and desktop versions of outlook.

In my next article, we will learn how to customize the add-in further using client-side scripting and server-side code.

Thanks for reading this article, if you have any suggestions, please add them in the comments section. I would love to hear valuable feedback from you.