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
Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throughout enterprises of all sizes. We are offering early bird savings...
"Calligo is a cloud service provider with data privacy at the heart of what we do. We are a typical Infrastructure as a Service cloud provider but it's been designed around data privacy," explained Julian Box, CEO and co-founder of Calligo, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
DXWorldEXPO LLC announced today that the upcoming DXWorldEXPO | DevOpsSUMMIT | CloudEXPO New York will feature 10 companies from Poland to participate at the "Poland Digital Transformation Pavilion" on November 12-13, 2018. Polish Digital Transformation companies which will exhibit at CloudEXPO | DevOpsSUMMIT | DXWorldEXPO include All in Mobile, dhosting, Cryptomage, Perfect Gym, Polcom, Apius Technologies, Aplisens, ELZAB SA, TELDAT, and Rebug.io.
Enterprises are universally struggling to understand where the new tools and methodologies of DevOps fit into their organizations, and are universally making the same mistakes. These mistakes are not unavoidable, and in fact, avoiding them gifts an organization with sustained competitive advantage, just like it did for Japanese Manufacturing Post WWII.
Whenever a new technology hits the high points of hype, everyone starts talking about it like it will solve all their business problems. Blockchain is one of those technologies. According to Gartner's latest report on the hype cycle of emerging technologies, blockchain has just passed the peak of their hype cycle curve. If you read the news articles about it, one would think it has taken over the technology world. No disruptive technology is without its challenges and potential impediments t...
There's no doubt that blockchain technology is a powerful tool for the enterprise, but bringing it mainstream has not been without challenges. As VP of Technology at 8base, Andrei is working to make developing a blockchain application accessible to anyone. With better tools, entrepreneurs and developers can work together to quickly and effectively launch applications that integrate smart contracts and blockchain technology. This will ultimately accelerate blockchain adoption on a global scale.
DXWorldEXPO LLC announced today that Nutanix has been named "Platinum Sponsor" of CloudEXPO | DevOpsSUMMIT | DXWorldEXPO New York, which will take place November 12-13, 2018 in New York City. Nutanix makes infrastructure invisible, elevating IT to focus on the applications and services that power their business. The Nutanix Enterprise Cloud Platform blends web-scale engineering and consumer-grade design to natively converge server, storage, virtualization and networking into a resilient, softwar...
Despite being the market leader, we recognized the need to transform and reinvent our business at Dynatrace, before someone else disrupted the market. Over the course of three years, we changed everything - our technology, our culture and our brand image. In this session we'll discuss how we navigated through our own innovator's dilemma, and share takeaways from our experience that you can apply to your own organization.
Founded in 2002 and headquartered in Chicago, Nexum® takes a comprehensive approach to security. Nexum approaches business with one simple statement: “Do what’s right for the customer and success will follow.” Nexum helps you mitigate risks, protect your data, increase business continuity and meet your unique business objectives by: Detecting and preventing network threats, intrusions and disruptions Equipping you with the information, tools, training and resources you need to effectively m...
Having been in the web hosting industry since 2002, dhosting has gained a great deal of experience while working on a wide range of projects. This experience has enabled the company to develop our amazing new product, which they are now excited to present! Among dHosting's greatest achievements, they can include the development of their own hosting panel, the building of their fully redundant server system, and the creation of dhHosting's unique product, Dynamic Edge.
The Transparent Cloud-computing Consortium (T-Cloud) is a neutral organization for researching new computing models and business opportunities in IoT era. In his session, Ikuo Nakagawa, Co-Founder and Board Member at Transparent Cloud Computing Consortium, will introduce the big change toward the "connected-economy" in the digital age. He'll introduce and describe some leading-edge business cases from his original points of view, and discuss models & strategies in the connected-economy. Nowad...
"DevOps is set to be one of the most profound disruptions to hit IT in decades," said Andi Mann. "It is a natural extension of cloud computing, and I have seen both firsthand and in independent research the fantastic results DevOps delivers. So I am excited to help the great team at @DevOpsSUMMIT and CloudEXPO tell the world how they can leverage this emerging disruptive trend."
For far too long technology teams have lived in siloes. Not only physical siloes, but cultural siloes pushed by competing objectives. This includes informational siloes where business users require one set of data and tech teams require different data. DevOps intends to bridge these gaps to make tech driven operations more aligned and efficient.
NanoVMs is the only production ready unikernel infrastructure solution on the market today. Unikernels prevent server intrusions by isolating applications to one virtual machine with no users, no shells and no way to run other programs on them. Unikernels run faster and are lighter than even docker containers.
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO Silicon Valley 2019 will cover all of these tools, with the most comprehensive program and with 222 rockstar speakers throughout our industry presenting 22 Keynotes and General Sessions, 250 Breakout Sessions along 10 Tracks, as well as our signature Power Panels. Our Expo Floor will bring together the leading global 200 companies throughout the world of Cloud Computing, DevOps, IoT, Smart Cities, FinTech, Digital Transformation, and all they entail. As ...