Outlook with JavaScript

This page is just a reference page for some of the files that the Yeoman Generator creates.
Before you read this page you need to read Outlook API > using VS Code with JavaScript


cd c:\temp\myfolder 
yo office
Choose a project type: Office Add-in project using Jquery framework
Choose a script type: JavaScript
What do you want to name your add-in
Which Office client application would you like to support: Outlook
cd c:\temp
code .

package.json

{ 
  "name": "jquery-java",
  "description": "",
  "author": "",
  "version": "0.1.0",
  "scripts": {
    "start": "webpack-dev-server
              --mode development
              --https
              --key ./certs/server.key
              --cert ./certs/server.crt
              --cacert ./certs/ca.crt
              --port 3000",
    "sideload": "office-toolbox sideload -m manifest.xml -a Outlook",
    "build": "webpack --mode production",
    "validate": "office-toolbox validate -m manifest.xml"
  },
  "dependencies": {
    "@microsoft/office-js-helpers": "^1.0.1",
    "babel-polyfill": "^6.26.0",
    "office-ui-fabric-js": "^1.3.0",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "office-toolbox": "^0.1.0",
    "@types/office-js": "^0.0.37",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.7",
    "webpack": "^4.1.1",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.1"
  }
}

index.html

<!DOCTYPE html> 
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jquery-java</title>

    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>

    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.components.css" />
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>

<body class="ms-font-m ms-welcome">
    <header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
        <img width="90" height="90" src="assets/logo-filled.png" alt="jquery-java" title="jquery-java" />
        <h1 class="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">Welcome</h1>
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20">
Please sideload your addin to see app body.
</h2>
    </section>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20">
 Discover what jquery-java can do for you today!
</h2>
        <ul class="ms-List ms-welcome__features ms-u-slideUpIn10">
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Ribbon"></i>
                <span class="ms-font-m ms-fontColor-neutralPrimary">Achieve more with Office integration</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Unlock"></i>
                <span class="ms-font-m ms-fontColor-neutralPrimary">Unlock features and functionality</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Design"></i>
                <span class="ms-font-m ms-fontColor-neutralPrimary">Create and visualize like a pro</span>
            </li>
        </ul>
        <br />
        <br />
        <p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p>
        <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20">
            <span class="ms-Button-label">Run</span>
            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
        </div>
    </main>

</body>
</html>

src \ index.js

$(document).ready(() => { 
    $('#run').click(run);
});
  
Office.initialize = (reason) => {
    $('#sideload-msg').hide();
    $('#app-body').show();
};

async function run() {
    /**
         * Insert your Outlook code here
         */
}

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:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0"
          xsi:type="MailApp">
  <Id>889c55dd-1a8e-4123-8f9e-225219b1b466</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>[Provider name]</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="jquery-java" />
  <Description DefaultValue="[Outlook Add-in description]"/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/hi-res-icon.png"/>
  <SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]" />
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</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/index.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="functionFile" />
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <OfficeTab id="TabDefault">
              <!-- Up to 6 Groups added per Tab -->
              <Group id="msgReadGroup">
                <Label resid="groupLabel" />
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="paneReadButtonLabel" />
                  <Supertip>
                    <Title resid="paneReadSuperTipTitle" />
                    <Description resid="paneReadSuperTipDescription" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon16" />
                    <bt:Image size="32" resid="icon32" />
                    <bt:Image size="80" resid="icon80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="messageReadTaskpaneUrl" />
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>

    <Resources>
      <bt:Images>
        <bt:Image id="icon16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
        <bt:Image id="icon32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
        <bt:Image id="icon80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="functionFile" DefaultValue="https://localhost:3000/function-file/function-file.html"/>
        <bt:Url id="messageReadTaskpaneUrl" DefaultValue="https://localhost:3000/index.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="groupLabel" DefaultValue="My Add-in Group"/>
        <bt:String id="customTabLabel" DefaultValue="My Add-in Tab"/>
        <bt:String id="paneReadButtonLabel" DefaultValue="Display all properties"/>
        <bt:String id="paneReadSuperTipTitle" DefaultValue="Get all properties"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="paneReadSuperTipDescription" DefaultValue="Opens a pane displaying all available properties."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');  

module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        })
    ]
};


.babelrc

{ 
    "presets": [
        "env"
    ]
}



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