1. Microsoft Outlook Toolbar
2. Microsoft Outlook Toolbar Buttons
3. How To Add Webex To Outlook Toolbar
4. Download Outlook Toolbar

When you open Internet Explorer, Outlook, or Firefox with Assistant you see the following toolbar. Most buttons are disabled until you log in. NOTE: Only BroadWorks Assistant – Enterprise is available for use with Microsoft Outlook. Missing Picture Tools in Outlook 2007. When I click on any embedded image in Outlook 2007 in any email that I am composing, the Picture Tools option does not appear. You have clicked on the picture, the toolbar still isn't there, and you need to go to View-Toolbars and make sure Picture is checkmarked.

This tutorial teaches you how to build an Outlook add-in that can be used in message compose mode to insert content into the body of a message.

In this tutorial, you will:

• Create an Outlook add-in project
• Define buttons that will render in the compose message window
• Implement a first-run experience that collects information from the user and fetches data from an external service
• Implement a UI-less button that invokes a function
• Implement a task pane that inserts content into the body of a message

Prerequisites

• Node.js (version 8.0.0 or later)

• The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

  Note

  Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

• Outlook 2016 or later on Windows (connected to an Office 365 account) or Outlook on the web

• A GitHub account

Setup

The add-in that you'll create in this tutorial will read gists from the user's GitHub account and add the selected gist to the body of a message. Complete the following steps to create two new gists that you can use to test the add-in you're going to build.

1. Login to GitHub.

2. Create a new gist.

   • In the Gist description.. field, enter Hello World Markdown.

   • In the Filename including extension.. field, enter test.md.

   • Add the following markdown to the multiline textbox:

   • Select the Create public gist button.

3. Create another new gist.

   • In the Gist description.. field, enter Hello World Html.

   • In the Filename including extension.. field, enter test.html.

   • Add the following markdown to the multiline textbox:

   • Select the Create public gist button.

Create an Outlook add-in project

Important

Spaces are not currently permitted in the add-in project name or anywhere in the folder path where you create your add-in project. If your add-in's project name or folder path contains spaces, the local web server won't start when you run npm start or npm run start:web. This limitation is temporary and will be eliminated when the underlying issue is resolved in the Yeoman generator for Office Add-ins.

Use the Yeoman generator to create an Outlook add-in project.

1. Run the following command from the command prompt and then answer the prompts as follows:

   • Choose a project type - Office Add-in Task Pane project

   • Choose a script type - Javascript

   • What do you want to name your add-in? - git-the-gist

   • Which Office client application would you like to support? - Outlook

   After you complete the wizard, the generator will create the project and install supporting Node components.

2. Navigate to the root directory of the project.

3. This add-in will use the following libraries:

   • Showdown library to convert Markdown to HTML
   • URI.js library to build relative URLs.
   • jquery library to simplify DOM interactions.

   To install these tools for your project, run the following command in the root directory of the project:

Update the manifest

The manifest for an add-in controls how it appears in Outlook. It defines the way the add-in appears in the add-in list and the buttons that appear on the ribbon, and it sets the URLs for the HTML and JavaScript files used by the add-in.

Specify a support page

The manifest that the generator creates contains a placeholder value for the SupportUrl element that's not a valid URL. To prevent the file from failing validation, complete the following steps:

1. In the root directory of the project, create a new file named support.html and add the following markup.

2. Open the manifest.xml file and update the SupportUrl element to point to the support.html file that you created.

Specify basic information

Next, make the following updates in the manifest.xml file to specify some basic information about the add-in:

1. Locate the ProviderName element and replace the default value with your company name.

2. Locate the Description element, replace the default value with a description of the add-in, and save the file.

Test the generated add-in

Before going any further, let's test the basic add-in that the generator created to confirm that the project is set up correctly.

Note

Office Add-ins should use HTTPS, not HTTP, even when you are developing. If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

Tip

If you're testing your add-in on Mac, run the following command before proceeding. When you run this command, the local web server will start.

1. Run the following command in the root directory of your project. When you run this command, the local web server will start (if it's not already running).

2. Follow the instructions in Sideload Outlook add-ins for testing to sideload the manifest.xml file that's located in the root directory of the project.

3. In Outlook, open an existing message and select the Show Taskpane button. If everything's been set up correctly, the task pane will open and render the add-in's welcome page.

Define buttons

Now that you've verified the base add-in works, you can customize it to add more functionality. By default, the manifest only defines buttons for the read message window. Let's update the manifest to remove the buttons from the read message window and define two new buttons for the compose message window:

• Insert gist: a button that opens a task pane

• Insert default gist: a button that invokes a function

Remove the MessageReadCommandSurface extension point

Open the manifest.xml file and locate the ExtensionPoint element with type MessageReadCommandSurface. Delete this ExtensionPoint element (including its closing tag) to remove the buttons from the read message window.

Add the MessageComposeCommandSurface extension point

Locate the line in the manifest that reads </DesktopFormFactor>. Immediately before this line, insert the following XML markup. Note the following about this markup:

• The ExtensionPoint with xsi:type='MessageComposeCommandSurface' indicates that you're defining buttons to add to the compose message window.

• By using an OfficeTab element with id='TabDefault', you're indicating you want to add the buttons to the default tab on the ribbon.

• The Group element defines the grouping for the new buttons, with a label set by the groupLabel resource.

• The first Control element contains an Action element with xsi:type='ShowTaskPane', so this button opens a task pane.

• The second Control element contains an Action element with xsi:type='ExecuteFunction', so this button invokes a JavaScript function contained in the function file.

Update resources in the manifest

The previous code references labels, tooltips, and URLs that you need to define before the manifest will be valid. You'll specify this information in the Resources section of the manifest.

1. Locate the Resources element in the manifest file and delete the entire element (including its closing tag).

2. In that same location, add the following markup to replace the Resources element you just removed:

3. Save your changes to the manifest.

Reinstall the add-in

Since you previously installed the add-in from a file, you must reinstall it in order for the manifest changes to take effect.

1. Follow the instructions in Sideload Outlook add-ins for testing to locate the Custom add-ins section at the bottom of the My add-ins dialog box.

2. Select the .. button next to the Git the gist entry and then choose Remove.

3. Close the My add-ins window.

4. The custom button should disappear from the ribbon momentarily.

5. Follow the instructions in Sideload Outlook add-ins for testing to reinstall the add-in using the updated manifest.xml file.

After you've reinstalled the add-in, you can verify that it installed successfully by checking for the commands Insert gist and Insert default gist in a compose message window. Note that nothing will happen if you select either of these items, because you haven't yet finished building this add-in.

• If you're running this add-in in Outlook 2016 or later on Windows, you should see two new buttons in the ribbon of the compose message window: Insert gist and Insert default gist.

• If you're running this add-in in Outlook on the web, you should see a new button at the bottom of the compose message window. Select that button to see the options Insert gist and Insert default gist.

Implement a first-run experience

This add-in needs to be able to read gists from the user's GitHub account and identify which one the user has chosen as the default gist. In order to achieve these goals, the add-in must prompt the user to provide their GitHub username and choose a default gist from their collection of existing gists. Complete the steps in this section to implement a first-run experience that will display a dialog to collect this information from the user.

Collect data from the user

Microsoft Outlook Toolbar

Let's start by creating the UI for the dialog itself. Within the ./src folder, create a new subfolder named settings. In the ./src/settings folder, create a file named dialog.html, and add the following markup to define a very basic form with a text input for a GitHub username and an empty list for gists that'll be populated via JavaScript.

Next, create a file in the ./src/settings folder named dialog.css, and add the following code to specify the styles that are used by dialog.html.

Now that you've defined the dialog UI, you can write the code that makes it actually do something. Create a file in the ./src/settings folder named dialog.js and add the following code. Note that this code uses jQuery to register events and uses the messageParent function to send the user's choices back to the caller.

Update webpack config settings

Finally, open the file webpack.config.js file in the root directory of the project and complete the following steps.

1. Locate the entry object within the config object and add a new entry for dialog.

   After you've done this, the new entry object will look like this:

2. Locate the plugins array within the config object and add these two new objects to the end of that array.

   After you've done this, the new plugins array will look like this:

3. If the web server is running, close the node command window.

4. Run the following command to rebuild the project.

5. Run the following command to start the web server.

Fetch data from GitHub

The dialog.js file you just created specifies that the add-in should load gists when the change event fires for the GitHub username field. To retrieve the user's gists from GitHub, you'll use the GitHub Gists API.

Within the ./src folder, create a new subfolder named helpers. In the ./src/helpers folder, create a file named gist-api.js, and add the following code to retrieve the user's gists from GitHub and build the list of gists.

Note

You may have noticed that there's no button to invoke the settings dialog. Instead, the add-in will check whether it has been configured when the user selects either the Insert default gist button or the Insert gist button. If the add-in has not yet been configured, the settings dialog will prompt the user to configure before proceeding.

Implement a UI-less button

This add-in's Insert default gist button is a UI-less button that will invoke a JavaScript function, rather than open a task pane like many add-in buttons do. When the user selects the Insert default gist button, the corresponding JavaScript function will check whether the add-in has been configured.

• If the add-in has already been configured, the function will load the content of the gist that the user has selected as the default and insert it into the body of the message.

• If the add-in hasn't yet been configured, then the settings dialog will prompt the user to provide the required information.

Update the function file (HTML)

A function that's invoked by a UI-less button must be defined in the file that's specified by the FunctionFile element in the manifest for the corresponding form factor. This add-in's manifest specifies https://localhost:3000/commands.html as the function file.

Open the file ./src/commands/commands.html and replace the entire contents with the following markup.

Update the function file (JavaScript)

Open the file ./src/commands/commands.js and replace the entire contents with the following code. Note that if the insertDefaultGist function determines the add-in has not yet been configured, it adds the ?warn=1 parameter to the dialog URL. Doing so makes the settings dialog render the message bar that's defined in ./settings/dialog.html, to tell the user why they're seeing the dialog.

Create a file to manage configuration settings

The HTML function file references a file named addin-config.js, which doesn't yet exist. Create a file named addin-config.js in the ./src/helpers folder and add the following code. This code uses the RoamingSettings object to get and set configuration values.

Create new functions to process gists

Next, open the ./src/helpers/gist-api.js file and add the following functions. Note the following:

• If the gist contains HTML, the add-in will insert the HTML as-is into the body of the message.

• If the gist contains Markdown, the add-in will use the Showdown library to convert the Markdown to HTML, and will then insert the resulting HTML into the body of the message.

• If the gist contains anything other than HTML or Markdown, the add-in will insert it into the body of the message as a code snippet.

Test the button

Save all of your changes and run npm start from the command prompt, if the server isn't already running. Then complete the following steps to test the Insert default gist button.

1. Open Outlook and compose a new message.

2. In the compose message window, select the Insert default gist button. You should be prompted to configure the add-in.

3. In the settings dialog, enter your GitHub username and then either Tab or click elsewhere in the dialog to invoke the change event, which should load your list of gists. Select a gist to be the default, and select Done.

4. Select the Insert default gist button again. This time, you should see the contents of the gist inserted into the body of the email.

   Note

   Outlook on Windows: To pick up the latest settings, you may need to close and reopen the compose message window.

Implement a task pane

This add-in's Insert gist button will open a task pane and display the user's gists. The user can then select one of the gists to insert into the body of the message. If the user has not yet configured the add-in, they will be prompted to do so.

Specify the HTML for the task pane

In the project that you've created, the task pane HTML is specified in the file ./src/taskpane/taskpane.html. Open that file and replace the entire contents with the following markup.

Specify the CSS for the task pane

In the project that you've created, the task pane CSS is specified in the file ./src/taskpane/taskpane.css. Open that file and replace the entire contents with the following code.

Specify the JavaScript for the task pane

In the project that you've created, the task pane JavaScript is specified in the file ./src/taskpane/taskpane.js. Open that file and replace the entire contents with the following code.

Test the button

Save all of your changes and run npm start from the command prompt, if the server isn't already running. Then complete the following steps to test the Insert gist button.

1. Open Outlook and compose a new message.

2. In the compose message window, select the Insert gist button. You should see a task pane open to the right of the compose form.

3. In the task pane, select the Hello World Html gist and select Insert to insert that gist into the body of the message.

Next steps

In this tutorial, you've created an Outlook add-in that can be used in message compose mode to insert content into the body of a message. To learn more about developing Outlook add-ins, continue to the following article:

In Outlook, images can be added to a contact form or to an Electronic Business Card. This helps you put a face to a name or a quickly match a logo to a company contact.

If both the sender and the recipient use Outlook, a contact picture appears in e-mail messages when the sender includes a contact photo. The picture appears in the message header of the open message and in the header of the message.

To add, remove, or change a picture for a contact, switch to your Contacts folder and edit the contact.

For steps to change your own Outlook photo, see Change my photo.

Add a photo

Note: Photos you add are only visible on your computer.

1. On the Navigation Bar, click People.

2. Find the contact you want to edit. You can type the contact's name in the Search box at the top of your contacts folder to filter your contacts.

3. Double-click to open the contact.

4. Double-click the contact picture or the placeholder image that's shown for contacts without a picture.

   Browse to select a picture for the contact, then click OK.

   Tip: Outlook can use .jpg, .png, .gif, .bmp, or .tif file formats.

5. Save and close the contact.

Change a contact photo

1. On the Navigation Bar, click People.

2. Find the contact you want to edit. You can type the contact's name in the Search box at the top of your contacts folder to filter your contacts.

3. Double-click to open the contact.

4. Right-click the current contact photo.

   Select either Change Picture or Remove Picture.

5. Save and close the contact.

Outlook 2007 accepts most standard graphics file formats, including .jpg, .png, .gif, .bmp, .tif, .exf, and .ico.

Add a picture

If both the sender and the recipient are using Office Outlook 2007, a contact picture is displayed in messages received if the sender uses a contact photo. The picture appears in the message header of the open message and in the header of the message in the Reading Pane. You can double-click the contact picture to open the contact or right-click it for other contact options.

Note: For the picture to display, the contact must also be saved in an Outlook Contact folder and that Contact folder must be designated as an Outlook Address Book. These are the default settings when creating contacts in Microsoft Outlook. If you don't see the picture included with a contact, check to see if the default settings have been changed.

Microsoft Outlook Toolbar Buttons

Tip: Using high resolution images closely matching the 90 by 90 pixel size provides the best picture quality results.

My high-quality image is still blurry

When you add an image to a contact in the contact form, the image is automatically sized to fit into the space reserved for the contact picture on the form, 90 pixels by 90 pixels.

1. In Contacts, do one of the following:

   • Open an existing contact.

   • On the toolbar, click New. This opens a blank contact form in which to add contact information and a picture.

2. On the Contact tab, in the Options group, click Picture, and then click Add Picture.

   Tip: You can also click the space for the contact picture, and then browse to find an image.

3. Locate the picture that you want to add, and then double-click it.

Change a picture

1. In Contacts, open a contact.

2. On the Contact tab, in the Options group, click Picture, and then click Change Picture.

3. Locate the picture that you want to change, and then double-click it.

Remove a picture

1. In Contacts, open a contact.

2. On the Contact tab, in the Options group, click Picture, and then click Remove Picture.

Update the picture on the Electronic Business Card to match the contact picture

If an Electronic Business Card already has an image (besides the default Outlook image), such as a photo or a logo, associated with it, the image that you add to a contact in the contact form does not replace the image on the card. To update the picture on the card, click the Reset button in the Edit Business Card dialog box.

How do I open the Edit Business Card dialog box?

How To Add Webex To Outlook Toolbar

Important: Resetting the business card also updates any other new contact information on the card. It also resets all the card's formatting to the default, except for the picture. The formatting includes font, background colors, text size, and alignment.

Dvdx wad installer wii. Electronic Business Card showing the default image, positioned on the left, and default formatting.

Download Outlook Toolbar

If you don't update the image on the Electronic Business Card, the new picture is displayed on the contact form, while you see the existing picture on the Electronic Business Card and in Business Cards view.

Use different images for the contact and the Electronic Business Card

If an Electronic Business Card already has an image that is not the default Outlook image — such as a photo or a logo — an image that you add to the contact form does not replace the image on the card.

For example, you receive an Electronic Business Card from Jon Morris of Contoso, Ltd. Jon's card has the Contoso logo on it, which you want to keep, yet you want to add a picture of Jon to his contact form so that you can recognize him the next time he is in town for a meeting.

If you add a picture to the contact form, you still see the original image on the Electronic Business Card and in Business Cards view unless you update the image on the business card in the Edit Business Card dialog box.

Important: Updating (resetting) the business card also updates any other new contact information on the card. It also resets all the card's formatting to the default (except for the picture). This includes font and background colors and text size and alignment. Take this into consideration when you are working with custom-designed cards.

To add an image only to the contact form:

1. In an open contact, on the Contact tab, in the Options group, click Picture, and then click Add Picture.

   Tip: You can also click the space for the contact picture and browse to find an image.

2. Locate the picture that you want to add, and then double-click it.

   The picture is automatically sized to fit the contact picture space.

3. Click Save and Close.

   Note: Do not open the Electronic Business Card and update that view of the contact. Clicking the Reset button updates the card, replacing the card's image with the new contact picture.