Crear el primer complemento de panel de tareas de Project

Este artículo le guiará a través del proceso de creación de un complemento de panel de tareas de Project.

Requisitos previos

Nota

Si no está familiarizado con Node.js o npm, debe empezar por configurar el entorno de desarrollo.

  • Node.js (la última versión de LTS).

  • La versión más reciente de Yeoman y Generador de Yeoman para complementos de Office. Para instalar estas herramientas globalmente, ejecute el siguiente comando desde el símbolo del sistema.

    npm install -g yo generator-office
    

    Nota

    Incluso si ha instalado previamente el generador de Yeoman, se recomienda actualizar el paquete a la versión más reciente de npm.

  • Project 2016 o posterior en Windows

Crear el complemento

Ejecute el siguiente comando para crear un proyecto de complemento con el generador Yeoman.

yo office

Nota

Cuando ejecute el comando yo office, es posible que reciba mensajes sobre las directivas de recopilación de datos de Yeoman y las herramientas de la CLI de complementos de Office. Use la información adecuada que se proporciona para responder a los mensajes.

Cuando se le pida, proporcione la siguiente información para crear el proyecto de complemento.

  • Elija un tipo de proyecto: Office Add-in Task Pane project
  • Elija un tipo de script: Javascript
  • ¿Qué nombre desea asignar al complemento? My Office Add-in
  • ¿Qué aplicación cliente de Office desea admitir? Project

Captura de pantalla que muestra las preguntas y respuestas del generador Yeoman en una interfaz de línea de comandos.

Después de completar el asistente, el generador creará el proyecto e instalará componentes auxiliares de Node.

Sugerencia

Se pueden pasar por alto las instrucciones de los pasos siguientes que el generador de Yeoman ofrece después de que se haya creado el proyecto de complemento. Las instrucciones paso a paso de este artículo le dan toda la información que necesitará para completar este tutorial.

Explorar el proyecto

El proyecto de complemento que ha creado con el generador Yeoman contiene código de ejemplo para un complemento de panel de tareas muy básico.

  • El archivo ./manifest.xml en el directorio raíz del proyecto define la configuración y las funciones del complemento.
  • El archivo ./src/taskpane/taskpane.html contiene el marcado HTML para el panel de tareas.
  • El archivo ./src/taskpane/taskpane.css contiene la CSS que se aplica al contenido en el panel de tareas.
  • El archivo ./src/taskpane/taskpane.js contiene el código de la API de JavaScript de Office que facilita la interacción entre el panel de tareas y la aplicación cliente de Office.

Actualizar el código

En el editor de código, abra el archivo ./src/taskpane/taskpane.js y agregue el siguiente código desde la función run. Este código usa la API de JavaScript de Office para establecer el campo Name y el campo Notes de la tarea seleccionada.

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);
        }
    }
);

Pruébelo

  1. Navegue hasta la carpeta raíz del proyecto.

    cd "My Office Add-in"
    
  2. Inicie el servidor web local.

    Nota

    Los complementos de Office deben usar HTTPS y no HTTP, incluso cuando está desarrollando. Si le pedirá que instale un certificado después de ejecutar uno de los siguientes comandos, acepte la solicitud para instalar el certificado que proporciona el generador Yeoman. Es posible que también deba ejecutar el símbolo del sistema o el terminal como administrador para que se realicen los cambios.

    Ejecute el siguiente comando en el directorio raíz del proyecto. Al ejecutar este comando, se iniciará el servidor web local.

    npm run dev-server
    
  3. En Project, cree un plan de proyecto sencillo.

  4. Cargue el complemento en Project siguiendo las instrucciones de Transferir localmente complementos de Office en Windows.

  5. Seleccione una tarea única en el proyecto.

  6. En la parte inferior del panel de tareas, seleccione el vínculo Ejecutar para renombrar la tarea seleccionada y agregue notas a la tarea seleccionada.

    Captura de pantalla de la aplicación Project con el complemento de panel de tareas cargado.

Siguientes pasos

¡Bravo! Creó correctamente un complemento del panel de tareas de Project. A continuación, obtenga más información sobre las funciones de un complemento de Project y explore los escenarios comunes.

Consulte también