How to use React to create a Word pane Add-in?

ifourtechnolab April 13, 2023

56 9 minutes read

How to use React to create a Word pane Add-in

React is a popular JavaScript library that is widely used for building dynamic user interfaces. It is widely used in web development, and it can also be used to create add-ins for Microsoft Office applications such as Word. With React, you can create powerful and flexible add-ins that can enhance the functionality of Word and provide a better user experience for your users.

In this article, we will walk you through the process of creating a Word pane add-in using React. We will start with an overview of Word add-ins and then dive into the steps involved in building an add-in with React.

What is a Word Add-in Office?

An Add-in is an extra feature incorporated to a Word platform for additional functionalities. It doesn’t come with built-in solution and could be customized according to the business needs.

For example, Word provides seamless writing solutions but not grammatical solutions, thus we use Grammarly as an Add-in product in MS Word.

To build new Word plugins that operate on a Windows desktop, a Mac, or in the cloud, you may utilise the Office Add-ins platform, which contains the Word JavaScript API and the Office JavaScript API.

For developing Word UI and launch task panes, we use JavaScript Word add-in command. The JavaScript code will work as same as it works in the browser.

A Word add-in is a piece of software that extends the functionality of Microsoft Word. Add-ins can be used to automate repetitive tasks, add new features, or integrate with other tools and services. Word add-ins can be created using a variety of technologies, including HTML, CSS, and JavaScript.

Word add-ins can be used on a variety of platforms, including Windows, Mac, and the web. They can also be distributed through the Microsoft Store, making it easy for users to discover and install them.

Creating a Word Add-in with React

To create a Word add-in with React, you will need to follow a few simple steps. We will outline these steps below.

Step 1: Set up Your Development Environment

Before you can start building your Word add-in, you will need to set up your development environment. This will involve installing the necessary software and tools, including Node.js and the Office Add-in Yeoman generator.

You will also need to create a new project in Visual Studio Code or your preferred code editor.

Step 2: Create a New Word Add-in

Once you have set up your development environment, you can create a new Word add-in project using the Office Add-in Yeoman generator. This generator will create a basic project structure for you, including a manifest file and a JavaScript file.

The manifest file is used to define the settings and configuration for your add-in, while the JavaScript file contains the code for your add-in.

Step 3: Add React to Your Project

To use React in your Word add-in, you will need to add it to your project. This can be done by installing the react and react-dom packages using npm.

Once you have installed React, you can start using it in your add-in code. You will need to import the React and ReactDOM libraries and use them to create your user interface.

Step 4: Build Your User Interface

With React installed, you can start building your user interface. This will involve creating React components that will be used to display your add-in content.

React components are reusable pieces of code that can be used to build complex user interfaces. You can use them to create buttons, menus, text fields, and other types of user interface elements.

To create a Word pane add-in, you will need to use the Office UI Fabric React library. This library provides a set of pre-built React components that are designed to work with Office add-ins.

Step 5: Test Your Add-in

Once you have built your Word add-in with React, you will need to test it to make sure it works as expected. You can test your add-in by running it in Word using the Office Add-in Debugger.

The Office Add-in Debugger is a tool that allows you to test your add-ins in a variety of environments, including Windows, Mac, and the web. It provides a set of debugging tools that can help you identify and fix any issues with your add-in.

Step 6: Publish Your Add-in

Once you have tested your Word add-in and are satisfied with its functionality, you can publish it to the Microsoft Store. This will make it available to users around the world, and it will allow you to monetize

What are the prerequisites for setting up your development environment?

Here are the prerequisites that most Word Add-in development companies follow to set their development environment. To create a Word Add-in, install these essentials.

NPM
js
Visual Studio
A Microsoft 365 account which includes the subscription version of Office
The Office JavaScript linter

How to create our own Word Add-in?

Creating a Word Add-in can be a great way to extend the functionality of Microsoft Word to meet your specific needs. In this article, we will explore the steps involved in creating your own Word Add-in.

Familiarize Yourself with the Technology Before you start developing your Word Add-in, it’s important to become familiar with the technology that powers it. Microsoft provides a wealth of documentation on their website, including sample code and tutorials to help you get started. You’ll also want to ensure that you have the necessary software installed, such as Visual Studio.
Choose Your Development Language Next, you’ll need to choose the programming language you’ll use to build your Word Add-in. You can choose from a variety of languages, including C#, JavaScript, and HTML/CSS. You may want to consider which language you are most comfortable with or which one will best suit your specific needs.
Determine Your Add-in’s Functionality Once you’ve chosen your development language, you’ll need to determine the functionality you want your Word Add-in to have. This can range from basic tasks, such as inserting text or images, to more complex operations, such as accessing external data or integrating with other applications.
Build Your Add-in With the functionality of your Word Add-in in mind, you can begin building it using your chosen development language. You’ll need to create the necessary files and code to implement your desired functionality. Be sure to test your code thoroughly as you go to ensure it is functioning as expected.
Deploy Your Add-in Once you have built your Word Add-in, you’ll need to deploy it so that others can use it. You can do this by publishing it to the Office Store or by distributing it internally within your organization. Be sure to follow Microsoft’s guidelines for deployment to ensure that your Add-in is secure and functional.

There are two ways to create a Word Add-in.

Yeoman generator for Office Add-ins (recommended by developers)
Using the Visual Studio

We will choose the first method to create a Word Add-in because it creates a Node.js project that can be managed with Visual Studio Code or any other editor.

Steps for creating Word Add-in:

Install the yo generator office.

npm install -g yo generator-office

For creating an add-in project run yo office command, which is most important for any add-in of office.

yo office

After running the above command one prompt will be open, which will ask for details about the project.

First select Project Type:

> yo office
? Choose a project type:
> Office Add-in Task Pane project
Office Add-in Task Pane project using Angular framework
Office Add-in Task Pane project using React framework
Office Add-in Task Pane project supporting single sign-on
Office Add-in project containing the manifest only

Excel Custom Functions Add-in project

Now choose the project language:

> yo office

? Choose a project type: Office Add-in Task Pane project

? Choose a script type: (Use arrow keys)

> TypeScript

JavaScript

Enter your project name:

> yo office

? Choose a project type: Office Add-in Task Pane project

? Choose a script type: TypeScript

? What do you want to name your add-in? (My Office Add-in) My First-add-in

Select your office client:

> yo office

? Choose a project type: Office Add-in Task Pane project

? Choose a script type: TypeScript

? What do you want to name your add-in? My First-add-in

? Which Office client application would you like to support?

Excel

Onenote

Outlook

Powerpoint

Project

> Word

Finally you will get this type of interface:

> yo office

? Choose a project type: Office Add-in Task Pane project

? Choose a script type: TypeScript

? What do you want to name your add-in? My First-add-in

? Which Office client application would you like to support? Word

It will create an Add-in named “My First Add-in”.

How to run an Add-in project?

Go to the project

cd “My First Add-in”

Now you must have to start the dev-server of the Word Add-in.

npm run dev-server

To test add-in in Word, run the following command in the root directory of your project. This starts the local webserver and opens Word with your add-in loaded.

npm start

After executing the above command, you can see that one taskpane is added in the word, which works as a Word Add-in

Explore Project

The Add-in project that we have created includes code for a basic task pane add-in. If we explore the components of our add-in project, we will discover different types of files as listed below.

The ./manifest.xmlfile defines the settings and capabilities of the add-in.
The ./src/taskpane/taskpane.htmlfile includes the HTML file for the task pane.
The ./src/taskpane/taskpane.cssfile includes the CSS that’s applied to content in the task pane.
The ./src/taskpane/taskpane.jsfile includes the Office JavaScript API code that made interaction between the task pane and the Office client application.

How to create a simple Hello World Program?

First of all, open ./src/taskpane/taskpane.html to add one button to the taskpane. You must give one id to the button.

<html>

<head>

<title>Contoso Task Pane Add-in</title>

href=”https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css” />

</head>

<body >

<h1 >Welcome</h1>

</header>

<h2>Print Hello World Programme</h2>

<div>

<button id=”run”>Click me</button>

</div>

</main>

</body>

</html>

Now go to the ./src/taskpane/taskpane.jsto add a click listener on the button.

In word there is a different method

Office.onReady((info) => {

if (!Office.context.requirements.isSetSupported(‘WordApi’, ‘1.3’)) {

console.log (‘Sorry. The tutorial add-in uses Word.js APIs that are not available in your version of Office.’);

}
else {
// Assign event handlers and other initialization logic.
if (info.host === Office.HostType.Word) {
document.getElementById(“run”).onclick = run;
}
}
});
export async function run () {
return Word.run(async (context) => {
const paragraph = context. document. body. insertParagraph(“Hello World”, Word.InsertLocation.end);
paragraph.font. color = “red”;
await context.sync();
}). catch(function (error) {
console.log (“Error: ” + error);
if (error instanceof OfficeExtension.Error) {
console.log (“Debug info: ” + JSON.stringify(error.debugInfo));
}
});
}

Let’s Understand code execution.

onReady() is an asynchronous method. It can return a Promise object while the Office.js library is loading. When the Office.js library is loaded successfully, then the promise will be resolved.
The first condition of the code check whether the user’s Word supports a version of Word.js that includes all the APIs.
The second part of this code adds an event handler for the click button.
Word.js logic will be added to the function that is passed to run, which is by default function of word office. This logic does not execute immediately, it will be added to the queue. The context.sync method executes all commands one by one.
run is followed by a catch block, which is a best practice that should always follow.
document.body.insertParagraph is predefined method to add text into word file. So, it will add the Hello World in the word file.
We can add this Hello World according to a position like before, after, end, and start using InsertLocation.
We can directly assign CSS to a Paragraph using the color

After following all these steps, you will discover this type of Add-in as output:

Conclusion

For each Office Client, the Add-in is just as important as Office Applications. It is the gateway for any business to acquire a customer and leads. In this blog, we learnt about ReactJS Add-ins and which ones are the best to consider for business.

Author Bio: Ajay Patel – Technical Director, iFour Technolab Pvt. Ltd.

A Seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. With a sharp understanding and technical acumen, he has delivered hundreds of Web, Cloud, Desktop, and Mobile solutions and is heading the technical department at an esteemed Microsoft 365 development company – iFour Technolab Pvt. Ltd.

How to use React to create a Word pane Add-in?

What is a Word Add-in Office?

Creating a Word Add-in with React