with JavaScript

Before you read this page you should read using NotePad with JavaScript


Create Project Folder

Open File Explorer and create the (C:\temp\vscode) folder.
Create a new subfolder called "outlook-javascript" (C:\temp\vscode\outlook-javascript).
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                         // 3.1.1 
npm view generator-office version // 1.7.6

Generate Template Files

Run the Yeoman generator to create the project.

yo office 

Choose a project type: Select "Office Add-in Task Pane project".
SS
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 then be created for you.
Open File Explorer and browse the following folder (C:\temp\vscode\
Note that the project folder will be a subfolder of the solution.
To open this folder in Visual Studio Code, type "code ."

code . 

package.json file

Expand the Explorer pane on the left hand side.
Expand the project "outlook-javaScript".
Click on the package.json file.
SS

{ 
"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": "word",
"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": {},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/polyfill": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@types/office-js": "^1.0.108",
"@types/office-runtime": "^1.0.14",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.1.1",
"eslint-config-office-addins": "^1.0.19",
    "find-process": "^1.4.3",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.0",
"office-addin-cli": "^1.0.13",
"office-addin-debugging": "^3.0.34",
"office-addin-dev-certs": "^1.5.5",
"office-addin-lint": "^1.0.26",
"office-addin-manifest": "^1.5.7",
"office-addin-prettier-config": "^1.0.12",
"source-map-loader": "^0.2.4",
"ts-loader": "^6.2.2",
"typescript": "^4.0.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"prettier": "office-addin-prettier-config"
}

manifest.xml

<?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 ID </Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="outlook-vscode"/>
  <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="Contoso 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>

Other Source Files

This Yeoman Generator page, shows the contents of all the source files.


Load the Add-in - Online

The add-in can be manually sideloaded into your Office Online.
Execute the following command:

cd C:\temp\vscode\outlook-javascript\outlook-javascript 
npm run dev-server

You will 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\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.
SS
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-vscode".


Load the Add-in - Desktop

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

cd C:\temp\vscode\outlook-javascript\outlook-javascript 
npm start

This will start the local web server and open Outlook with the add-in loaded.
SS



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