Muokkaa

Jaa

Build your first PowerPoint content add-in

  • Artikkeli

In this article, you'll walk through the process of building a PowerPoint content add-in using Visual Studio.

Prerequisites

  • Visual Studio 2019 or later with the Office/SharePoint development workload installed.

    Note

    If you've previously installed Visual Studio, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Office connected to a Microsoft 365 subscription (including Office on the web).

Create the add-in project

  1. In Visual Studio, choose Create a new project.

  2. Using the search box, enter add-in. Choose PowerPoint Web Add-in, then select Next.

  3. Name your project and select Create.

  4. In the Create Office Add-in dialog window, choose Insert content into PowerPoint slides, and then choose Finish to create the project.

  5. Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Explore the Visual Studio solution

When you've completed the wizard, Visual Studio creates a solution that contains two projects.

Project Description
Add-in project Contains only an XML-formatted add-in only manifest file, which contains all the settings that describe your add-in. These settings help the Office application determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. Change these settings any time by modifying the XML file.
Web application project Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

Update the code

  1. Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, find the <p> element that contains the text "This example will read the current document selection." and the <button> element where the id is "get-data-from-selection". Replace these entire elements with the following markup then save the file.

    <p class="ms-font-m-plus">This example will get some details about the current slide.</p>

<button class="Button Button--primary" id="get-data-from-selection">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Get slide details</span>
    <span class="Button-description">Gets and displays the current slide's details.</span>
</button>

  2. Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Find the getDataFromSelection function and replace the entire function with the following code then save the file.

    // Gets some details about the current slide and displays them in a notification.
function getDataFromSelection() {
    if (Office.context.document.getSelectedDataAsync) {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    showNotification('Some slide details are:', '"' + JSON.stringify(result.value) + '"');
                } else {
                    showNotification('Error:', result.error.message);
                }
            }
        );
    } else {
        app.showNotification('Error:', 'Reading selection data is not supported by this host application.');
    }
}

Update the manifest

  1. Open the add-in only manifest file in the add-in project. This file defines the add-in's settings and capabilities.

  2. The ProviderName element has a placeholder value. Replace it with your name.

  3. The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

  4. The DefaultValue attribute of the Description element has a placeholder. Replace it with A content add-in for PowerPoint..

  5. Save the file. The updated lines should look like the following code sample.

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A content add-in for PowerPoint."/>
...

Try it out

  1. Using Visual Studio, test the newly created PowerPoint add-in by pressing F5 or choosing the Start button to launch PowerPoint with the content add-in displayed over the slide.

  2. In PowerPoint, choose the Get slide details button in the content add-in to get details about the current slide.

    The add-in content open in PowerPoint.

Note

To see the console.log output, you'll need a separate set of developer tools for a JavaScript console. To learn more about F12 tools and the Microsoft Edge DevTools, visit Debug add-ins using developer tools for Internet Explorer, Debug add-ins using developer tools for Edge Legacy, or Debug add-ins using developer tools in Microsoft Edge (Chromium-based).

Next steps

Congratulations, you've successfully created a PowerPoint content add-in! Next, learn more about developing Office Add-ins with Visual Studio.

Troubleshooting

  • If your add-in shows an error (for example, "This add-in could not be started. Close this dialog to ignore the problem or click "Restart" to try again.") when you press F5 or choose Debug > Start Debugging in Visual Studio, see Debug Office Add-ins in Visual Studio for other debugging options.

See also