A Step-By-Step Guide on Outlook Add-in Development
You may wonder to know that Microsoft Outlook has more than 400 million active users globally, making it the most used platform for email communication. Most businesses, even tech giants prefer it using Outlook Add-ins development to streamline their business communication and generate leads faster.
In this blog, we will learn about Custom Outlook Addins, and their step-by-step process of development, setup, and installation. Let’s get started.
What exactly is an Outlook add-in?
An Outlook Add-In is a small piece of software that works in conjunction with Microsoft Outlook. An Outlook Add-In is often used when a user is viewing or composing an email to provide a limited but useful set of functionalities, such as for email marketing.
Add-Ins may be created by app developers for all of Microsoft's major Office programs. A Word Add-In may allow you to insert specific content (for example, from a text or image library) into a document.
What functions does an Outlook Add-in have?
- Outlook add-ins may help in searching the content of an open email for a certain Customer or Case number, allowing you to show them relevant information from your main system.
- It allows users to effortlessly copy and paste emails into your CRM system. Alternatively, it may scan the body of an open email for a specific Customer or Case number, allowing you to show them relevant information from your main system.
Is Outlook Add-In Development Difficult?
Outlook Add-Ins are, indeed, the most advanced members of the Microsoft Office 365 Add-In family. They frequently demand lengthy platform capability determination, the usage of the Graph API (or, in some cases, the EWS API), the exchange of an Outlook token for a Graph API token, and so on.
How Do I Set Up Outlook Add-Ins?
- Users install your Outlook Add-In (either individually or for their entire association). Some Add-Ins are available through App-source (Microsoft's business software store), while others can be installed directly by your clients using Outlook or their Azure Active Directory tenant.
- When you open an email after installing your Add-on, the icon(s) for your Add-In should appear on the ribbon (the position varies by platform). When the user clicks on your Add-In's icon, your Add-In appears, typically in a window on the right-hand side of the email.
- The Add-In works in the same way that an App does within Outlook. The operations of the Add-In generally read some information from the email and make it available to your primary programme.
- Access to the email server from which the email was served may be required for more complex Add-Ins. For example, these Add-Ins require access to attachments or threads. To obtain critical information, Microsoft exposes APIs such as the Graph API to these Add-Ins.
Prerequisites
- Install create-react-app
npm install -g create-react-app- Install Yeoman
npm install -g yo- Install Office Add-in Project Creator
npm install -g yo generator-officeHow to create an Outlook Add-in using React?
Create the add-in
An Office Add-in may be made using Visual Studio or the Yeoman Office Add-in generator. In contrast to Yeoman, which creates a Node.js project that can be maintained using Visual Studio Code or any other editor, Visual Studio creates a Visual Studio solution. To create and test your add-in locally, make the appropriate selection and then follow the on-screen instructions.
Create the add-in project
- Go to the Visual Studio menu bar, and choose File > New > Project.
- In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Outlook Web Add-in as the project type.
- Name the project, and then choose OK.
- After Visual Studio generates a solution, Solution Explorer shows the two projects in the solution. The Message-read.HTML file opens in Visual Studio.
<body class="ms-font">
<div class=”content-main">
<h1>prop</h1>
<table class="ms-Table">
<thead>
<tr>
<th>Prop</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Id</strong></td>
<td class="val"><code><label id="id"></label></code></td>
</tr>
<tr>
<td><strong>class</strong></td>
<td class="val"><code><label id="class"></label></code></td>
</tr>
<tr>
<td><strong>Message</strong></td>
<td class="val"><code><label id="Msg_Id"></label></code></td>
</tr>
<tr>
<td><strong>From</strong></td>
<td class="val"><code><label id="from"></label></code></td>
</tr>
</tbody>
</table>
</div>
</body>
'use strict';
(function () {
Office.on Ready(function () {
$(document).ready(function () {
loadItemProps(Office.context.mailbox.item);
});
});
function loadItemProps(item) {
$('#id').text(itemId);
$('#class').text(class);
$('#Msg_Id').text(Msg_Id);
$('#from').html(from.displayName + " <" + from.emailAddress + ">");
}
})();
HTML,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
td. val {
word-break: break-all;
}
.content-main {
margin: 10px;
}
});
Can I use the generator for Office Add-in development?
- Yes, you can. You can use pure HTML, Angular, React anything you like!
Is it good to use TypeScript for Office Add-in?
- Yes, VS Code has great support for TypeScript
How do I install an Outlook add-in?
- Open Visual Studio, click the menu bar and select File > New > Project.
- In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Outlook Web Add-in as the project type.
- Name the project, and then choose OK.
- Here you will see two projects appear in Solution Explorer. The MessageRead .html file opens in Visual Studio.
- Navigate to the Settings > Integrated apps > Add-ins page in the admin center.
- Choose an option and then follow the steps.
- Make your add-in selection if you chose to add an add-in from the Office Store.
- You can sort the available add-ins into three categories: Suggested for you, Rating, and Name. The Office Store only provides free add-ins. Paid add-ins are not currently supported. Accept the terms and conditions after selecting an add-in to proceed.
- To designate whom the add-in is deployed to, select Everyone, Specific users/groups, or Just me on the next screen. To find certain users or groups, utilize the Search box.
- Choose Deploy.
- When the add-in is activated, a green tick displays. To test the add-in, follow the instructions on the website.
- When you're finished, click Next. If you've only deployed to yourself, you can change who has access to the add-in to add more users.
Step-by-step process of Outlook Add-in development using React.js
Given below is the step-by-step process available for Outlook Add-in development using React.js.
Step 1: Create a Development Environment
- To begin, ensure that Node.js and NPM (Node Package Manager) are installed on your machine. These tools are required for installing and managing dependencies. Make a new directory for your project and launch a terminal or command prompt from within it.
Step 2: Develop a new React.js application.
- To build a new React.js application, enter the following command in the terminal:
npx create-react-app outlook-addinThis command will generate a new directory named "Outlook-addin" that contains a basic React.js project structure.
Step 3: Install Outlook Add-in Requirements
- Enter the project directory by typing:
cd outlook-addinInstall the following dependencies for developing Outlook Add-ins with React.js:
npm install @microsoft/office-js-helpers office-ui-fabric-reactStep 4: Set up the Office.js Helper and the Office UI Fabric.
- Open your project's src/index.js file and add the following import statements at the top:
import { initializeIcons } from '@uifabric/icons';import { initialize } from '@microsoft/office-js-helpers';- Then, before rendering the React app, execute the initialize Icons() and initialize() routines. This guarantees that the required Office.js Helper and Office UI Fabric configurations are correctly set up:
initializeIcons();
initialize();
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Step 5: Create an Outlook Add-in Component
- Make a new file called OutlookAddin.js in the src directory. The core component for your Outlook Add-in will be contained in this file. Add the following code to the file:
import React from 'react';
function OutlookAddin() {
return (
<div>
<h1>Welcome to Outlook Add-in Development!</h1>
{/* Add your Outlook Add-in UI components here */}
</div>
);
}
export default OutlookAddin;
Step 6: Integrate the Add-in Component
- Remove the old code from the src/App.js file and import the OutlookAddin component. Substitute the OutlookAddin component for the App component:
import React from 'react';
import OutlookAddin from './OutlookAddin';
function App() {
return (
<div>
<OutlookAddin />
</div>
);
}
export default App;Step 7: Create and test the add-in
- To build the React app, enter the following command in the terminal:
npm run build- When the build process is finished, a build directory is generated in your project directory. Modify the SourceLocation value in the manifest.xml file in the public directory to point to the generated app:
<bt:Urls>
<bt:Url id="messageReadTaskPaneUrl" DefaultValue="https://localhost:3000" />
</bt:Urls>- To start a local server, save the file and then run the following command:
npm start- This will open a new browser window with your Outlook Add-in.
Step 8: Install the Add-in in Outlook.
- You must side-load your Add-in to test it in Outlook. Navigate to the "File" tab in Outlook. Choose "Options" and then click!
Conclusion
Creating Outlook add-ins using React.js has a number of advantages, such as giving front-end web developers a comfortable environment to work in and enabling the development of dynamic, reusable UI components using the React component model. We looked at the step-by-step approach to creating an Outlook add-in with React.js.
In this blog, we explored the architecture of Outlook add-ins, the structure, and requirements of Outlook add-ins as well as how add-ins interact with Outlook.