Skip to content

kleopatra999/Outlook-Add-in-JavaScript-ModuleExtension

 
 

Repository files navigation

Outlook module extension billable hours sample

This Outlook 2016 for Windows add-in sample uses the new module extenstion point <ExtensionPoint xsi:type="Module"> for Outlook. This code sample integrates a billable hours add-in with the built-in Outlook Mail, Calend, Tasks, etc. modules.

Table of Contents

Change History

March 31, 2016:

  • Published the first version of the sample

April 4, 2016:

  • Updated the README file

Prerequisites

  • Outlook 2016 for Windows
  • NodeJS to serve the module extension
  • npm to install dependencies. It comes with NodeJS
  • GitBash to run command line utilities
  • Clone this repo to your local computer.

Configure the project

You'll need to install a certificate to run this sample because add-in commands require HTTPS. Because add-in commands to not have a UI, you are not prompted to accept an invalid certificate.

  1. Run ./gen-cert.sh to create a certificate.
  2. Double-click ca.crt and install it in your Trusted Root Certification Authorities store

Start a local HTTPS web server to serve the files for the module extension:

  1. Install the package dependencies identified in packages.json by running npm install in the project root directory
  2. Start the local server by running node server.js

Run the project

  1. Start Outlook
  2. Choose the File tab, and then choose Manage Add-ins
  3. After the Add-in Manager opens, choose the "+" symbol, and then choose Add from a file
  4. Choose Browse and then navigate to the directory that contains the sample
  5. Select the module manifest (outlook-add-in-javascript-moduleextension.xml) and then click Open
  6. Choose Next and then choose Install to install the module
  7. Close the Module Manager

It may take Outlook a few moments to load the new module, but when it does you'll see your new module added to the navigation bar shortcuts. Using compact navigation, the shortcuts look like this:

Shows add-in commands in the compact Outlook navigation bar.

If you're not using compact navigation, the shortcuts will look like this:

Shows a single module extension the the expanded navigation bar.

Click either Billable hours or the module icon to open the module extension. Outlook will change to show the module UI.

Shows the user interface for the module extenstion.

There are three buttons on the ribbon. Click one to change the billing rate, and the totals in the main UI will change to reflect the new rate.

Understand the code

The new module extension is enabled in your manifest file by setting the extension type to "Module". This is the section of the manifest that you need to change:

<!--New Extension Point - Module for a ModuleApp -->
    <ExtensionPoint xsi:type="Module">

Questions and comments

We'd love to get your feedback on the Outlook-Add-in-JavaScript-ModuleExtension sample. You can send your feedback to us in the Issues section of this repository.

Questions about Office 365 development in general should be posted to Stack Overflow. Make sure that your questions are tagged with [Office365] and [API].

Additional resources

Copyright

Copyright (c) 2016 Microsoft. All rights reserved.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.2%
  • Shell 19.3%
  • HTML 13.7%
  • CSS 4.8%