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

本文将逐步介绍如何生成 Project 任务窗格加载项。In this article, you'll walk through the process of building a Project 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

运行以下命令以使用 Yeoman 生成器创建外接程序项目:Run the following command to create an add-in project using the Yeoman generator:

yo office

备注

运行yo office命令时,您可能会收到有关 Yeoman 和 Office 加载项 CLI 工具的数据收集策略的提示。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.

出现提示时,请提供以下信息来创建外接程序项目:When prompted, provide the following information to create your add-in project:

  • 选择项目类型: 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.

提示

您可以忽略 Yeoman 生成器在创建外接程序项目后提供的后续步骤指南。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.

浏览项目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. 导航到项目的根文件夹。Navigate to the root folder of the project.

    cd "My Office Add-in"
    
  2. 启动本地 Web 服务器。Start the local web server and sideload your add-in.

    备注

    Office 加载项应使用 HTTPS,而不是 HTTP(即便是在开发时也是如此)。Office Add-ins should use HTTPS, not HTTP, even when you are developing. 如果系统在运行以下命令后提示你安装证书,请接受提示以安装 Yeoman 生成器提供的证书。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.

    在项目的根目录中运行以下命令。Run the following command in the root directory of your project. 运行此命令时,本地 Web 服务器将启动。When you run this command, the local web server will start.

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

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

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

  6. 在任务窗格的底部,选择“运行”链接以重命名所选任务并向所选任务添加备注。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 Project task pane add-in! 接下来,请详细了解 Project 加载项功能,并探索常见方案。Next, learn more about the capabilities of a Project add-in and explore common scenarios.