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

• Node.js (la última versión de LTS). Visite el sitio deNode.js para descargar e instalar la versión correcta para el sistema operativo.

• 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 ya ha instalado el generador Yeoman, recomendamos que actualice el paquete de la versión más reciente desde npm.

• Office está conectado a una suscripción Microsoft 365 (incluido Office en la Web).

  Nota:

  Si aún no tiene Office, puede calificar para una suscripción de desarrollador Microsoft 365 E5 a través del Programa para desarrolladores de Microsoft 365; para obtener más información, consulte las preguntas más frecuentes. Como alternativa, puede registrarse para obtener una evaluación gratuita de 1 mes o comprar un plan de Microsoft 365.

• Project 2016 o posterior en Windows

Crear el complemento

Ejecute el siguiente comando para crear un proyecto de complemento con el generador Yeoman. Se agregará una carpeta que contiene el proyecto al directorio actual.

yo office

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
• ¿Cómo desea asignarle el nombre al complemento?My Office Add-in
• ¿Qué aplicación cliente de Office le gustaría admitir?Project

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

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 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. En este inicio rápido, el código establece el campo Name y el campo Notes de la tarea seleccionada de un proyecto.

Pruébelo

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

   cd "My Office Add-in"
   

2. Complete los pasos siguientes para iniciar el servidor web local y transferir localmente el complemento.

   Nota:

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

   • Si es la primera vez que desarrolla un complemento de Office en el equipo, es posible que se le pida en la línea de comandos que conceda a Microsoft Edge WebView una exención de bucle invertido ("Allow localhost loopback for Microsoft Edge WebView?"). Cuando se le solicite, escriba Y para permitir la exención. Tenga en cuenta que necesitará privilegios de administrador para permitir la exención. Una vez permitido, no se le pedirá una exención al transferir localmente complementos de Office en el futuro (a menos que quite la exención de la máquina). Para obtener más información, consulte "No se puede abrir este complemento desde localhost" al cargar un complemento de Office o mediante Fiddler.

     

   • Cuando use por primera vez el generador de Yeoman para desarrollar un complemento de Office, el explorador predeterminado abre una ventana en la que se le pedirá que inicie sesión en su cuenta de Microsoft 365. Si no aparece una ventana de inicio de sesión y encuentra un error de tiempo de espera de inicio de sesión o de instalación local, ejecute atk auth login m365.

   • Para probar el complemento en Project, ejecute el siguiente comando en el directorio raíz del proyecto. Esto inicia el servidor web local y carga localmente el complemento.

     npm start
     

   Si el complemento no se carga de forma local automáticamente, siga las instrucciones de Instalación local de complementos de Office en Windows para transferir manualmente el complemento en Project.

3. En Project, cree un plan de proyecto sencillo.

4. Seleccione una tarea única en el proyecto.

5. 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.

   

6. Si desea detener el servidor web local y desinstalar el complemento, siga las instrucciones aplicables:

   • Para detener el servidor, ejecute el siguiente comando. Si usó npm start, el siguiente comando también desinstala el complemento.

     npm stop
     

   • Si descargó manualmente el complemento de forma local, consulte Eliminación de un complemento cargado localmente.

Solución de problemas

• Asegúrese de que el entorno está listo para el desarrollo de Office siguiendo las instrucciones de Configuración del entorno de desarrollo.

• Es posible que se produzca un error en el paso automático npm install que realiza Yo Office. Si ve errores al intentar ejecutar npm start, vaya a la carpeta del proyecto recién creada en un símbolo del sistema y ejecute npm installmanualmente . Para obtener más información sobre Yo Office, vea Crear proyectos de complementos de Office mediante el generador de Yeoman.

• Es posible que vea advertencias generadas al ejecutarse npm install para el generador de Yeoman o el proyecto. En la mayoría de los casos, puede omitir estas advertencias de forma segura. A veces, las dependencias quedan en desuso y sus reemplazos no son compatibles con otros paquetes de los que depende el proyecto. Si desea resolver estas advertencias, use la npm-check-updates herramienta .

  • En el símbolo del sistema mientras se encuentra en el directorio del proyecto raíz, ejecute npm i -g npm-check-updates. Esto instala la herramienta globalmente.
  • Ejecute ncu -u. Esto proporciona un informe de todos los paquetes y de las versiones que se actualizarán.
  • Ejecute npm install para actualizar todos los paquetes.

  Para obtener más información sobre las advertencias al ejecutar npm install, vea Advertencias y dependencias en el mundo Node.js y npm.

• Si no ve el botón de complemento en la cinta de opciones (por ejemplo, Mostrar panel de tareas), seleccione el botón Complementos enla pestaña Inicio de la cinta de opciones y elija el complemento de prueba.

Siguientes pasos

Enhorabuena, ha creado correctamente un complemento de panel de tareas de Project. A continuación, obtenga más información sobre las funcionalidades de un complemento de Project y explore los escenarios comunes.

Consulte también

• Información general sobre la plataforma de complementos de Office
• Desarrollo de complementos de Office
• Conceptos básicos de complementos de Office
• Ejemplos de código de complemento de proyecto
• Uso de Visual Studio Code para publicar