CODEWITHSUNDEEP
xmloutlookadd-inoffice-js
Milush Karadimov
Milush Karadimov

Reputation: 23

Outlook Custom Add-In from XML Error

I have been working on an Outlook add-in that could be used both in the web app and in the desktop app. I followed this tutorial: Write your first Outlook add-in
I was able to get the add in to work in the web app, but I can't get it to load in the desktop app. When I import it, sometimes Outlook crashes or sometimes the add-in loads, but when I try to run it I get an error that says the add-in isn't setup properly. I tried debugging and the only information I managed to get was that there seemed to be an error in the Office.js file that my add-in uses, which I find very strange considering that this add-in works as expected in the web app.

Can you please give me any clues as to what might be wrong here? Thanks in advance! Here is the XML that I use to add my custom add-in to the Outlook apps:

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp">
    <Id>542385a1-816b-4b29-3f27-8d9bbc0ad244</Id>
    <Version>1.0.0.0</Version>
    <ProviderName>Some-Name</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <DisplayName DefaultValue="Some-Default-Value" />
    <Description DefaultValue="Some-Description-Value" />
    <IconUrl DefaultValue="Some-URL-Icon" />
    <HighResolutionIconUrl DefaultValue="Some-URL-Icon-HighRes" />
    <Hosts>
        <Host Name="Mailbox" />
    </Hosts>
    <Requirements>
        <Sets>
            <Set Name="MailBox" MinVersion="1.3" />
        </Sets>
    </Requirements>
    <FormSettings>
        <Form xsi:type="ItemEdit">
            <DesktopSettings>
                <SourceLocation DefaultValue="Add-In-Code-URL (HTML for 'home' page of the Add-In" />
            </DesktopSettings>
        </Form>
    </FormSettings>
    <Permissions>ReadWriteItem</Permissions>
    <Rule xsi:type="RuleCollection" Mode="Or">
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
    </Rule>
    <DisableEntityHighlighting>false</DisableEntityHighlighting>
</OfficeApp>

I want to use the add-in in Outlook 2016

Upvotes: 1

Views: 1046

Answers (1)

Marc LaFleur
Marc LaFleur

Reputation: 33094

You're add-in is running afoul of the 5 second window to initialize your add-in. Some clients (Outlook Web App) are less strict about adhering to this timeout than others (Outlook 2016 for Windows).

Here are a some of general tips:

Reference the Minimized Library from the CDN

Make sure you're referencing the proper script library from the CDN in the <head> section of every page: 

<script src="//appsforoffice.microsoft.com/lib/1/hosted/Office.js"
       type="text/javascript"></script>

In the code you provided you're referencing the office.debug.js. While this is a valid URI, the debug version will take longer to load than the minified version.

The office.js library dynamically loads additional libraries based on the client you're using. When you load the debug version of office.js, it will dynamically load the debug version of the platform specific scripts as well.

Given that this is working in some clients but not others, you're clearly right on the edge of that 5s window. So while this shouldn't be a big deal, it certainly wouldn't hurt to trip a few ms of network activity.

Assign Initialize Function Immediately

When an add-in launches, Office begins monitoring the initialize property. The timeout clock will continue to click until initialize has been assigned a valid function and Office has executed it.

In order to ensure this happens quickly, you should assign Office.initialize immediately following your <script> reference to Office.js:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script type="text/javascript">
    Office.initialize = function () {

    };
</script>

One often overlooked bit of Office.initialize is that it isn't a function call you're making, but rather a property you're assigning a function to. Office will call this as quickly as it can so it can validate your page is a valid add-in. Assigning a function to initialize has has almost no discernible impact on your add-in's performance on it's own. Which brings us to...

After Init, Wait for DOM

Always ensure your Office.initialize function waits for the DOM to populate before it does any "real work". This allows Office to wire everything up as quickly as possible but holds off execution of your add-in until your page is fully loaded. This is commonly done using JQuery's $(document).ready:

<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script type="text/javascript">
    Office.initialize = function () {
        $(document).ready(function () {
            initListeners();
            var config = getConfig();
            if (config) {
                sendTemplatesRequest();
            } else {
                initLogin();
            }
        });
    };
</script>

You're sample code does this correctly but you're app.js that contains your initialize method isn't referenced until the very end. This means everything in the DOM, including the other libraries you're calling, will need to fully load before initialize can be triggered.

You can (and should) lead all of your JS libraries at the bottom of the <body> but there are two exceptions: jquery and office.js should be loaded at the top of your <head> so they are loaded long before anything else.

You'll note in the code above I reference JQuery, then Office and finally the initialize function. These three items are the only up-front dependencies you have, everything else can be left at the bottom of the page.

Upvotes: 2

Related Questions