A One Stop Solution to Deploying Office Add-Ins

What’s a set of common office tools that almost all of us have used at one point or another? Before you go scratching your head in search for answers, allow me to tell you. It’s the ever-so-helpful Microsoft Office Suite. Now, we’re are all aware of the macros that are available in tools like Microsoft Excel and may have used them programmatically to update tables, perform calculations and get fancy reports/charts etc. But how many of you have heard about Office Add-Ins?

Add-Ins are basically web solutions that can be developed in any Office Application and made available on Menus. Here’s a short read that will get you acquainted with the world of Office Add-Ins.

You can use Office Add-Ins to do almost anything that a webpage can do within a browser. With Add-Ins you can,

• Add new functionalities to Office clients
• Create interactive objects that can be embedded in Office documents

And more.

A prime example of Microsoft Add-Ins is Boomerang. It basically adds a number of useful features to Microsoft Outlook. It enables scheduling an email for a later date and time, pausing your inbox for when you need to concentrate on work, scheduling a follow-up reminder for sent emails, and much more. So, I’m sure you can see how Boomerang can add to the efficiency in your work-life.

Another example is XLTools.net Data Cleaning. This is an add-in that you would use for Microsoft Excel for when you have a messy Excel sheet filled with data, just calling out for some cleaning and organizing. With Data Cleaning you can skip the hassle of manual cleaning and directly avail data organized in a standard format that is easy to consume and manage.

These are just two examples from the top of my head. You will find a bounty of add-ins once you delve a little deeper into it.

On exploring a little bit, you will see that with Microsoft add-ins you can

• Perform AI/ML operations in Excel Add-In for data analysts and scientists
• Avail data analytics for the engineering teams
• Manage assets for heavy industries
• Search for media assets
• View the metadata of assets and products
• Open default Smart Documents for each asset and product

Now that you have a brief understanding of what Add-Ins are, let me tell you what I have learned from my experience in using them. One of the most common issues in realm of Office Add-Ins is proper deployment. In the document mentioned above, you will realize that links to development, testing, UI/UX, publishing are present. But, deployment checklists or steps are not explicitly mentioned. So, if you just go and deploy the solution like web app with default server configuration, it will not load.

To make your work easier and help you save some time on frantic research, I have chalked out some points which may prove to be useful.

You may be wondering why I directly jumped to deployment stage. The reason for this is that most of the development work involved is very similar to web application development.

However, the deployment is not same as web application deployment and there is no hard and fast guide for this. That’s where this blog will help you.

Take a look at the following block diagram from Microsoft to understand the topology of Office Add-Ins.

There are two components in this diagram apart from the Office application:

1. Manifest
2. Our web page

As you can see, there is no browser here. The container of our application is Office Add-In which doesn’t have any place to enter the URL or an option to go to web page. So, where do we start?

The start web page is mentioned in manifest file. However, there can be many entry points to application. All the entry points are attached to the CTA that appears as button on the menu and is mapped to the web page in the manifest file.

Navigations to other web pages are strictly through internal actions on respective pages.

At the deployment end, we have had our learnings and solutions when we first encountered the development project around Office Add-In. Here are some of them:

1. Generation of environment specific manifest file

   1. For this we preferred to have different versions of web pack files that come with yeoman generators. Each of this webpack has different variables as per its environment. For E.g.: Title, ManifestID, URLs, etc. We can then map npm scripts to generate a build through webpack. Here’s what it would look like:

“build:nightly”: “webpack -p –mode production –https false –config webpack.nightly.js”

2. Server Configuration

   1. Now, to ensure that the Office Add-In works seamlessly, there is an office.js file that is referenced in the script tag in index.html. Office.js has all the capabilities for Office Add-Ins to work but it is hosted on Microsoft CDN. Additionally, there are some more javascript and css files that are internally referenced in the Office.js. All these files are by default blocked on any of the application servers like Apache Tomcat, Nginx etc due to CORS policy. So, the Content-Security Policy has to be periodically updated to allow Microsoft CDNs and other locations. I am specifying some of them right here:

• https://telemetryservice.firstpartyapps.oaspapps.com
• https://staticsharepointonline.com
• https://appsforoffice.microsoft.com
• https://cdn.mxpnl.com
• https://api.mixpanel.com
• https://static2.sharepointonline.com

3. Office Online Support

   1. The server configuration stated above is enough to get Add-Ins working for the Desktop version of Office. But if we need it working on Office Online, there are some additional domains to be allowed

• https://*.sharepoint.com
• https://excel.officeapps.live.com

Nginx configuration for same would look like:

add_header Content-Security-Policy “default-src ‘self’ https://telemetryservice.firstpartyapps.oaspapps.com; font-src ‘self’ https://static2.sharepointonline.com; script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ https://appsforoffice.microsoft.com https://cdn.mxpnl.com https://api.mixpanel.com https://localhost:10001; connect-src ‘self’ ws://localhost wss://localhost; img-src ‘self’ data:; style-src ‘self’ ‘unsafe-inline’ https://localhost:10001 https://static2.sharepointonline.com; frame-ancestors ‘self’ https://*.sharepoint.com https://excel.officeapps.live.com”

4. Avoid environment specific builds

   1. There might be situation when API and UI are deployed on same server. There are no APIs deployed on different servers. In that case you need not generate development/production environment specific builds. Application URLs can be used to form the backend URL. This is available through existing Javascript functions like document.url

I would like to conclude by saying that there are many use cases of Office Add-Ins that can help leverage your administration, operations, analysts, and scientists’ capabilities through more integrated way of doing work with Office platform. We have developed this expertise with Add-Ins and deployed solutions in multiple domains to help our clients achieve their business goals. Development is one aspect, where there will be lot of help available but the deployment aspect is different for each organization and will need to crafted uniquely for different products.

Reach out to us at Nitor Infotech to learn more about our our services with Microsoft Add-Ins along with the solutions we have deployed till date to help our clients achieve their business goals.