Создание первой надстройки области задач ProjectBuild 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 и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.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.

  • Project 2016 или более поздней версии для WindowsProject 2016 or later on Windows

Создание надстройкиCreate the add-in

С помощью генератора 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.

Знакомство с проектом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 содержит код API JavaScript для Office, который упрощает взаимодействие между областью задач и ведущим приложением Office.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. В этом коде используется API JavaScript для Office, чтобы настроить поле 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. Запустите локальный веб-сервер.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. После выполнения этой команды запустится локальный веб-сервер.When you run this command, the local web server will start.

    npm start
    
  3. В Project создайте простой план проекта.In Project, create a simple project plan.

  4. Загрузите свою надстройку в Project, следуя инструкциям в статье Загрузка неопубликованных надстроек Office в Windows.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.