Compartir a través de

Crear un complemento de Office independiente a partir del código de Script Lab

Si ha creado un fragmento de código en Script Lab, es posible que quiera convertirlo en un complemento independiente. Puede copiar el código de Script Lab en un proyecto generado por el generador de Yeoman para complementos de Office (también denominado "Yo Office"). A continuación, puede seguir desarrollando el código como un complemento que finalmente puede implementar en otros usuarios.

Los pasos de este artículo hacen referencia a Visual Studio Code, pero puede usar cualquier editor de código que prefiera.

Creación de un nuevo proyecto de Yo Office

Cree el proyecto de complemento independiente. Este proyecto es la nueva ubicación de desarrollo del código de fragmento de código. Siga las instrucciones de Creación de proyectos de complementos de Office mediante el generador de Yeoman. Si el fragmento de código es una función personalizada, use una de las opciones de funciones personalizadas del generador y, a continuación, vaya a la sección Funciones personalizadas.

Abra el fragmento de código en Script Lab

  1. Abra Office (Word, Excel, PowerPoint o Outlook) y, a continuación, abra Script Lab.
  2. Seleccione Script Lab>Código.
  3. Abra el fragmento de código en Script Lab.

Copiar código de fragmento en Visual Studio código

Ahora puede copiar el código del fragmento de código en el proyecto Yo Office en Visual Studio Code.

En Visual Studio Code, abra el proyecto del complemento. En los pasos siguientes, copiará código de varias pestañas de Script Lab.

Pestañas en Script Lab.

Copia del código del panel de tareas

  1. En Visual Studio Code, abra el archivo /src/taskpane/taskpane.ts. Si usa un proyecto de JavaScript, el nombre de archivo es taskpane.js.
  2. En Script Lab, seleccione la pestaña Script.
  3. Copie todo el código de la pestaña Script en el Portapapeles. Reemplace todo el contenido de taskpane.ts (o taskpane.js para JavaScript) por el código que copió.

Copiar HTML del panel de tareas

  1. En Visual Studio Code, abra el archivo /src/taskpane/taskpane.html.
  2. En Script Lab, seleccione la pestaña HTML.
  3. Copie todo el HTML de la pestaña HTML en el Portapapeles. Reemplace todo el HTML dentro de la etiqueta <body> con el HTML que copió.

Copie CSS del panel de tareas

  1. En Visual Studio Code, abra el archivo /src/taskpane/taskpane.css.
  2. En Script Lab, seleccione la pestaña CSS.
  3. Copie todo el CSS de la pestaña CSS en el Portapapeles. Reemplace todo el contenido de taskpane.css por el CSS que copió.
  4. Guarde todos los cambios en los archivos que ha actualizado en los pasos anteriores.

Adición de compatibilidad con bibliotecas adicionales

Si ha creado un fragmento de código que tiene dependencias de biblioteca adicionales, agréguelas al proyecto Yo Office mediante los pasos siguientes.

  1. Busque una lista de todas las dependencias de biblioteca en la pestaña Bibliotecas de Script Lab.
  2. Para cada biblioteca, agregue una <script> etiqueta al <head> del archivo /src/taskpane/taskpane.html .
  3. Establezca el src atributo de la etiqueta en la dirección URL de la biblioteca.

Para obtener más información, vea Atributo src de etiqueta de script HTML.

Controlar la inicialización

Script Lab controla automáticamente la Office.onReady inicialización. Debe modificar el código para proporcionar su propio Office.onReady controlador.

  1. Abra el archivo taskpane.ts (o taskpane.js para JavaScript).

  2. Encapsula las asignaciones del controlador de eventos en devoluciones de llamada a los eventos cargados de contenido DOMde Office onReady y HTML. Por ejemplo, reemplace:

    document.getElementById("run").addEventListener("click", () => tryCatch(run));

    con:

    Office.onReady(function () {
  // Office is ready.      
  document.addEventListener("DOMContentLoaded", () => {
    // The document is ready.
    document.getElementById("run").addEventListener("click", () => tryCatch(run));
  });
});

  3. Guarde el archivo.

Funciones personalizadas

Para convertir funciones personalizadas en un complemento independiente, siga estos pasos.

  1. Abra Excel y, a continuación, abra Script Lab.
  2. Seleccione Script Lab>Código.
  3. Abra el fragmento de código en Script Lab.
  4. Abra el archivo ./src/functions/functions.ts. Si usa un proyecto de JavaScript, el nombre de archivo es functions.js.
  5. En Script Lab, seleccione la pestaña Script.
  6. Copie todo el código de la pestaña Script en el Portapapeles. Pegue el código en la parte superior de la functions.ts (o functions.js para JavaScript) con el código que copió.
  7. Guarde el archivo.

Probar el complemento

Cuando complete todos los pasos, ejecute y pruebe el complemento independiente. Abra un símbolo del sistema, un terminal o un shell de Bash en la raíz del proyecto y ejecute el siguiente comando para empezar.

npm start

Office se inicia y puede abrir el panel de tareas del complemento desde la cinta de opciones. ¡Enhorabuena! Ahora puede seguir compilando el complemento como un proyecto independiente.

Cuando esté listo para detener el servidor de desarrollo y desinstalar el complemento, ejecute el siguiente comando.

npm stop

Para obtener más información sobre la transferencia local, las pruebas y la solución de problemas de un complemento, consulte la sección Prueba y depuración de la documentación.

Registro de consola

Muchos fragmentos de código de Script Lab escriben la salida en una sección de consola en la parte inferior del panel de tareas. El proyecto Yo Office no tiene una sección de consola. Todas las console.log* instrucciones escriben en la consola de depuración predeterminada (como las herramientas para desarrolladores del explorador). Si desea que la salida vaya al panel de tareas, debe actualizar el código.

  • Last updated on