Search code examples
vue.jsoffice-jsexcel-addins

Can I have a website that also functions as a excel web addin with the officejs

I'm working on a project to upload data to a db from excel files. This is in vuejs. The plan is to also develop an in house excel web addin using office/excel js library.

So my question is:

Is it possible to just develop the web app and then later add the ability to load as an excel addin? This would be so that I can work with one codebase rather than two.

Looking in the docs/ guide (https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue) I guess there is no reason why I cannot load the below into a specific component which is loaded on demand and is only an allowed page when the office.js script tag loads correctly.

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

window.Office.initialize = () => {
      new Vue({
        render: h => h(App)
      }).$mount('#app');
    };

Anyone with some experience of this in either react/ angular/ vue might be useful

Thanks in advance!

Solution

  • Yes! This is possible, in the exact way that you're describing it. Because modern office add-ins are build with HTML, JS and CSS, it's really no different than any other web app.

    I'd encourage you to think of a few things before taking this road through; likely to save you some time down the line.

    • Add-ins have a very particular surface, require to be operational within a certain width / as opposed to a whole screen resolution. I'd strongly suggest you to test your web-app with that 300px width / make sure it's actually usable. Choosing a responsive framework isn't enough here - you'll have to think explicitly about how can you make your add-in more usable in that little space.
    • Testing - you may need to think a bit more on the testing since you'll have shared components which interact with office.js as well as living on the web-app. FYI - this is not hard, but just to watch out for.
    • The conditional loading / if office.js can't initialize successfully, your add-in shouldn't start.
    • Iterative development changing privacy requirements / while your web-app can just probe your users to accept more cookies; or show them some new rules for using your app, you'd have to re-submit your add-in manifest to add-in store for validation if you're changing privacy rules for your add-in.

    All in all - one codebase, two apps is possible.