JAVASCRIPT

Integrating React into Microsoft Office

A guide on how to turn your React app into Microsoft Office add-in

Image for post
Image for post
Photo by Windows on Unsplash
  • analysis of the received data from the current document, highlighting keywords using a simple NLP algorithm (counting the most used words, excluding prepositions and conjunctions), as well as searching for these words and displaying the corresponding content (cards with different types of content: text, images, video, questionnaires, etc.), via the API of an already written server;
  • the ability to quickly insert content from search results into the working area of ​​the document.
  • How the add-in is integrated with Office.
  • Permission level and data access requirements for the add-in.
React into Microsoft Office
React into Microsoft Office
Integrating React into Microsoft Office
  • Focus on a few key tasks.
  • Content is more important than chrome (appearance).
  • Make the add-on experience enjoyable and let users choose what to do.
  • Support for all platforms and input methods.

Writing a manifest file

First, let’s prepare a manifest file. The following diagram shows the hierarchy of members used to define add-in commands.

Image for post
Image for post
Add-in command hierarchy
Image for post
Image for post
My XML manifest file
Image for post
Image for post
Image for post
Image for post

Writing a web application

To develop a web application, we need a JavaScript API for Office. The Office JavaScript API library consists of an Office.js file and associated JS files. The easiest way to reference the API is to use a Content Delivery Network (CDN) by adding the following code <script>to the <head>page tag :

  • perform the initial steps for the application;
  • check the supported set of requirements;
  • get access to document metadata, its parameters and information about the environment;
  • create a binding to sections of the document and record events;
  • use custom XML parts;
  • open a dialog box.
Image for post
Image for post
Image for post
Image for post
  • Provide more screen space (or even the entire screen) for some tasks in the add-in.
  • Post a video that is too small in the task pane.
Image for post
Image for post

Read More

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.

Written by

Bioinformatician at Oncobox Inc. (@oncobox). Research Associate at Moscow Institute of Physics and Technology (@mipt_eng).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store