生成首个 Project 任务窗格加载项Build your first PowerPoint task pane add-in

本文将逐步介绍如何生成 Project 任务窗格加载项。In this article, you'll walk through the process of building a PowerPoint task pane add-in.

先决条件Prerequisites

  • Node.js(版本 8.0.0 或更高版本)Node.js (version 8.0.0 or later)

  • GitGit

  • 最新版本的 Yeoman适用于 Office 外接程序的 Yeoman 生成器。若要全局安装这些工具,请从命令提示符处运行以下命令: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:

    npm install -g yo generator-office
    

    备注

    即使以前安装了 Yeoman 生成器, 我们也建议您将程序包从 npm 更新到最新版本。Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

  • Windows 版 Project 2016 或更高版本Project 2016 or later on Windows

创建加载项Create the add-in

  1. 使用 Yeoman 生成器创建 Project 加载项项目。Use the Yeoman generator to create a Project add-in project. 运行下面的命令,再回答如下所示的提示问题:Run the following command and then answer the prompts as follows:

    yo office
    
    • 选择项目类型: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
    • 选择脚本类型: JavascriptChoose a script type: Javascript
    • 要如何命名加载项?What do you want to name your add-in? My Office Add-in
    • 要支持哪一个 Office 客户端应用程序?Which Office client application would you like to support? Project

    有关 Yeoman 生成器提示和回答的屏幕截图

    完成此向导后,生成器会创建项目,并安装支持的 Node 组件。After you complete the wizard, the generator will create the project and install supporting Node components.

  2. 导航到项目的根文件夹。Navigate to the root folder of the project.

    cd "My Office Add-in"
    

浏览项目Explore the project

使用 Yeoman 生成器创建的加载项项目包含适合于基础任务窗格加载项的示例代码。The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in.

  • 项目根目录中的 ./manifest.xml 文件定义加载项的设置和功能。The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • ./src/taskpane/taskpane.html 文件包含组成任务窗格的 HTML。The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • ./src/taskpane/taskpane.css 文件包含应用于任务窗格中的内容的 CSS。The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • ./src/taskpane/taskpane.js 文件包含用于加快任务窗格与 Office 托管应用程序之间的交互的 Office JavaScript API 代码。The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

更新代码Update the code

在代码编辑器中,打开文件 ./src/taskpane/taskpane.js 并在 run 函数中添加以下代码。In your code editor, open the file ./src/taskpane/taskpane.js and add the following code within the run function. 此代码使用 Office JavaScript API 设置所选任务的 Name 字段和 Notes 字段。This code uses the Office JavaScript API to set the Name field and Notes field of the selected task.

var taskGuid;

// Get the GUID of the selected task
Office.context.document.getSelectedTaskAsync(
    function (result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            taskGuid = result.value;

            // Set the specified fields for the selected task.
            var targetFields = [Office.ProjectTaskFields.Name, Office.ProjectTaskFields.Notes];
            var fieldValues = ['New task name', 'Notes for the task.'];

            // Set the field value. If the call is successful, set the next field.
            for (var i = 0; i < targetFields.length; i++) {
                Office.context.document.setTaskFieldAsync(
                    taskGuid,
                    targetFields[i],
                    fieldValues[i],
                    function (result) {
                        if (result.status === Office.AsyncResultStatus.Succeeded) {
                            i++;
                        }
                        else {
                            var err = result.error;
                            console.log(err.name + ' ' + err.code + ' ' + err.message);
                        }
                    }
                );
            }
        } else {
            var err = result.error;
            console.log(err.name + ' ' + err.code + ' ' + err.message);
        }
    }
);

试用Try it out

  1. 通过运行以下命令启用本地 Web 服务器:Start the local web server by running the following command:

    npm start
    

    备注

    Office 加载项应使用 HTTPS,而不是 HTTP(即便是在开发时也是如此)。Office Add-ins should use HTTPS, not HTTP, even when you are developing. 如果系统在运行 npm start 后提示你安装证书,请接受提示以安装 Yeoman 生成器提供的证书。If you are prompted to install a certificate after you run npm start, accept the prompt to install the certificate that the Yeoman generator provides.

  2. 在 Project 中,创建一个简单的项目计划。In Project, create a simple project plan.

  3. 按照在 Windows 上旁加载 Office 加载项中的说明,在 Project 中加载你的加载项。Load your add-in in Project by following the instructions in Sideload Office Add-ins on Windows.

  4. 在项目中选择单个任务。Select a single task within the project.

  5. 在任务窗格的底部,选择“运行”链接以重命名所选任务并向所选任务添加备注。At the bottom of the task pane, choose the Run link to rename the selected task and add notes to the selected task.

    加载了任务窗格加载项的 Project 应用程序的屏幕截图

后续步骤Next steps

恭喜!已成功创建 Project 任务窗格加载项!Congratulations, you've successfully created a PowerPoint task pane add-in! 接下来,请详细了解 Project 加载项功能,并探索常见方案。Next, learn more about the capabilities of a Project add-in and explore common scenarios.