Crear un complemento de panel de tareas de Excel

Este artículo le guiará a través del proceso de creación de un complemento de panel de tareas de Excel. Usará el Kit de desarrollo de complementos de Office o el generador de Yeoman para crear el complemento de Office. Seleccione la pestaña del que le gustaría usar y, después, siga las instrucciones para crear el complemento y probarlo localmente. Si desea crear el proyecto de complemento dentro de Visual Studio Code, se recomienda el Kit de desarrollo de complementos de Office.

Kit de desarrollo de complementos de Office

Requisitos previos

• Descargue e instale Visual Studio Code.
• 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. Para comprobar si ya ha instalado estas herramientas, ejecute los comandos node -v y npm -v en el terminal.
• Office conectado a una suscripción de Microsoft 365. Puede calificar para una suscripción de desarrollador de Microsoft 365 E5 a través del Programa para desarrolladores de Microsoft 365, consulte Preguntas más frecuentes para obtener más información. Como alternativa, puede registrarse para obtener una evaluación gratuita de 1 mes o comprar un plan de Microsoft 365.

Creación del proyecto de complemento

Haga clic en el botón siguiente para crear un proyecto de complemento mediante el Kit de desarrollo de complementos de Office para Visual Studio Code. Se le pedirá que instale la extensión si aún no la tiene. Se abrirá una página que contiene la descripción del proyecto en Visual Studio Code.

Creación de un complemento en Visual Studio Code

En la página que se le pide, seleccione Crear para crear el proyecto de complemento. En el cuadro de diálogo Carpeta del área de trabajo que se abre, seleccione la carpeta donde desea crear el proyecto.

El Kit de desarrollo de complementos de Office creará el proyecto. A continuación, abrirá el proyecto en una segunda ventana Visual Studio Code. Cierre la ventana de Visual Studio Code original.

Nota:

Si usa VSCode Insiders o tiene problemas para abrir la página del proyecto en VSCode, instale la extensión manualmente siguiendo estos pasos y busque el ejemplo en la galería de ejemplo.

Explorar el proyecto

El proyecto de complemento que ha creado con el Kit de desarrollo de complementos de Office contiene código de ejemplo para un complemento de panel de tareas básico. Si quiere explorar los componentes del proyecto de complemento, abra el proyecto en el editor de código y revise los archivos que se enumeran a continuación. Cuando esté listo para probar el complemento, vaya a la sección siguiente.

1. El archivo ./manifest.xml o ./manifest.json en el directorio raíz del proyecto define la configuración y las funcionalidades del complemento.
2. El archivo ./src/taskpane/taskpane.html contiene el marcado HTML para el panel de tareas.
3. El archivo ./src/taskpane/taskpane.css contiene la CSS que se aplica al contenido en el panel de tareas.
4. 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.

Pruébelo

1. Para abrir la extensión, seleccione el icono Kit de desarrollo de complementos de Office en la barra de actividad.
2. Seleccione Vista previa del complemento de Office (F5)
3. En el menú Selección rápida, seleccione la opción {Office Application} Desktop (Edge Chromium), donde '{Office Application}' es la aplicación adecuada, como "Excel" o "Word". Esto iniciará el complemento y depurará el código.

El kit de desarrollo comprueba que se cumplen los requisitos previos antes de que se inicie la depuración. Compruebe el terminal para obtener información detallada si hay problemas con el entorno. Después de este proceso, la aplicación de escritorio de Office inicia y descarga localmente el complemento. Tenga en cuenta que la primera vez que ejecute un proyecto, puede tardar unos minutos en instalar las dependencias. Tendrá que instalar el certificado cuando se le solicite.

Detener la prueba del complemento de Office

Una vez que haya terminado de probar y depurar el complemento, cierre siempre el complemento siguiendo estos pasos. (El cierre de la aplicación de Office o la ventana del servidor web no anula de forma confiable el registro del complemento).

1. Para abrir la extensión, seleccione el icono Kit de desarrollo de complementos de Office en la barra de actividad.
2. Seleccione Detener la vista previa del complemento de Office. Esto cierra el servidor web y quita el complemento del registro y la memoria caché.
3. Cierre la ventana de la aplicación de Office.

Solución de problemas

Si tiene problemas para ejecutar el complemento, siga estos pasos.

• Cierre las instancias abiertas de Office.
• Cierre el servidor web anterior iniciado para el complemento con la opción Detener la vista previa de la extensión Kit de desarrollo de complementos de Office de Office.

El artículo Solución de problemas de errores de desarrollo con complementos de Office contiene soluciones a problemas comunes. Si sigue teniendo problemas, cree un problema de GitHub y le ayudaremos.

Para obtener información sobre cómo ejecutar el complemento en Office en la Web, vea Transferir localmente complementos de Office a Office en la Web.

Para obtener información sobre la depuración en versiones anteriores de Office, vea Depurar complementos mediante herramientas de desarrollo en Microsoft Edge (versión anterior).

Generador de Yeoman

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.

Creación del proyecto de 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

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

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. Si quiere explorar los componentes del proyecto de complemento, abra el proyecto en el editor de código y revise los archivos que se enumeran a continuación. Cuando esté listo para probar el complemento, vaya a la sección siguiente.

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

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.

     

   Sugerencia

   Si está probando el complemento en Mac, ejecute el siguiente comando antes de continuar. Al ejecutar este comando, se iniciará el servidor web local.

   npm run dev-server
   

   • Para probar el complemento en Excel, ejecute el siguiente comando en el directorio raíz del proyecto. Se iniciará el servidor web local y se abrirá Excel con el complemento cargado.

     npm start
     

   • Para probar el complemento en Excel en un explorador, ejecute el siguiente comando en el directorio raíz del proyecto. Al ejecutar este comando, se iniciará el servidor web local. Reemplace "{url}" por la dirección URL de un documento de Excel en OneDrive o en una biblioteca de SharePoint para la que tenga permisos.

     Nota:

     Si va a desarrollar en un Equipo Mac, incluya entre {url} comillas simples. No haga esto en Windows.

     npm run start -- web --document {url}
     

     Estos son algunos ejemplos.

     • npm run start -- web --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start -- web --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start -- web --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si el complemento no se carga localmente en el documento, desinstalándolo manualmente siguiendo las instrucciones de Instalación local manual de complementos en Office en la Web.

3. En Excel, elija la pestaña Inicio y, a continuación, elija el botón Mostrar panel de tareas de la cinta de opciones para abrir el panel de tareas del complemento.

   

4. Seleccione cualquier rango de celdas de la hoja de cálculo.

5. En la parte inferior del panel de tareas, elija el vínculo Ejecutar para establecer el color del rango seleccionado en amarillo.

   

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.

Pasos siguientes

Enhorabuena, ha creado correctamente un complemento de panel de tareas de Excel. Ahora, obtenga más información sobre las funcionalidades de un complemento de Excel y cree un complemento más complejo siguiendo este tutorial de complementos de Excel.

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.

• Parte del código de ejemplo usa ES6 JavaScript. Esto no es compatible con versiones anteriores de Office que usan el motor de explorador Trident (Internet Explorer 11). Para obtener información sobre cómo admitir esas plataformas en el complemento, consulte Compatibilidad con vistas web de Microsoft y versiones anteriores de Office. Si aún no tiene una suscripción a Microsoft 365 para usar para el desarrollo, puede calificar para una suscripción de desarrollador de 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.

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

Ejemplos de código

• Complemento "Hello mundo" de Excel: obtenga información sobre cómo crear un complemento de Office sencillo con solo un manifiesto, una página web HTML y un logotipo.

Recursos adicionales

• Información general sobre la plataforma de complementos de Office
• Desarrollo de complementos de Office
• Modelo de objetos de JavaScript en Excel para Complementos de Office
• Ejemplos de código de complementos de Excel
• Referencia de la API de JavaScript de Excel
• Uso de Visual Studio Code para publicar