How to Create an Outlook Add-in
What is an outlook add-in?
Before we directly jump into the technical aspect, let’s get brief idea about the outlook add-ins. Outlook add-in is a another application which we can run inside of the office outlook to increase or enhance the functionality. We can build outlook add-in by using HTML, CSS, JavaScript, C# or any other technologies. It does not matter what platform we are using it will works(outlook for windows, mac, web- office 365 account).
Outlook add-in consist of the manifest file(.xml file) which describe how the add-in should be integrate into the outlook. So that mean, we can create a project using angular, react, jquery, aurelia, c# and whatever the technology, but in order to run the add-in inside of the office outlook there should be a manifest file inside of the project, so if we copy a manifest file into a newly created project root folder and do the necessary configuration, then it should work as charm. Normally these outlook add-ins can be acquired from the office store or can side loaded by the end-user.
Supported mail add-ins,
- Email messages
- Meeting requests
- Responses and cancellations
- Appointments
Step 1: Setup office add-in project generator/environment (for JavaScript office add-in)
Before you run project generator (YO Office) you need to install node.js and npm, to do that please go to this link and install the recommended version with default settings. Run node -v and npm -v in the command prompt to check whether the node and npm install correctly or not. If it is not giving any good result please restart your machine and check again. Then we need to install Yeoman generator (yo) and generator-office globally using npm. Run npm install -g yo generator-office to install yo and office project template generator globally.
Step 2: Create a office add-in
Great, now you have completed setting up your working environment for office add-in generator. Now next step is very simple. You just need to run the yo office command in the cmd and follow the simple steps that yo template generator offer for you. It will ask you to choose a office client for add-in and also the technology that you want to go for (React, Angular, Jquery, JavaScript, etc..). This time we are planing to create a add-in for outlook, so make sure to choose outlook as a office client. Finally yo will create a separate JavaScript project for you according to the given options. Now it is up to you, what kind of features do you need in your add-in, you can implement those features in your separate JavaScript project.
- What we need to know about manifest.xml
Normally every outlook add-in consist of two components, XML add-in manifest and the web page, supported by the JavaScript library for Office Add-ins (office.js). The manifest describes how the add-in integrates across Outlook clients.
XML manifest file enables an Office Add-in to do the following:
- Describe it self by providing version, id, locale, display name, description
- Allows to use images for branding
- Describe how the add-in integrates with Office
- Specify the default dimensions for content add-ins
- Permissions
- Define rules for message, appointment, or meeting request item which we are interact with in the add-in
- What about web pages
When you create a project using “yo” generator it will create a base project for us. After that we can continue changing existing features or UI and also we can add more feature, more pages to the base project to get what we needed from the add-in. Great now we have created a new add-in and also have some understanding about how separate JavaScript project provide what we need in outlook add-in. :)
Step 3: Add-in installation
There is an online store for outlook add-in which contain very interesting add-ins. There are three ways that we can get a add-in into our client
- Can install already existing add-in which match our requirements
- Publish our own add-in into the online store and install it from there
- Host our own add-in application in hosting environment and link it into the office client
To install a add-in into a local office outlook just click on the store icon in the quick access toolbar, it will open a dialog box like above image, then you can search a specific add-in and after that click on the “Add” button to install it into local outlook.
- What if Store Add-in greyed out?
Yes, this can be happened because of your outlook version, or the mail server version. Update your office package to latest, still it is not working for you then you have to contact your administrator/your self :) to update the mail server to latest.
- Can we install an add-in in office 365 account?
Yes we can. There are two ways that we can follow to achieve this.
Path 1:
Click on the “Manage add-ins” link to go directly to the office store and from there you can follow the same steps that we discussed few minutes ago to install an add-in from the store.
Path 2:
After you have click on the “Mail” link from the office 365 account setting section, you need to navigate “Manage add-ins” section in the “Genaral options”. From there click on the “+” mark, it will ask you to choose one of options from three.
- Add from the Office Store: Will open an office store dialog to continue
- Add from a URL: In here you can add a direct link to the manifest.xml file which is included in your hosted office add-in application.
- Add from a file: Needs to provide manifest.xml file path which is in the local machine file system(inside the JavaScript office add-in project). This option helps app developers to link their application which is currently in development mode to run and test the add-in.
Great. Now you know how to create a simple outlook add-in and get helped from it :). Let’s meet again with cool stuff :)
