SYS-CON MEDIA Authors: Liz McMillan, Zakia Bouachraoui, Elizabeth White, William Schmarzo, Dana Gardner

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
Wasabi is the hot cloud storage company delivering low-cost, fast, and reliable cloud storage. Wasabi is 80% cheaper and 6x faster than Amazon S3, with 100% data immutability protection and no data egress fees. Created by Carbonite co-founders and cloud storage pioneers David Friend and Jeff Flowers, Wasabi is on a mission to commoditize the storage industry. Wasabi is a privately held company based in Boston, MA. Follow and connect with Wasabi on Twitter, Facebook, Instagram and the Wasabi blog...
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of San...
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 ...
Big Switch's mission is to disrupt the status quo of networking with order of magnitude improvements in network e ciency, intelligence and agility by delivering Next-Generation Data Center Networking. We enable data center transformation and accelerate business velocity by delivering a responsive, automated, and programmable software-dened networking (SDN) fabric-based networking solution. Traditionally, the network has been viewed as the barrier to data center transformation as legacy networkin...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
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...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups. As a result, many firms employ new business models that place enormous importa...
Updating DevOps to the latest production data slows down your development cycle. Probably it is due to slow, inefficient conventional data management practices to copy data between different developer and test environment. This problem doesn't scale as teams are adopting faster software release cycles. In this session, Dhiraj Sehgal in Product and Solution at Delphix, will talk about DevOps and cloud-focused strategies to update hundreds of developer and test copies with updates from a master...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereum.
Every organization is facing their own Digital Transformation as they attempt to stay ahead of the competition, or worse, just keep up. Each new opportunity, whether embracing machine learning, IoT, or a cloud migration, seems to bring new development, deployment, and management models. The results are more diverse and federated computing models than any time in our history. Unfortunately, there is no single deployment model that solves all of your business goals. You need to maintain the fl...
"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.
In his session at 21st Cloud Expo, Michael Burley, a Senior Business Development Executive in IT Services at NetApp, described how NetApp designed a three-year program of work to migrate 25PB of a major telco's enterprise data to a new STaaS platform, and then secured a long-term contract to manage and operate the platform. This significant program blended the best of NetApp’s solutions and services capabilities to enable this telco’s successful adoption of private cloud storage and launching o...
Digital transformation is about embracing digital technologies into a company's culture to better connect with its customers, automate processes, create better tools, enter new markets, etc. Such a transformation requires continuous orchestration across teams and an environment based on open collaboration and daily experiments. In his session at 21st Cloud Expo, Alex Casalboni, Technical (Cloud) Evangelist at Cloud Academy, explored and discussed the most urgent unsolved challenges to achieve fu...
When building large, cloud-based applications that operate at a high scale, it’s important to maintain a high availability and resilience to failures. In order to do that, you must be tolerant of failures, even in light of failures in other areas of your application. “Fly two mistakes high” is an old adage in the radio control airplane hobby. It means, fly high enough so that if you make a mistake, you can continue flying with room to still make mistakes. In his session at 18th Cloud Expo, Lee A...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...