with TypeScript

Before you read this page you should read with JavaScript


Generate package.json file

Open File Explorer and browse to the (C:\temp\notepad) folder.
Create a new subfolder called "outlook-typescript" (C:\temp\notepad\outlook-typescript).
Open a command prompt (as administrator).
Change to that folder and initialise npm.

cd c:\temp\notepad\outlook-typescript 
npm init

Press Enter to accept all the defaults.
This will create a "package.json" file in the folder.
(C:\temp\notepad\outlook-typescript).


Install Webpack

more information

npm install --save-dev webpack 
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin

Install Babel

more information
This lets you transpile TypeScript ES 2015 (ES6) into JavaScript ES 2015 (ES6).

npm install --save-dev babel-loader 
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-typescript

Install TypeScript

more information
This lets you use the TypeScript compiler

npm install --save-dev typescript 

Install Type Definitions

more information
This lets you

npm install --save-dev @types/office-js 

Edit package.json file

{ 
  "name": "outlook-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-typescript": "^7.16.7",
    "@types/office-js": "^1.0.240",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

Create index.html

Open File Explorer in the root folder (C:\temp\notepad\outlook-typescript).
Create a NotePad file with the following contents and save it as 'index.html'.
This file contains html code that links to webpackbundle.js.

<!DOCTYPE html> 
<html>
<body>
<h1>Outlook Demo</h1>
<div id="app"></div>
</body>
</html>

Create index.ts

Open File Explorer in the root folder (C:\temp\notepad\outlook-typescript).
Create a NotePad file with the following contents and save it as 'index.js'.

window.onload = function Start() { 
console.log('hello world');

var app_1 = document.getElementById("app");
app_1.innerHTML = '<b>hello world</b>';
}

Create webpack.config.js file

Open File Explorer in the root folder (C:\temp\notepad\outlook-typescript).
Create a NotePad file with the following contents and save it as 'webpack.config.js'.
This file tells webpack the location and filename of our top level/entry javascript file ("index.js").
This file tells webpack to bundle all the javascript files into a single file called "webpackbundle.js".

var HTMLWebpackPlugin = require('html-webpack-plugin');     
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/index.html',
filename: 'index.html',
inject: 'body'
});

module.exports = {
entry: __dirname + '/index.ts',
output: {
filename: 'webpackbundle.js',
path: __dirname + '/build'
},
module: {
rules: [
{
test: /.ts$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-typescript' ]
}
}
}
]
},
plugins: [HTMLWebpackPluginConfig]
};

The "webpackbundle.js" file will be automatically generated and used on the local server.
This file is not saved or accessible anywhere in the root folder (C:\temp\notepad\outlook-typescript).


Launch Browser

You are now in a position to launch webpack and start the local development server.
Open a command prompt (as administrator).
Change to the corresponding folder and execute the following 2 commands.

node ./node_modules/webpack/bin/webpack --mode development 
npm run start

Open your browser and display the URL - localhost:8080


Create manifest.xml

Create a NotePad file with the following contents and save it as 'manifest.xml'.

<?xml version="1.0" encoding="UTF-8"?> 
<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:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
  xsi:type="MailApp">

  <Id> Unique GUID </Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="OutlookTypeScriptAddIn1" />
  <Description DefaultValue="OutlookTypeScriptAddIn1"/>
  <SupportUrl DefaultValue="https://bettersolutions.com"/>
  <AppDomains>
    <AppDomain>AppDomain1</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://bettersolutions.com/github/helloworld-outlook/index.html" />
         <RequestedHeight>250</RequestedHeight>
       </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadItem</Permissions>
  <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
</OfficeApp>

The SourceLocation must be "https"


Load the Add-in - Desktop

This add-in can be sideloaded into your Outlook client.
The sideloading for Outlook add-ins cannot be done from the Developer Tab.
Select the Home Tab and select "Get Add-ins".
Select "My addins" on the left hand side.
Scroll down to Custom Add-ins and select the "Add a custom add-in" drop-down.
When you click on an email, an additional action button will be displayed at the top of the Reading Pane.
Clicking on the drop-down button at the top of the email will display a Content pane.



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