Crear el primer complemento de Outlook

Cree un complemento de panel de tareas para Outlook que lea el asunto de un mensaje seleccionado. En este inicio rápido se usa el generador de complementos de Yeoman para Office (Yo Office) para andamiar el proyecto, de modo que pueda centrarse en escribir código de API JavaScript de Office inmediatamente.

Requisitos previos

• Node.js (la versión más reciente de Active LTS). Visite el sitioNode.js para descargar e instalar la versión adecuada para su 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, es posible que sea apto para una suscripción de desarrollador de Microsoft 365 E5 a través del Programa de desarrollador de Microsoft 365; para obtener más información, consulte las preguntas frecuentes. Como alternativa, puede registrarse para obtener una prueba gratuita de 1 mes o comprar un plan de Microsoft 365.

• Outlook en la Web, nuevo Outlook en Windows, Outlook 2016 o posterior en Windows (conectado a una cuenta de Microsoft 365) o Outlook en Mac.

Creación del proyecto de complemento

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

   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 quiere asignar al complemento? - My Office Add-in
   • ¿Qué aplicación cliente de Office desea admitir? - Outlook
   • ¿Qué manifiesto quiere usar? - Elija uno o Unified manifest for Microsoft 365Add-in only manifest

   Nota:

   El manifiesto unificado para Microsoft 365 le permite combinar un complemento de Office con una aplicación de Teams en una aplicación para Microsoft 365 como una única unidad de desarrollo e implementación. Para obtener más información, vea Complementos de Office con el manifiesto unificado. Para obtener un ejemplo de una aplicación para Microsoft 365 que combina una aplicación de Teams y un complemento de Outlook, vea Ofertas de descuento.

   Nos encanta recibir sus comentarios sobre el manifiesto unificado. Si tiene alguna sugerencia, cree un problema en el repositorio de la biblioteca de JavaScript de Office.

   Según la elección del manifiesto, las consultas y respuestas deben tener un aspecto similar al siguiente:

   

   

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

2. Navegue hasta la carpeta raíz del proyecto de la aplicación web.

   cd "My Office Add-in"
   

Explorar el proyecto

El generador Yeoman crea un proyecto en una carpeta con el nombre del proyecto que eligió. El proyecto contiene código de ejemplo para un complemento de panel de tareas muy básico. Los siguientes son los archivos más importantes.

• El archivo ./manifest.json o ./manifest.xml del directorio raíz del proyecto define la configuración y las capacidades 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 Outlook.

Pruébelo

1. Ejecute el siguiente comando en el directorio raíz del proyecto. Al ejecutar este comando, se inicia el servidor web local y se transfiere localmente el complemento.

   npm start
   

   Nota:

   • Cuando usa 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 se produce un error de instalación de prueba o de tiempo de espera de inicio de sesión, ejecútelo atk auth login m365 antes de volver a ejecutarlo npm start .

   • Si el complemento no se transfirió localmente automáticamente, siga las instrucciones de Instalación de prueba de complementos de Outlook para realizar una instalación de prueba de la transferencia local del complemento en Outlook.

2. En Outlook, vea un mensaje en el Panel de lecturao abra el mensaje en su propia ventana.

3. Seleccione el botón Mostrar panel de tareas para abrir el panel de tareas del complemento. La ubicación del botón del complemento varía según el cliente de Outlook que use.

   • Outlook en la Web y nuevo Outlook en Windows: En la barra de acciones del mensaje, seleccione Aplicaciones. Después, seleccione Mi complemento de OfficeMostrar panel de > tareas.
   • Outlook clásico en Windows: seleccione la pestaña Inicio (o la pestaña Mensaje si abrió el mensaje en una ventana nueva). A continuación, seleccione Mostrar panel de tareas en la cinta de opciones.
   • Outlook en Mac: Seleccione el complemento Mi Office en la cinta de opciones y, a continuación, seleccione Mostrar panel de tareas. Es posible que deba seleccionar el botón de puntos suspensivos (...) de la cinta de opciones para ver los complementos.

   Las siguientes capturas de pantalla muestran cómo aparece el complemento en la versión clásica de Outlook en Windows.

   

4. Cuando se le solicite el cuadro de diálogo WebView Stop On Load, seleccione Aceptar.

   Nota:

   Si selecciona Cancelar, no se volverá a mostrar el cuadro de diálogo mientras se esté ejecutando esta instancia del complemento. Sin embargo, si reinicia el complemento, verá el cuadro de diálogo de nuevo.

5. Desplácese hasta la parte inferior del panel de tareas y seleccione el vínculo Ejecutar para escribir el asunto del mensaje en el panel de tareas.

   

   

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

   • Para detener el servidor, ejecute el siguiente comando. Si ha utilizado npm start, el siguiente comando también debería desinstalar el complemento.

     npm stop
     

   • Si transfirió localmente el complemento, vea Quitar un complemento transferido localmente.

Pasos siguientes

Enhorabuena, ha creado correctamente su primer complemento de Outlook. A continuación, explore más posibilidades de un complemento de Outlook siguiendo el tutorial del complemento de Outlook. En el tutorial, creará un complemento más complejo que incorpore un panel de tareas, sobre el que aprendió en el inicio rápido. Además, creará un botón que invoca una función sin interfaz de usuario.

Solución de problemas

• Asegúrese de que el entorno está listo para el desarrollo de Office siguiendo las instrucciones de Configurar el entorno de desarrollo.

• Es posible que se produzca un error en el paso automático npm install que realice 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 con el generador de Yeoman.

• Es posible que vea advertencias generadas cuando se ejecuta npm install para el generador Yeoman o el proyecto. En la mayoría de los casos, puede ignorar estas advertencias sin problemas. A veces, las dependencias quedan obsoletas y sus reemplazos no son compatibles con otros paquetes de los que depende el proyecto. Si desea resolver estas advertencias, utilice la npm-check-updates herramienta.

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

  Para obtener más información sobre las advertencias al ejecutar npm install, consulte 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 Complementosen la pestaña Inicio de la cinta y, a continuación, elija el complemento de prueba.

• Si recibe el error "No se puede abrir este complemento desde localhost" en el panel de tareas, siga los pasos descritos en el artículo de solución de problemas.

Ejemplos de código

• Complemento "Hola mundo" de Outlook: aprenda a crear un complemento de Office sencillo con solo un manifiesto, una página web HTML y un logotipo.

Vea también

• Complementos de Office con el manifiesto de solo complemento
• Uso de Visual Studio Code para publicar