with JavaScript


Create Project Folder

Open File Explorer and create the (C:\temp\vscode) folder.
Open Visual Studio Code.
Display the Terminal window (View > Terminal).
Change to that folder.

cd C:\temp\vscode 

Install Yeoman

The Yeoman generator is an open source scaffolding tool for creating web applications.
This generator creates a Node.js project.

npm install -g yo 
npm install -g generator-office

check the versions and update if necessary.

yo --version                         // 4.2.0 
npm view generator-office version // 1.8.0

Generate Template Files

Run the Yeoman generator to create the project.

yo office 

Use the Arrow Keys and press Enter to select.
Choose a project type: Select "Office Add-in Task Pane project".

Choose a script type: Select "JavaScript".
What do you want to name your add-in: Type "Outlook-JavaScript".
Choose which office client application you want to target: Select "Outlook".
All the necessary files will be created for you.


package.json file

Change to that folder.

cd Outlook-JavaScript 

Open this folder in the current VS Code instance.

code -a. 

Open the Explorer pane (View > Explorer).
Click on the package.json file.

{ 
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app-to-debug": "outlook",
"app-type-to-debug": "desktop",
"dev-server-port": 3000
},
"scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"dev-server": "webpack-dev-server --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
    "core-js": "^3.9.1",
    "regenerator-runtime": "^0.13.7"
  },
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.12.11",
    "@types/find-process": "1.2.0",
"@types/office-js": "^1.0.180",
"@types/office-runtime": "^1.0.17",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"eslint-plugin-office-addins": "^1.0.0",
"file-loader": "^4.2.0",
    "find-process": "^1.4.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.1",
"office-addin-cli": "^1.2.2",
"office-addin-debugging": "^4.2.2",
"office-addin-dev-certs": "^1.6.2",
"office-addin-lint": "^1.3.2",
"office-addin-manifest": "^1.6.2",
"office-addin-prettier-config": "^1.1.0",
"source-map-loader": "^0.2.4",
"typescript": "^4.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"prettier": "office-addin-prettier-config"
}

manifest.xml

Click on the manifest.xml file.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
  <OfficeApp
    xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
    xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0"
    xsi:type="MailApp">

  <Id> Unique GUID </Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Outlook-JavaScript"/>
  <Description DefaultValue="A template to get started."/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-80.png"/>
  <SupportUrl DefaultValue="https://bettersolutions.com"/>
  <AppDomains>
    <AppDomain>https://bettersolutions.com</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Mailbox"/>
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1"/>
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="Commands.Url"/>
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="msgReadGroup">
                <Label resid="GroupLabel"/>
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                    <Title resid="TaskpaneButton.Label"/>
                    <Description resid="TaskpaneButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
                <Control xsi:type="Button" id="ActionButton">
                  <Label resid="ActionButton.Label"/>
                  <Supertip>
                    <Title resid="ActionButton.Label"/>
                    <Description resid="ActionButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>action</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GroupLabel" DefaultValue="My Add-in"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
        <bt:String id="ActionButton.Label" DefaultValue="Perform an action"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a pane displaying all available properties."/>
        <bt:String id="ActionButton.Tooltip" DefaultValue="Perform an action when clicked."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

webpack.config.js

Click on the webpack.config.js file.

/* eslint-disable no-undef */ 
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
const urlDev="https://localhost:3000/";
const urlProd="https://bettersolutions.com/";

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const buildType = dev ? "dev" : "prod";
  const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      taskpane: "./src/taskpane/taskpane.js",
      commands: "./src/commands/commands.js"
    },
    resolve: {
      extensions: [".html", ".js"]
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader"
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/,
          loader: "file-loader",
          options: {
            name: '[path][name].[ext]',
          }
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["polyfill", "taskpane"]
      }),
      new CopyWebpackPlugin({
        patterns: [
        {
          to: "taskpane.css",
          from: "./src/taskpane/taskpane.css"
        },
        {
          to: "[name]." + buildType + ".[ext]",
          from: "manifest*.xml",
          transform(content) {
            if (dev) {
              return content;
            } else {
              return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
            }
          }
        }
      ]}),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["polyfill", "commands"]
      })
    ],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*"
      },
      https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000
    }
  };

  return config;
};

Other Source Files

The other project files are displayed on this page: Visual Studio Code > Yeoman Generator for reference.


Load the Add-in - Desktop

The add-in can be sideloaded into your Outlook client.
Execute the following command:

cd C:\temp\vscode\Outlook-JavaScript\ 
npm start

This will start the local web server and open Outlook with the add-in loaded.
A small node window will be displayed.
A security warning dialog box will be displayed, asking you to install the certificate. Press Yes.
A register manifest dialog box will be displayed, asking you to trust this addin. Press OK.
Select the Home tab and you will see a new group called "Contoso Add-in" on the right hand side.
Click on an email in your inbox and press "Show Taskpane".

You need to add your own code to hook up the "Run" button.
You need to add your own code to hook up the "Perform an action" ribbon command.


Load the Add-in - Online

The add-in can be sideloaded into your Office Online.
Be aware that the following command does not always work.

npm start:web 

As an alternative, execute the following command:

cd C:\temp\vscode\Outlook-JavaScript\ 
npm run dev-server

You will/may see the "Security Warning" dialog box appear.
Press Yes to install the certificate.
Open a web browser and login to outlook.office.com
Select an email in your inbox.
In the preview pane on the right hand side, click on the three dots and at the bottom select "Get Add-ins".
Choose My Add-ins on the left hand side.
Scroll to the bottom to see Custom Add-ins
Click on "Add a custom add-in" and select Add from File
Browse to the manifest file:

C:\temp\vscode\Outlook-JavaScript\manifest.xml 

You will see a "Warning" dialog box appear. Press Install.
Scroll to the bottom of the "Add-ins for Outlook" dialog box to see the add-in appear under Custom Add-ins.
Underneath you will see "Added". Close the window.
Select an email in your inbox.
In the preview pane on the right hand side, click on the three dots and select "Outlook-JavaScript".


© 2021 Better Solutions Limited. All Rights Reserved. © 2021 Better Solutions Limited TopPrevNext