Welcome!

Blog Feed Post

Create an Office AddIn with Ionic Framework

If you want to build an Office AddIn for Word, Excel, or PowerPoint, all you really need to know is a little HTML and JavaScript.  Since Ionic Framework is built with HTML and JavaScript, it actually makes a great fit for hosting an Office AddIn.  In fact, task pane apps have a very similar shape to your mobile phone (long and narrow) so the UX elements that Ionic provides work pretty well there.  Here's an example of my Word AddIn, BrewZap menus.  It creates paper menus for subscribing breweries using the menus they manage directly from their mobile app on the BrewZap platform.

Screen Shot 2018-01-16 at 12.19.37 PM

Getting started with the manfiest

An Office AddIn is essentially just a manifest XML file that tells Office the location of your web application.  You'll want to start with one of the existing manifest examples otherwise you may be missing components required to get your AddIn published in the Office Store.  You will need to provide a link to your web application as well as icons in the size of 12x12, 32x32, and 80x80.  Look through the example manifests and you should have what you need to get started.  I recommend creating two manifests: one for debugging locally and one for production use.  When you debug locally, you can simply run ionic serve and load the AddIn from the AddIns menu in Word (or whatever app you are targeting).

Creating your Ionic app

Create an Ionic app using ionic start and selecting the appropriate options.  I used the tab template and it works pretty well.  Once you project is created, you can start adding your code.  First, we add the reference to the office.js library to your index.html.  The Office Store requires you serve it from the CDN.

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

Depending on what you are doing, you may actually have to load jQuery as well.  I know that seems odd in an Ionic app.  Once you have your scripts registered, you are ready to start writing some content into your Word document.  The Word AddIn example has some easy snippets you can leverage

function insertHtml() {
     Word.run(function (context) {

        // Create a proxy object for the document.
         var thisDocument = context.document;

        // Queue a command to get the current selection.
         // Create a proxy range object for the selection.
         var range = thisDocument.getSelection();

        // Queue a command to replace the selected text.
         range.insertText('"<b>Hello World!</b>."\n', Word.InsertLocation.replace);

        // Synchronize the document state by executing the queued commands,
         // and return a promise to indicate task completion.
         return context.sync().then(function () {
             console.log('Added html.');
         });
     })
         .catch(function (error) {
             console.log('Error: ' + JSON.stringify(error));
             if (error instanceof OfficeExtension.Error) {
                 console.log('Debug info: ' + JSON.stringify(error.debugInfo));
             }
         });
}

I find the easiest way to apply formatting in your word document is to use HTML.  Word will interpret it appropriately and format your content.

Testing your app

You can develop Office AddIns in Windows, OS X, an iPad, or in the browser with Word Online.  The same API works for all hosts of your application.  However, you need to pay attention to which API you use because some are supported in different versions of the Office client (2013 vs. 2016).  You need to test them your AddIn on all platforms to verify that it works correctly.  Windows of all platforms gave me the most trouble because Internet Explorer gets used as the backend for Office AddIns.  I also had some issue with the formatting on some inputs and they didn't render correctly in Word 2016.

Deploying your app

You'll need to deploy the code for your app somewhere so that you can publish your app to the store.  This entails adding the browser platform to cordova and then doing a production build.  You can read my steps on how to run an Ionic PWA using Azure Web Sites for more details.  If you aren't hosting in Azure, the steps are pretty familiar still.  To do your final build for production, you will run the following command.

ionic cordova build browser --prod --release

You'll then copy the contents of your platform/browser/www/build folder to your production server.  Now update your manifest to point to that new server location and you're ready to go.  Once you validate it works, you can begin the Office Store submission process to get your app in the store.

Here is what my app looks like after it has inserted a table listing the beer menu at a restaurant.

Screen Shot 2018-01-16 at 12.30.24 PM

Sorry for the lack of code formatting today.  I don't have a working solution to post code effectively currently.  Once I scrub some of the code, I'll post a repo with the complete solution as well.

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is an independent consultant specializing in Cloud technologies such as Azure and Office 365. He also specializes in mobile development. Corey serves as the product manager for two cloud-first mobile app platforms: BrewZap and HappenZap.

Latest Stories
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, whic...
Sometimes I write a blog just to formulate and organize a point of view, and I think it’s time that I pull together the bounty of excellent information about Machine Learning. This is a topic with which business leaders must become comfortable, especially tomorrow’s business leaders (tip for my next semester University of San Francisco business students!). Machine learning is a key capability that will help organizations drive optimization and monetization opportunities, and there have been some...
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, provided a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to oper...
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, discussed how data centers of the future will be managed, how the p...
"Storpool does only block-level storage so we do one thing extremely well. The growth in data is what drives the move to software-defined technologies in general and software-defined storage," explained Boyan Ivanov, CEO and co-founder at StorPool, in this SYS-CON.tv interview at 16th Cloud Expo, held June 9-11, 2015, at the Javits Center in New York City.
ChatOps is an emerging topic that has led to the wide availability of integrations between group chat and various other tools/platforms. Currently, HipChat is an extremely powerful collaboration platform due to the various ChatOps integrations that are available. However, DevOps automation can involve orchestration and complex workflows. In his session at @DevOpsSummit at 20th Cloud Expo, Himanshu Chhetri, CTO at Addteq, will cover practical examples and use cases such as self-provisioning infra...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory? In her Day 2 Keynote at @DevOpsSummit at 21st Cloud Expo, Aruna Ravichandran, VP, DevOps Solutions Marketing, CA Technologies, was jo...
As Marc Andreessen says software is eating the world. Everything is rapidly moving toward being software-defined – from our phones and cars through our washing machines to the datacenter. However, there are larger challenges when implementing software defined on a larger scale - when building software defined infrastructure. In his session at 16th Cloud Expo, Boyan Ivanov, CEO of StorPool, provided some practical insights on what, how and why when implementing "software-defined" in the datacent...
Blockchain. A day doesn’t seem to go by without seeing articles and discussions about the technology. According to PwC executive Seamus Cushley, approximately $1.4B has been invested in blockchain just last year. In Gartner’s recent hype cycle for emerging technologies, blockchain is approaching the peak. It is considered by Gartner as one of the ‘Key platform-enabling technologies to track.’ While there is a lot of ‘hype vs reality’ discussions going on, there is no arguing that blockchain is b...
Blockchain is a shared, secure record of exchange that establishes trust, accountability and transparency across business networks. Supported by the Linux Foundation's open source, open-standards based Hyperledger Project, Blockchain has the potential to improve regulatory compliance, reduce cost as well as advance trade. Are you curious about how Blockchain is built for business? In her session at 21st Cloud Expo, René Bostic, Technical VP of the IBM Cloud Unit in North America, discussed the b...
You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a way that makes the public cloud a non-starter. You’re looking at private cloud solutions based on hyperconverged infrastructure, but you’re concerned with the limits inherent in those technologies.
Is advanced scheduling in Kubernetes achievable?Yes, however, how do you properly accommodate every real-life scenario that a Kubernetes user might encounter? How do you leverage advanced scheduling techniques to shape and describe each scenario in easy-to-use rules and configurations? In his session at @DevOpsSummit at 21st Cloud Expo, Oleg Chunikhin, CTO at Kublr, answered these questions and demonstrated techniques for implementing advanced scheduling. For example, using spot instances and co...
The use of containers by developers -- and now increasingly IT operators -- has grown from infatuation to deep and abiding love. But as with any long-term affair, the honeymoon soon leads to needing to live well together ... and maybe even getting some relationship help along the way. And so it goes with container orchestration and automation solutions, which are rapidly emerging as the means to maintain the bliss between rapid container adoption and broad container use among multiple cloud host...
The cloud era has reached the stage where it is no longer a question of whether a company should migrate, but when. Enterprises have embraced the outsourcing of where their various applications are stored and who manages them, saving significant investment along the way. Plus, the cloud has become a defining competitive edge. Companies that fail to successfully adapt risk failure. The media, of course, continues to extol the virtues of the cloud, including how easy it is to get there. Migrating...
Imagine if you will, a retail floor so densely packed with sensors that they can pick up the movements of insects scurrying across a store aisle. Or a component of a piece of factory equipment so well-instrumented that its digital twin provides resolution down to the micrometer.