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
Evan Kirstel is an internationally recognized thought leader and social media influencer in IoT (#1 in 2017), Cloud, Data Security (2016), Health Tech (#9 in 2017), Digital Health (#6 in 2016), B2B Marketing (#5 in 2015), AI, Smart Home, Digital (2017), IIoT (#1 in 2017) and Telecom/Wireless/5G. His connections are a "Who's Who" in these technologies, He is in the top 10 most mentioned/re-tweeted by CMOs and CIOs (2016) and have been recently named 5th most influential B2B marketeer in the US. H...
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
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 ...
"We do one of the best file systems in the world. We learned how to deal with Big Data many years ago and we implemented this knowledge into our software," explained Jakub Ratajczak, Business Development Manager at MooseFS, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Today, we have more data to manage than ever. We also have better algorithms that help us access our data faster. Cloud is the driving force behind many of the data warehouse advancements we have enjoyed in recent years. But what are the best practices for storing data in the cloud for machine learning and data science applications?
All zSystem customers have a significant new business opportunity to extend their reach to new customers and markets with new applications and services, and to improve the experience of existing customers. This can be achieved by exposing existing z assets (which have been developed over time) as APIs for accessing Systems of Record, while leveraging mobile and cloud capabilities with new Systems of Engagement applications. In this session, we will explore business drivers with new Node.js apps ...
As Cybric's Chief Technology Officer, Mike D. Kail is responsible for the strategic vision and technical direction of the platform. Prior to founding Cybric, Mike was Yahoo's CIO and SVP of Infrastructure, where he led the IT and Data Center functions for the company. He has more than 24 years of IT Operations experience with a focus on highly-scalable architectures.
The technologies behind big data and cloud computing are converging quickly, offering businesses new capabilities for fast, easy, wide-ranging access to data. However, to capitalize on the cost-efficiencies and time-to-value opportunities of analytics in the cloud, big data and cloud technologies must be integrated and managed properly. Pythian's Director of Big Data and Data Science, Danil Zburivsky will explore: The main technology components and best practices being deployed to take advantage...
For years the world's most security-focused and distributed organizations - banks, military/defense agencies, global enterprises - have sought to adopt cloud technologies that can reduce costs, future-proof against data growth, and improve user productivity. The challenges of cloud transformation for these kinds of secure organizations have centered around data security, migration from legacy systems, and performance. In our presentation, we will discuss the notion that cloud computing, properl...
Cloud computing delivers on-demand resources that provide businesses with flexibility and cost-savings. The challenge in moving workloads to the cloud has been the cost and complexity of ensuring the initial and ongoing security and regulatory (PCI, HIPAA, FFIEC) compliance across private and public clouds. Manual security compliance is slow, prone to human error, and represents over 50% of the cost of managing cloud applications. Determining how to automate cloud security compliance is critical...
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.
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
"MobiDev is a Ukraine-based software development company. We do mobile development, and we're specialists in that. But we do full stack software development for entrepreneurs, for emerging companies, and for enterprise ventures," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Digital Transformation is well underway with many applications already on the cloud utilizing agile and devops methodologies. Unfortunately, application security has been an afterthought and data breaches have become a daily occurrence. Security is not one individual or one's team responsibility. Raphael Reich will introduce you to DevSecOps concepts and outline how to seamlessly interweave security principles across your software development lifecycle and application lifecycle management. With ...
With more than 30 Kubernetes solutions in the marketplace, it's tempting to think Kubernetes and the vendor ecosystem has solved the problem of operationalizing containers at scale or of automatically managing the elasticity of the underlying infrastructure that these solutions need to be truly scalable. Far from it. There are at least six major pain points that companies experience when they try to deploy and run Kubernetes in their complex environments. In this presentation, the speaker will d...