Edit

Module extension Outlook add-ins

  • Article

Module extension add-ins appear in the Outlook navigation bar, right alongside mail, tasks, and calendars. A module extension isn't limited to using mail and appointment information. You can create applications that run inside Outlook to make it easy for your users to access business information and productivity tools without ever leaving Outlook.

Tip

Instead of module extensions, create personal tab apps that open in Outlook to provide a more modern and convenient solution. With personal tab apps, your users will have access to business critical data and productivity tools not just in Outlook, but across Microsoft 365 applications, including Microsoft Teams, and various platforms.

Supported clients and manifests

To create and run module extension add-ins, you must:

Open a module extension

To open a module extension, navigate to the Outlook navigation bar, select More Apps, then choose the module extension add-in.

Available modules and module extension add-ins in the More Apps flyout.

Tip

In older versions of Outlook on Windows, the navigation bar appears at the bottom of the window. Access to a module extension varies depending on the layout of the navigation bar and the number of available module extensions.

  • If the user has compact navigation selected, the navigation bar has an icon that shows an extension is loaded.

    Icons of the modules and add-ins displayed in a compact navigation bar.

  • If the user isn't using compact navigation, the navigation bar will display the name of the add-in.

    The names of the modules and add-ins shown in an expanded navigation bar.

  • If more than one add-in is loaded, the Add-ins options is displayed in the navigation bar. Select Add-ins, then choose the add-in you want to use.

    The Add-ins option displayed in the navigation bar if more than one add-in is loaded.

Configure a module extension

When you select a module extension add-in, Outlook replaces the built-in module with your custom module so that you can interact with the add-in. You can use some of the features of the Outlook JavaScript API in your add-in. APIs that logically assume a specific Outlook item, such as a message or appointment, don't work in module extensions. The module can also include function commands in the Outlook ribbon that interact with the add-in's page. To facilitate this, your function commands must call the Office.onReady or Office.initialize method and the Event.completed method.

To test and learn how to configure a module extension, see the Office Add-ins module extension sample.

The user interface of a sample module extension.

Example

The following is a section of a manifest file that defines a module extension.


<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides"
                  xsi:type="VersionOverridesV1_0">
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1"
                    xsi:type="VersionOverridesV1_1">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <!-- Sets the URL of the JavaScript file that contains the code to
               run the operations of a module extension add-in. -->
          <FunctionFile resid="residFunctionFileUrl"/>
          <!--Configures the add-in as a module extension. -->
          <ExtensionPoint xsi:type="Module">
            <SourceLocation resid="residExtensionPointUrl"/>
            <Label resid="residExtensionPointLabel"/>
            <CommandSurface>
              <CustomTab id="idTab">
                <Group id="idGroup">
                  <Label resid="residGroupLabel"/>
                  <!-- Adds the module extension to the Outlook navigation bar. -->
                  <Control xsi:type="Button" id="group.changeToAssociate">
                    <Label resid="residChangeToAssociateLabel"/>
                    <Supertip>
                      <Title resid="residChangeToAssociateLabel"/>
                      <Description resid="residChangeToAssociateDesc"/>
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="residAssociateIcon16"/>
                      <bt:Image size="32" resid="residAssociateIcon32"/>
                      <bt:Image size="80" resid="residAssociateIcon80"/>
                    </Icon>
                    <Action xsi:type="ExecuteFunction">
                      <FunctionName>changeToAssociateRate</FunctionName>
                    </Action>
                  </Control>
                </Group>
                <Label resid="residCustomTabLabel"/>
              </CustomTab>
            </CommandSurface>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="residAssociateIcon16"
                  DefaultValue="https://localhost:3000/assets/associate-16.png"/>
        <bt:Image id="residAssociateIcon32"
                  DefaultValue="https://localhost:3000/assets/associate-32.png"/>
        <bt:Image id="residAssociateIcon80"
                  DefaultValue="https://localhost:3000/assets/associate-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="residFunctionFileUrl"
                DefaultValue="https://localhost:3000/module.html"/>
        <bt:Url id="residExtensionPointUrl"
                DefaultValue="https://localhost:3000/module.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="residExtensionPointLabel"
                    DefaultValue="Billable Hours"/>
        <bt:String id="residGroupLabel"
                    DefaultValue="Change billing rate"/>
        <bt:String id="residCustomTabLabel"
                    DefaultValue="Billable hours"/>
        <bt:String id="residChangeToAssociateLabel"
                    DefaultValue="Associate Rate"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residChangeToAssociateDesc"
                    DefaultValue="Change to the associate billing rate: $127/hr"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</VersionOverrides>

See also