Name: Outlook-Add-in-JavaScript-ViewYouTubeVideos
Owner: Office Developer
Description: This Outlook Add-in allows users to view YouTube videos in the add-in pane in Outlook. It also contains a setup script that deploys the app to a Ruby web server.
Created: 2015-08-11 22:48:02.0
Updated: 2018-03-08 07:09:50.0
Pushed: 2018-01-31 20:28:34.0
Size: 576
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This Outlook Add-in allows users to view YouTube videos in the add-in pane in Outlook if the selected email message or appointment contains a URL to a video on YouTube. It also contains a setup script that deploys the add-in to a Ruby web server running on a Mac. The following figure is a screen shot of the YouTube add-in activated for a message in the Reading Pane.
`LICENSE.txt
` The terms and conditions of using this distributable`config.ru
` Rack config`setup.sh
` Setup script to generate `app.rb
, ``
manifest.xml```, and optionally, a certificate`cert/ss_certgen.sh
` Self-signed certificate generating script`public/res/js/strings_en-us.js
` US English localization`public/res/js/strings_fr-fr.js
` French localizationThe main code files for this add-in are `manifest.xml
and ``
youtube.html```, along with the JavaScript library and string files for Office add-ins, and a logo image file. The following is a high-level summary of how the add-in works:
This mail add-in specifies in the `manifest.xml
` file that it requires a host application that supports the mailbox capability:
abilities>
<Capability Name="Mailbox"/>
pabilities>
ml
ktopSettings>
<!-- Change the following line to specify the web server where the HTML file is hosted. -->
<SourceLocation DefaultValue="https://webserver/YouTube/YouTube.htm"/>
<RequestedHeight>216</RequestedHeight>
sktopSettings>
letSettings>
<!-- Change the following line to specify the web server where the HTML file is hosted. -->
<SourceLocation DefaultValue="https://webserver/YouTube/YouTube.htm"/>
<RequestedHeight>216</RequestedHeight>
bletSettings>
The add-in also requests the ReadItem permission in the manifest file so that it can run regular expressions, which is explained below.
<Permissions>ReadItem</Permissions>
The host application activates this add-in when the selected message or appointment contains a URL to a YouTube video. It does so by first reading on startup the manifest.xml file, which specifies an activation rule that includes a regular expression to look for such a URL:
e xsi:type="ItemHasRegularExpressionMatch" PropertyName="BodyAsPlaintext" RegExName="VideoURL" RegExValue="http://(((www\.)?youtube\.com/watch\?v=)|(youtu\.be/))[a-zA-Z0-9_-]{11}"/>
The add-in defines an initialize function that is an event handler for the initialize event. When the run-time environment is loaded, the initialize event is fired, and then the initialize function calls the main function of the add-in, init
, as shown in the code below:
ce.initialize = function () {
init(Office.context.mailbox.item.getRegExMatches().VideoURL);
The `getRegExMatches
method of the selected item returns an array of strings that match the regular expression ``
VideoURL`, which is specified in the
manifest.xml``
file. In this case, that array contains URLs to videos on YouTube.
The init
function takes as an input parameter that array of YouTube URLs and dynamically builds the HTML to display the corresponding thumbnail and details for each video.
This dynamically built HTML displays the first video in a YouTube embedded player, together with details about the video. The add-in pane also displays the thumbnails of any subsequent videos. The end user can choose a thumbnail to view any of the videos in the YouTube embedded player, without leaving the host application.
Shipped with this sample is a `setup.sh
` - this setup file does the following:
`manifest.xml
``app.rb
`To run the script, type at your POSIX-compliant terminal:
$ bash setup.sh
From the project root, run:
$ rackup
Because this sample uses a local server and self-signed certificate, you must first establish 'trust' between your localhost and the self-signed certificate. Before Outlook will transmit any potentially sensitive data to any add-in, its SSL Certificate is verified for trust. This requirement helps protect the privacy of your data. Any modern web browser will alert the user to certificate discrepancies, and many also provide a mechanism for inspecting and establishing trust. After starting your local server, open your web browser of choice and navigate to the locally hosted URL specified in your manifest.xml file. (By default, the setup.sh script in this sample specifies this URL as `https://0.0.0.0:8443/youtube.html
`.) At this point you may be presented with a certificate warning. You need to trust this certificate.
Open Safari| :-:| |
Select 'Always trust' your self-signed certificate| :-:| |
Installation of this sample add-in requires access to Outlook on the web. Installation can be performed from Settings > Manage apps.
Select 'Settings' and 'Manage apps' menu|Install from file :-:|:-: |
Select the manifest.xml file| :-:| |
Select 'Install' and then 'Continue'| :-:| |
To demonstrate the functionality of the add-in, you'll need to use the Office Outlook 2013 native client.
Copyright (c) 2015 Microsoft. All rights reserved.
This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.