You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.
If you've already completed the Build your first PowerPoint task pane add-in quick start using the Yeoman generator, and want to use that project as a starting point for this tutorial, go directly to the Insert an image section to start this tutorial.
If you don't already have Office, you might qualify for a Microsoft 365 E5 developer subscription through the Microsoft 365 Developer Program; for details, see the FAQ. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.
When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Use the information that's provided to respond to the prompts as you see fit.
If you're using Node.js version 20.0.0 or later, you may see a warning when the generator runs the installation that you have an unsupported engine. We're working on a fix for this. In the meantime, the warning doesn't affect the generator or the project you generate, so it can be ignored.
You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.
On Windows, you can navigate to the root directory of the project via the command line and then enter code . to open that folder in VS Code. On Mac, you'll need to add the code command to the path before you can use that command to open the project folder in VS Code.
Open the file ./src/taskpane/taskpane.js. This file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office client application. Replace the entire contents with the following code and save the file.
In the taskpane.js file above the Office.onReady function call near the top of the file, replace TODO1 with the following code. This code imports the variable that you defined previously in the file ./base64Image.js.
In the taskpane.js file, replace TODO3 with the following code to define the insertImage function. This function uses the Office JavaScript API to insert the image into the document. Note:
Office Add-ins should use HTTPS, not HTTP, even while you're developing. If you're 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. You may also have to run your command prompt or terminal as an administrator for the changes to be made.
To test your add-in in PowerPoint, run the following command in the root directory of your project. This starts the local web server (if it's not already running) and opens PowerPoint with your add-in loaded.
To test your add-in in PowerPoint on a browser, run the following command in the root directory of your project. When you run this command, the local web server starts. Replace "url" with the URL of a PowerPoint document on your OneDrive or a SharePoint library to which you have permissions.
In the taskpane.js file, replace TODO7 with the following code to define the getSlideMetadata function. This function retrieves metadata for the selected slides and writes it to the Message section in the add-in task pane.
In the task pane, choose the Get Slide Metadata button to get the metadata for the selected slide. The slide metadata is written in the Message section below the buttons in the task pane. In this case, the slides array within the JSON metadata contains one object that specifies the id, title, and index of the selected slide. If multiple slides had been selected when you retrieved slide metadata, the slides array within the JSON metadata would contain one object for each selected slide.
In the taskpane.js file, replace TODO9 with the following code to define the addSlides and navigation functions. Each of these functions uses the goToByIdAsync method to select a slide based upon its position in the document (first, last, previous, and next).
If you don't already have Office, you might qualify for a Microsoft 365 E5 developer subscription to use for development through the Microsoft 365 Developer Program; for details, see the FAQ. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.
The following NuGet packages must be installed. Install them on the HelloWorldWeb project using the NuGet Package Manager in Visual Studio. See Visual Studio help for instructions. The second of these may be installed automatically when you install the first.
When you're using the NuGet Package Manager to install these packages, do not install the recommended update to jQuery. The jQuery version installed with your Visual Studio solution matches the jQuery call within the solution files.
Use the NuGet Package Manager to update the Newtonsoft.Json package to version 13.0.3 or later. Then delete the app.config file if it was added to the HelloWorld project.
Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.
The scaffolding process doesn't complete properly on some versions of Visual Studio after version 16.10.3. If you have the Global.asax and ./App_Start/WebApiConfig.cs files, then skip to step 6.
Replace the entire contents of the PhotoController.cs file with the following code that calls the Bing service to retrieve the photo of the day as a Base64-encoded string. When you use the Office JavaScript API to insert an image into a document, the image data must be specified as a Base64-encoded string.
In the Home.js file, replace TODO2 with the following code to define the insertImage function. This function fetches the image from the Bing web service and then calls the insertImageFromBase64String function to insert that image into the document.
In the Home.js file, replace TODO3 with the following code to define the insertImageFromBase64String function. This function uses the Office JavaScript API to insert the image into the document. Note:
c80f0f1006